5
\$\begingroup\$

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);
player.sprite.animations.play('idle');

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?

\$\endgroup\$
1
\$\begingroup\$

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

https://www.codeandweb.com/texturepacker/tutorials?km_user-type=developer

https://www.codeandweb.com/texturepacker/download

\$\endgroup\$
3
  • 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\$ – Pooya Estakhri Aug 15 '15 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\$ – tigerwoods345 Aug 15 '15 at 5:27
  • \$\begingroup\$ By using shoebox i never added x,y width and height manually \$\endgroup\$ – Pooya Estakhri Aug 16 '15 at 20:03
1
\$\begingroup\$

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,
    Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);

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.

afterburners.animations.add('burn',
    ['fire11.png', 'fire14.png', 'fire15.png'],
    15, true);
afterburners.animations.play('burn');
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.