Animation (sprite sheet) not playing as expected

Phaser 3
1

Hi!

I am having a weird experience with TexturePacker (I am using registered version).
The problem is that when I preview it in TexturePacker it apparently works fine but when I play it in Phaser it shows an unexpected behavior (the whole animation rolls up as an old TV with vertical issue).

Since I don’t have a public host server to publish everything, I made this small video to show what happens. The first scene is how it previews in TexturePacker (correctly), then in the next scene I show what it’s doing in Phaser and then I show the TexturePacker screen.

I added a copy of the sprite generated by TexturePacker (CircleKill.png). All frames have 57 x 51 pixels.

CircleKill

Also below you will see my code:

class Level1 extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.spritesheet('Circle', 'assets/animations/CircleKill.png', { frameWidth: 57, frameHeight: 51 });
    }

    create ()
    {
        this.anims.create({
            key: 'die',
            frames: this.anims.generateFrameNumbers('Circle'),
            frameRate: 10,
            repeat: -1
        });

        const Circle = this.add.sprite(100, 100);
        Circle.play('die');
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'MyGame',
    width: 1024,
    height: 768,
    pixelArt: true,
    scene: [ Level1 ]
};

const game = new Phaser.Game(config);

I’d like to know if someone already has experienced this behavior and know some trick to get rid off it. Also if you could point me a different (better) way of doing it other than using TexturePacker I would appreciate any tip.

Thanks!

2

Are you sure frameWidth / frameHeight are correct? The image does not have multiples of these…

1 Like
3

Hey Milton!

I checked all the image frames and they ARE correct without any variance in size (57w x 51h).

Anyway I figured the issue and it’s a bug in TexturePacker that may happen with images with an extra transparent room all around. In this case if you pick any option but None in Trim Mode it will remove all the transparent pixels and will cause the issue. Nonetheless even so it will generate a wrong sprite sheet. See, in my case each image has 57 pixels width meaning that the final sprite sheet should be a strip with 1140 pixels width per 51 pixels height; however TexturePacker exported the strip with 1180 pixels width per 53 pixels height. For some reason (I have no idea why) it added 1 pixel all around each image resulting in images 2 pixels bigger in width and height.

So the “fix” to have the sprite sheet working as expected is to ensure that:

  1. Trim mode set to “None”
  2. Instead of using the actual size of the images in your code, divide the sprite sheet strip width by the amount of images to find the new final size of the frame, that should be 2 pixels bigger than the original images. So in my case I should replace:

this.load.spritesheet('Circle', 'assets/animations/CircleKill.png', { frameWidth: 57, frameHeight: 51 });

With:

this.load.spritesheet('Circle', 'assets/animations/CircleKill.png', { frameWidth: 59, frameHeight: 53 });

:slightly_smiling_face:

EDIT: I just figured that the 1-pixel extra all around is due to the option Extrude in the “Sprites” tab of TexturePacker that comes configured to 1 by default and that can cause a lot of confusion (as it caused to me). To get rid of it just set this value to 0 and use the actual size of the image frames in your code.

4

You could load the exported atlas from Texture Packer instead.

5

Samme, I believe that in this case the trim and the extrude options would produce the very same issue though.

:slight_smile:

6

I don’t think so, because Phaser finds the correct values in the atlas metadata.

7

I see! I will check this! Thanks!!!