HTML and CSS Reference
In-Depth Information
Objective complete - mini debriefing
We set the custom data object when we created the boundary. In this task, we use the custom
data to store the reference of the graphics sprites.
We use
SetUserData
to assign the sprite to a body.
We iterate through all the bodies on every frame and use
GetUserData
to get the reference
of the sprite.
Then, we update the sprites posiion and rotaion based on the body's physics properies.
When visualizing, as Box2D uses the center point to posiion the body, we can set the
registraion point of the graphics to the center too. This makes the graphic placement
a lot easier.
Adding the addChildAt display object to a specific z-index when
adding a child
When we add the display object, we can also decide the z-index by specifying the index
in the display list. By default, the z-order is decided by the order of calling the
addChild
method. If we want to add a sprite to a specific z-index, we can use the
addChildAt
method where the second parameter takes the z-index.
Classified intel
It is our choice to choose how to visualize the physics world. We can use canvas and the
EaselJS library or we can even use the DOM elements with the CSS transform.
I have made a physics game with the CSS transform for its posiion and rotaion. Thanks to
the 3D acceleraion, it runs at 60 frames-per-second even on an iPhone.
We have used Flash exporing to CreateJS vector drawing code. We can alternaively export
all the graphics into separate iles instead of using the Flash vector exporing opion.
