HTML and CSS Reference
In-Depth Information
Implementing a complete SWF renderer is a tall order, but a renderer that supports a subset of the format may
be feasible. The SWF library for Open Flash Library (OpenFL) is an example of this. Despite the complexity and
performance issues with vectors, it may be worth it for assets that need to be wildly scaled and rotated.
Cutout Animation
This third approach is similar to traditional paper cutout animation and is popular for character animation. An asset
is split into individual “cutouts,” which, for characters, usually consists of an assemblage of body parts; each cutout
is rendered to an image and packed into a texture atlas (see Figure
7-3
). To play back the animation, each cutout is
independently translated, rotated, and scaled on a timeline.
Figure 7-3.
A texture atlas containing body parts is used to assemble a character
Because only the cutouts are saved to the atlas, and not entire frames, this technique uses far less memory than
sprite sheets. The cutouts are tweened on a keyframe timeline, so the animation can play back at a smooth 60FPS and
do so much more efficiently than vectors. The tools for exporting cutouts and the accompanying metadata are freely
available, such as Dragon Bones and Flump.
A downside is that not all animations can be easily split into cutouts. An animation such as a writhing tentacle,
which makes heavy use of shape tweens, is not easy to split up into individual parts. Unlike the other two approaches,
cutouts also require that artists structure their assets a certain way.
Furthermore, overdraw can be a concern with cutouts. Scenes made up of several large, overlapping pieces can
add up to a lot of painting and perform poorly on devices with low fill rates (see Figure
7-4
).
Figure 7-4.
Overdraw comparison between cutout animation (left) and the equivalent, using a sprite sheet (right);
darker regions have more overdraw
