Game Development Reference
In-Depth Information
Given the previous example, it should seem clear to you that you could easily substitute
Bitmaps
with
Sprites
when creating the games that were built in Chapter 6. Since those games had no frame animations, loading in simple
bitmaps versus using sprite sheets is probably trivial; however, a game with several more graphics would be better
served with sprites.
Before diving into sprite sheet animations, let's take a look at another useful class that utilizes sprite sheets. This
class allows you to write text on the stage using bitmap graphics.
Bitmap Fonts
Font bitmapping is the process of using bitmap graphics to write out messaging, usually from a sprite sheet. This
technique can be accomplished by using the class
BitmapText
, which was written to work with EaselJS.
BitmapText Class
The
BitmapText
class is a display object that uses a
SpriteSheet
object built out of frames for each available character.
This can be beneficial in that it guarantees that your dynamic text will look exactly how you want it to. Some computers
might not embed or correctly display the font you are using, which can have a negative effect on your intended design
style. A
BitmapText
object is built by passing in the text you want to display and the sprite sheet you wish to use.
var txt = new createjs.BitmapText("12345", spritesheet);
stage.addChild(txt);
stage.update();
The
spritesheet
object used in this example consists of a series of single frame animations. The animation
labels must correspond to the characters they represent. Listing 6-3 shows an example of this data.
Listing 6-3.
Data Example for a Font Sprite Sheet
var data = {
"images":["letters.png"],
"frames":[
[2, 2, 34, 41],
[34, 176, 22, 43],
[36, 45, 26, 41],
[34, 88, 24, 41],
[2, 45, 32, 41],
[34, 131, 22, 43],
[2, 174, 30, 41],
[38, 2, 24, 41],
[2, 131, 30, 41],
[2, 88, 30, 41]
],
"animations":{
"0":[0],
"1":[1],
"2":[2],
"3":[3],
"4":[4],
"5":[5],
