Game Development Reference
In-Depth Information
along with a constantly rendering canvas, was too much for a mobile processor to
handle.
One way to determine if a particular CSS animation is too demanding on a mobile
device is to use profiling tools such as Google Developer Tools and take note of the
sort of work that the browser needs to do in order to achieve the desired animation.
In cases such as this game, where a background detail was so computationally in-
tensive to generate that it conflicted with the calculations required to simply play the
game, we might well opt for a less demanding alternative. In this game, instead of
loading the CSS animation onto the document body, we simply display a still back-
ground graphic.
Use separate canvases for each game layer
As briefly discussed earlier, one powerful optimization technique in HTML5 rendering
is to use more than one canvas. The point is to render less frequently those things
that only need to be rendered every once in a while. Those things that need to be
rendered much more often, we render by themselves in a dedicated canvas context
so that no CPU (or CPU) power is used to render details around these elements.
For example, the background scene of a game generally stays the same for several
frames. Instead of clearing the entire canvas context, only to redraw those exact
same pixels, on their exact same prior location, we can just render a background
scene on a dedicated canvas and only render that scene again when the screen
scrolls, or the scene otherwise changes. Until then, that canvas need not be
bothered. Any movable objects and entities that need to be rendered multiple times
per second can just be rendered on a second canvas, with a transparent back-
ground, so that the background layer can be seen through.
In this game, we could very well have rendered the image used as the background
graphic onto a dedicated background layer, then provide the background animation
to the canvas this way. However, since HTML5 provides a similar function that pro-
duces the same effect, we opted for that instead.
Use image atlases
The idea behind image atlases is really quite brilliant. Since the canvas API specifies
a function that allows us to draw onto the canvas context from a source image spe-
