HTML and CSS Reference
In-Depth Information
Tools that can export this format include TexturePacker, Zoë, and Flash itself. Besides the tools' being ubiquitous,
the main advantage of sprite sheets is how simple they are to implement. If you're rolling your own game engine,
it's only a matter of parsing the metadata and using them to draw the correct image each frame. Depending on the
animation, this can also be pretty efficient, as each frame is a single rectangle, with no overdraw (pixels painted more
than once).
One big drawback, especially with games that run on mobile or that are loaded over the Web (which is to say,
most HTML5 games), is texture atlas memory usage. For more complex animations this means quickly hitting
the dreaded memory limit on mobile and slow download times. Because the size of the texture atlases is directly
correlated with the duration and frame rate of the animation, the only way to reduce the size is to make shorter,
choppier animations, which is not always ideal.
If you can accept the memory footprint, sprite sheets can be a good choice for small or short animations. For
longer animations, there are luckily other approaches.
Vectorization
Instead of storing images pixel by pixel, vector assets contain only a list of shapes and effects used to compose the
final image. For simple, cartoonlike scenes, this works pretty well. One large benefit of vector images is that they retain
their quality when scaled and rotated (see Figure
7-2
). Another benefit over sprite sheets is that playback frame rate
and duration aren't directly tied to memory usage.
Figure 7-2.
An extreme close-up of a character; the vector version (left) retains quality, whereas the cutout version
(right) shows artifacts
Scalable vector graphics (SVG) is the de facto vector graphics file format for the Web, with renderers built into
almost every modern browser. Unfortunately, SVG performs worse than HTML5 Canvas across the board. One reason
for this is that, owing to game developer interest, Canvas rendering has received a lot of optimization. Another is that
SVG was simply not designed for performance and games. Moreover, browser support for SVG animation is very spotty.
Flash's SWF format is light on memory usage, especially compared with SVG, but vector rendering still suffers in
drawing speed. Common practice in Flash game development circles is to use vectors sparingly and to move images
to bitmaps as much as possible. Especially on mobile, vector graphics performance does not scale well to complex
assets with lots of tiny, intricate shapes and gradients.
Flash itself is a vector-based authoring tool, and its SWF export format contains all the vector data needed to
render an animation in the Flash player. SWF is a complex, binary format, but once parsed, the vector graphics
methods in HTML5 Canvas are well suited to rendering it. Mozilla Shumway is an experimental project whose aim is
to develop a SWF renderer (along with an entire Flash player) in HTML5. The way in which Flash renders SWF files is
largely undocumented, so any game engine that implements SWF rendering necessarily takes on a lot of complexity.
