So I have this game that I made a while back and I want to port it using Phaser.

The game is made using individual PNG files for all the animation frames, and there are over 100 of them.

From reading through the docs, it seems Phaser only supports spritesheets for animations.

I would like to do something like this :

player.sprite.animations.add('idle', ['images/s_snailIdle_0.png', 'images/s_snailIdle_1.png'], 60, true, false);

Is there a way to add individual images to a sprite's animation? If not, Is there a way to change the image of a sprite so that I can implement my own animation system?


2 Answers 2


For anyone else in this dilemma, I would recommend these links to you:



  • 1
    \$\begingroup\$ Shoebox is a simple and very good tool too, currently im using it because of simplicity and ease of use. renderhjs.net/shoebox \$\endgroup\$ Commented Aug 15, 2015 at 4:34
  • 1
    \$\begingroup\$ Certainly look so, though in this case texture packer comes with built in support for generating a Phaser.atlasJSONhash, which eliminates the need for manually inputting x, y, width, and height values for each sprite. \$\endgroup\$ Commented Aug 15, 2015 at 5:27
  • \$\begingroup\$ By using shoebox i never added x,y width and height manually \$\endgroup\$ Commented Aug 16, 2015 at 20:03

Since the asker ended up using a texture atlas, for those looking for the relevant code, preload the texture atlas as usual:

this.load.atlas('sheet', 'sheet.png', 'sheet.json', null,

You can then create a new Sprite, making sure to reference the atlas.

var afterburners = new Phaser.Sprite(game, 0, 15,
    'sheet', 'fire11.png');

Then you can switch to a different sprite in that atlas for an animation.

    ['fire11.png', 'fire14.png', 'fire15.png'],
    15, true);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .