Game Development Reference
In-Depth Information
"6":[6],
"7":[7],
"8":[8],
"9":[9]
}
}
Creating the graphics to create these sprite sheets can be a bit tricky. There are amazing bitmap font generators,
a lot of them free, but at the time of writing this topic they don't support EaselJS. However, there are few different
approaches that can be taken to generate the character graphics you need for use with bitmap fonts.
Creating Bitmap Font Sprite Sheets
The first approach is the utilization of a bitmap font editor. As previously mentioned, EaselJS is not available in any of
these popular tools as of this date, but you can still utilize the assets generated to manually create the data.
Depending on the software chosen, there will be several options and features for you to choose from while
creating your font sprite sheet, much like Texture Packer. Instead of importing bitmap files, you'll typically be given
a menu to choose your desired font. We won't be covering any of these applications specifically since they don't
support EaselJS, but the following is an example of some XML data that would be generated from the application
Glyph Designer:
<char id="65" x="51" y="158" width="50" height="45" xoffset="-1" yoffset="13"
xadvance="48" page="0" chnl="0" letter="A"/>
<char id="66" x="382" y="158" width="41" height="45" xoffset="1" yoffset="13"
xadvance="44" page="0" chnl="0" letter="B"/>
<char id="67" x="37" y="65" width="37" height="47" xoffset="2" yoffset="12"
xadvance="41" page="0" chnl="0" letter="C"/>
This will correspond with the sprite sheet image generated by the application. As you can see, the rectangle
information you need to create your EaselJS
SpriteSheet
data is in each XML node. The necessary frame label is
included as well in the attribute
letter
. The rest of the data will not be used, as
BitmapText
will not support them.
Listing 6-4 shows what your sprite sheet data will look like after converting it from the XML.
Listing 6-4.
Data Converted to EaselJS Format from XML
var data = {
"images":["letters.png"],
"frames":[
[51, 158, 50, 45],
[382, 1158, 41, 45],
[37, 65, 37, 47]
],
"animations":{
"A":[0],
"B":[1],
"C":[2],
}
}
