Spritesheets usage

I am experimenting with Spritesheet lib:

  • is it possible to set the starting frame (/set a specific frame statically) of a behaviour?
  • is it possible to get the total frames number of a behaviour?
  • how do I use the 4 importers? BitmapImporter is the most basic, but very limited.
  • did I miss the documentation?


1 Like

When you create a behavior, you set which frames are a part of it, so you might set frame 1 to “stand”, frames 2-20 to “idle”, frame 21-25 as “walk-left”, etc

You can create the behaviors and such manually, or the importers are designed to help automate this.

You would control behavior by calling showBehavior, which queues up the next thing the character will do

Yes, I have already done this with BitmapImporter, but I don’t know how to use the others.

And what if I wanted to start different instances of the same animation from different frames?

If you use different frames, create a new behavior :slight_smile:

I’ve also done things like:

sprite.showBehavior (action + direction);

Assuming you had set up behaviors like “WalkLeft”, “WalkRight”, etc

Same as I did, reelSpin0-9, to start from 10 different points, but it there was the possibility to choose a frame dynamically… :smile:
I think I will try to extend your classes :wink:

Is it possible to use the XML or generally the descriptor textfile exported with TexturePacker? I have a spritesheet with more than 900 images inside, and it is impossible for me to understand which are the frames that TexturePacker stacked automatically.
Is there a parser to automatically extract frames informations from these textfiles? SparrowImporter? I haven’t tried it yet.

One of the importers is likely compatible with an export format from TexturePacker, if not, it might not be hard to write

I will try Sparrow Importer, but creating sequences with Texture Packer it is not possible to define separate animations, or at least I don’t know how to.
If SparrowImporter will not save the day I will write my parser to identify the images index sequence to simplify the job, it should be very easy to do.

I actually use TexturePacker and spritesheet together. In TexturePacker, set up an EaselJS project. In spritesheet, use the ZoeImporter (which is EaselJS). I did have to take that importer and fix one or two bugs that made the animation frame names not work. I will look into posting those changes for all to use : )

I also modded the class to not assume the use of Assets for the image and json file (instead taking in a bitmap and string).

As for animations, the frames will get set up and named correctly, but TexturePacker doesn’t know or care about animations, so what I did was write a post processing script (using python) that cracks the file open and combines all like-named frames into an animation.

For example, your data will look like this by default:


walk01 [ 0 ]
walk02 [ 1 ]
walk03 [ 2 ]
walk04 [ 3 ]
run01 [ 4 ]
run02 [ 5 ]

so i wrote a simple script to turn it into this:

walk[ 0, 1, 2, 3 ]
run [ 4, 5 ]

Going even further I wrote a movie clip implementation to use a spritesheet like it were a movieclip (mostly mapping calls and behaviors to match how movieclip works to the best I could). It is a rather nice system at this point.

Hope this helps. I can answer more questions if necessary. I will check if I can commit code to the spritesheet library for the frame label fix to ZoeImporter.

sounds like a great candidate for a pull request :slight_smile:

I used a different approach: I exported a generic XML file, with properties name, x, y, width, height, pivotX, pivotY, and created my XMLBitmapImporter, modifying, expanding and simplifying the whole spritesheet library (and I still have something more to add!): I can specify an image for the alpha channel, that is merged with the main spritesheet image BEFORE generating the single frames, avoiding to merge alpha for each frame. I have also created a method addBehaviorByPrefix, that allows to specify a simple string to identify all the frame names starting with that substring, similarly to the Starling way of creating animations from spritesheets. It works great!
I will improve the library later, but for now it does what I need.

I encountered a problem: I had to split the spritesheet in 2 parts to avoid HTML5 problems with memory overload (crash with Chrome and black screen with FF): the problem starts when copying the alpha channel (with the whole image and single frames too). I used a 7600x5000 image, and you could say “well, it is obvious, it is a giant image!”, but using an image of the same size with alpha channel already in it (a PNG instead of JPG) the browser does not crash ----> it is a problem in the copyChannel process.