HTML and CSS Reference
In-Depth Information
Chapter 7
Importing Flash Assets
Bruno Garcia, co-founder, 2DKit
The first generation of HTML5 games was simply about fighting to reach an acceptable frame rate. These games were
mainly developed by individual hackers or tiny, programmer-led teams and featured mainly static artwork.
These days, we're seeing a coming of age in HTML5 games. Devices and browsers are fast enough to push more
pixels, teams are growing to include more artists, and there's an increasing focus on visual quality to rival native
applications (apps).
But, what tools are there to create HTML5 animations? As it turns out, there are very few, and many game artists
are already trained in using Flash. Can we leverage those skills in the production of HTML5 games?
In this chapter, I will be presenting three different approaches to exporting assets from Flash into HTML5 games:
sprite sheets, vectorization, and cutout animation.
Sprite Sheets
By far the simplest and most common approach is to render each frame of the animation to an image and then pack
those images into a single texture atlas, or sprite sheet, as shown in Figure
7-1
. Metadata, such as frame size and
playback rate, are also typically exported in a separate JavaScript Object Notation (JSON) or XML file.
Figure 7-1.
A sprite sheet containing eight frames of a walk animation
