Building HTML5 Games with ImpactJS

Chapter 2. Working With Sprites

Traditionally in gaming, the asset pipeline refers to the visual workflow you create for your project. This could be as simple as copying files over by hand into your game’s media folder or writing more complex automation scripts to generate the art for you. For Impact games, all the in-game graphics are going to be sprites.

Sprites and Sprite Sheets

Sprites are the primary way we display and animate artwork in Impact games. A sprite is a single bitmap image that is drawn to the display—in this case the HTML5 Canvas element. To help organize them better, related sprites are grouped together into a single image called a sprite sheet (see Figure 2-1).

Figure 2-1. An example of a sprite sheet from the game we are going to build.

Figure 2-1 shows a sprite sheet that contains all the visual states used for movement of the main character. Sprite sheets are usually set up using dimensions and coordinates that are easily divided. In this example, the sprite sheet is 160×16 pixels, and each sprite is 16×16 pixels. This allows us to simply divide the sprite sheet by 16 and automatically figure out that there are 10 sprites. Generally, when using sprite sheets for animation, we would tell the game engine which sprite is part of each animation set. Here is an example of how that will work in Impact:

this.addAnim( 'idle', 1, [0] ); this.addAnim( 'run', 0.07, [0,1,2,3,4,5] ...