HTML and CSS Reference
In-Depth Information
Visualizing the spinning cross
We have limited the dimensions of the obstacles. That's because it will be challenging to
have too many dimensions when we use graphics to represent them.
For any dynamic dimensions, we will need to use the EaselJS vector drawing.
9-slice scaling
If we want to scale a bitmap graphic nonproporionally on the graphics, we can apply a
technique called 9-slice scaling.
9-slice is not present in EaselJS by default. But there is a patch by Josh Tynjala for this
purpose. Applying the code patch from the following URL makes bitmap scaling work
in a more flexible way:
https://github.com/CreateJS/EaselJS/pull/281
.
In case the pull request is removed, the menioned class is copied
into the following gist:
https://gist.github.com/makzan/
b1bb3ee6764ef316ce92
.
If we use HTML and CSS to visualize the physics world, we can use the border-image property
for 9-slice scaling. The following URL shows how this property works:
http://css-tricks.com/understanding-border-image/
An online generator allows us to visually configure and generate the border image code:
http://border-image.com/
I have even created a coins falling machine game with Box2D using
DOM and CSS to visualize all the graphics. By making use of the
translate
and
rotate
funcions from the transform property,
I can make the game run smoothly even on mobile devices. You
may try the game at the following URL:
http://42games.net/html5/ChickenRainHTML5/
