EaselJS | HTML5 | JavaScript | Tutorial

Using TexturePacker with EaselJS, and Extracting Frames Using Strings

I recently started using EaselJS and I have to say it’s pretty great. I’m really loving the way I can easily group bitmaps into containers and easily remove or swap child depths inside of them. This is a very logical approach, whether you come from Flash or not.

I picked up the framework very quickly, but I wanted to continue with my usual work flow for working with graphics. Primarily the use of TexturePacker. The easelJS API for spite sheets and animations is great, but its not obvious on how to deal with non-animated sprites and how to use string keys to access them from your sprite sheet. The way a TexturePacker user may be used to. This key/value approach assures me that the key ‘coin’ will get me the coin graphic I need. Preventing me to worry about further manipulation or re-ordering of my data.

So this being said, how can I use this amazing framework while not sacrificing the TexturePacker work flow that I’ve become so fond of? It turns out to be pretty painless and works great.

First off, translating the TexturePacker JSON data to an EaselJS-friendly object is simple enough. We could keep it simple and loop through the JSON, build our SpriteSheet data by building out our frames array. This is great, but we’ll forever need to know that our ‘tree’ graphic is on frame 3 or our ‘coin’ graphic is on frame 8. And if that changes, we’ll need to update any code that drew those graphics.

We can’t label our frames, but we can label animations. What we can do now is add a one-frame animation for every frame in our loop. We can then access these animations in a BitmapAnimation by using a string and simply staying at its first and only frame.

I’m not going to write out this data-conversion loop. If you are finding this topic useful, then you can surely figure that out. Just get from Point A to Point B.

var texturePackerData = { "frames": { "red_coin.png":{ "frame": {"x":0,"y":0,"w":354,"h":550}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":354,"h":550}, "sourceSize": {"w":354,"h":550} }, "blue_coin.png":{ "frame": {"x":354,"y":0,"w":354,"h":550}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":354,"h":550}, "sourceSize": {"w":354,"h":550} }, "flower.png":{ "frame": {"x":708,"y":0,"w":354,"h":550}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":354,"h":550}, "sourceSize": {"w":354,"h":550} } }};

Note: TexturePacker uses the name of original png file as the name of each object. I chose to extract the ‘.png’ when converting the data.

data = { images: ["pngFromTP.png"], frames: [ [0,0,354,550], [354,0,354,550], [708,0,354,550]], animations: {red_coin:[0], blue_coin:[1],flower:[2]} }; var gamePieces = new SpriteSheet(data);
//USAGE var bmpa = new BitmapAnimation(gamePieces); bmpa.gotoAndStop("red_coin");

So that’s it? Well, not quite good enough.

Using this approach would require us to retain BitmapAnimation objects to simply display single pieces of a bitmap. Seems like a waste doesn’t it? We should be able to convert that single frame from our animation into a simple Bitmap object. The Bitmap object takes one parameter, which can be an Image or a path to one. Unfortunately, there is no way to assign it a rect to draw from that image. Luckily, EaselJS provides a method that will extract the first frame of any animation and return an Image. We can then pass that image into a new Bitmap object.

var img = SpriteSheetUtils.extractFrame(gamePieces, "red_coin"); var bmp = new Bitmap(img)

Using this method, and the dynamically generated SpriteSheet data built from TexturePacker data, we can easily draw single frames from our sprite sheets using strings as identifiers.

var bmp = new Bitmap(SpriteSheetUtils.extractFrame(gamePieces,”red_coin”)); addChild(bmp); bmp = new Bitmap(SpriteSheetUtils.extractFrame(gamePieces, “flower”)); addChild(bmp);
Read / Write Comments