HTML and CSS Reference
In-Depth Information
reasonable Canvas resolutions) so if you target those devices, you need to consider your choice of technology
carefully.
Your Interaction Method
The type of game and the interaction method required should drive your decision on technology. The
<can-
vas>
tag, in all its glory, does not natively provide a scene graph. A
scene graph
is a hierarchical representation
of the state of each element in the current scene. For CSS3 (DOM) and SVG, you have nested sets of elements
that have discrete representations that you can modify (by changing the
left
or
top
position of a DOM ele-
ment, for example). For Canvas, all you have is a bunch of pixels on the page.
Say you draw a car and you want to move the car. With CSS3 or SVG, you could pick up the car object
as represented in the scene graph and move it by changing its transform, or
left
and
top
, CSS property.
Wherever you move it to, it will stay until you move it again. If the car had child objects that were wheels, those
would automatically move along with the car.
For the Canvas you have only a representation of the car as drawn on the Canvas as a bunch of pixels. If you
tried to move it, you'd just end up moving some pixels from one spot to another on the Canvas. To move the
car, you need to either clear the Canvas and redraw everything in its proper new position, or erase the car by
drawing the background and then drawing the car in a different spot. If your car has wheels that move, you need
to draw the car and then its wheels each time the wheels rotate. Although the Canvas gives you control over
every last pixel you draw in your game, it requires more work by the developer or game engine.
Scene graphs have another advantage. Because the scene graph knows about the positions of elements, the
browser can handle touch and mouse events and route the event to the correct object. With Canvas games you
need to write the logic to do picking and target specific objects.
All this discussion of scene graphs means is that if you have a game that's going to work via direct interac-
tion—in other words by having the user interact directly with elements on the screen—using a technology that
has a scene graph can make your life easier. For example, a poker game where the user clicks and possibly drags
cards would benefit from a scene graph. An action game where the controls are just a left and right arrow and a
jump button would not.
Your Performance Requirements
The last consideration is performance. As mentioned previously, the type of game you build and its performance
needs influence your technology decision. CSS3 and SVG tend to perform better on more devices providing
you aren't moving too many individual elements at a time. If you are moving only a few elements at any given
time, CSS3 in particular has hardware-accelerated support for transitions. With hardware acceleration, objects
will move smoothly at a high frame rate without your needing to worry about animating them yourself.
On the flip side, for a fast-scrolling platformer, hardware-accelerated Canvas generally performs better on
the browsers that support it than using CSS3.
