Importing Flash Assets - HTML5 Game Development Insights - page 98

Despite a few drawbacks, cutouts represent a good middle ground between sprite sheets and full vectorization
and can be efficiently applied to a wide range of scene types.
New Tools
The Flash plug-in is on the way out, but the Flash authoring tool will still be used in game production on platforms for
years to come. There are some possible alternatives popping up, though:
Spriter : An editor for cutout animation, targeted explicitly to games. Cutouts can be
attached to a fully posable skeleton, which is great for characters that need to switch
between multiple animations fluidly. Spriter exports to an open format and has
implementations available in multiple languages. Unlike Flash, Spriter is only for
animation; artists will need to author images in another editor.
Google Web Designer : Mainly suited to creation of banner advertisements and simple
motion graphics. Exports to document object model (DOM) elements and Cascading Style
Sheets (CSS), so this may not be suitable for games using Canvas or the Web Graphics
Library (WebGL).
Adobe Edge Animate : Adobe's answer to HTML5 publishing. Not yet nearly as complete as
Flash, and limited to DOM and CSS exporting.
Other Assets
This chapter focuses on animated image assets, but Flash can also manage other asset types, all of which need special
consideration when taking to HTML5:
Sounds : The Flash plug-in comes with an MP3 decoder, so there has never been any
question about which format to choose. In HTML5, audio format support across browsers
is more fragmented. To support all modern browsers, encode copies of the same sound in
both MP3 and OGG , and load the correct format at runtime.
Fonts : TrueType font rendering is fairly slow in HTML5 Canvas, and prerendering lines of
text to cached surfaces can eat up a lot of memory. A great alternative is to use bitmap fonts,
in which each glyph is prerendered to a texture atlas. The BMFont editor and file format are
commonly used in the games industry for bitmap fonts.
Nine-Slice images : These are images that are divided into a 3 × 3 grid (nine cells) that can be
scaled independently. Rendering these images is no problem in Canvas. The tedious part is
copying the grid coordinates from Flash. It may be possible to automate this task by parsing
the FLA, which is actually just a zip containing several XML files.
Conclusion
To recap, Table 7-1 is a handy reference comparing the three different animation methods.