ReadMe - nsidi/myApp GitHub Wiki
This is an interactive storybook for all children but targeted for children with mental health challenges.
- To open the file, double-click on the index.html file and open it on a browser.
- You can view the next page or the previous by clicking on the page corners at the bottom
For the purpose of this document, I will only cover the basic of how to get started on setting up a page in the storybook.
- Here is the beginning of the code for the cover page of the book. As you can see, I am referencing CreateJS, ZimJS, and the Physics files: Box2D and Physics. I then set up the asset path for the file (i.e. that makes it easier to load all the assets for the file).
- I then set up the background and the elements of the physics world (i.e. the frame and borders). frame.on("complete", function() {
- I set up a few physics shapes and determine properties for each shape. The word ‘false’ implies that it is static – meaning, it stays in place and does not move. The top and bottom bar bodies are static to keep the rocketBody in place. The rocketBody’s dynamic property is set to ‘true’ and is thus able to move.
- In order to add shape properties to the physics elements, we add shape properties to it using ZimJS and then add it to the physics map. This means that whatever shapes we made above in the physics, we can add shapes inside those Physics elements. Once that is complete, we can add functions to it. For example, in the rocket.on function, we can choose to have it do multiple things.
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>Cover</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>var zon = true; // true for comments from zim code</script>
<script src="https://d309knd7es5f10.cloudfront.net/zim_4.3.1.js"></script>
<!-- physics libraries -->
<script src="https://d309knd7es5f10.cloudfront.net/Box2dWeb-2.1.a.3.min.js"></script>
<script src="_js/physics_0.1.2.js"></script><!-- helper code for box2D -->
<script>
var frame = new zim.Frame("fit", 1024, 768, "#231F20");
frame.on("ready", function() {
zog("ready from ZIM Frame");
`var stage = frame.stage;`
`var stageW = frame.width;`
`var stageH = frame.height;`
`var assetPath = "_assets/";`
`frame.loadAssets(["background.png", "rocket.png", "rocket_fire.png", "next.png", "star.png", "starTwo.png", "starThree.png", "star.mp3", "label.mp3", "rocket.mp3"], assetPath);`
`frame.on("complete", function() {`
// Set background to an image
var background = frame.asset("background.png");
background.scale(1).centerReg(stage);
// Borders for the world
var borders = {x:0, y:0, width:stageW, height:stageH};
// New Physics object passing in the ZIM frame and borders
var physics = new zim.Physics(frame, borders);
var topBarW = 500; var topBarH = 100;
var bottomBarW = 900;
var bottomBarH = 100;
//rocket container
var rocketW = 345;
var rocketH = 500;
// width, height, dynamic, friction, angular, density, restitution, maskBits, categoryBits, linear
var topBarBody = physics.makeRectangle(topBarW, topBarH, false);
topBarBody.x = 350;
topBarBody.y = 102;
topBarBody.rotation = -35;
var bottomBarBody = physics.makeRectangle(bottomBarW, bottomBarH, false);
bottomBarBody.x = 688;
bottomBarBody.y = 430;
bottomBarBody.rotation = -35;
var rocketBody = physics.makeRectangle(rocketW, rocketH, true, .2);
rocketBody.x = 280;
rocketBody.y = 480;
rocketBody.rotation = 35;
physics.drag([rocketBody]);
var topBar = new zim.Rectangle(topBarW, topBarH, "white"); topBar.centerReg(stage); topBar.alpha=0; topBar.cursor = "pointer";
var bottomBar = new zim.Rectangle(bottomBarW, bottomBarH, "white");
bottomBar.centerReg(stage);
bottomBar.alpha=0;
bottomBar.cursor = "pointer";
var rocket = frame.asset("rocket.png");
rocket.centerReg(stage);
rocket.cursor = "pointer";
rocket.on ("click", function() {
});