Why is my spritesheet displaying all messed up in game?

Question

I'm having an issue I don't quite understand, where my spritesheet is looping strangely and not showing the full sprite I want, even though I feel like I'm specifying it correctly. My code is in phaser.js.

Example: https://i.sstatic.net/PlD0N.jpg

My code for it is as follows:

this.load.spritesheet('dude', 'assets/bunny.png', { frameWidth: 32 , frameHeight: 42 });

    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', {start: 56, end: 64}),
        frameRate: 5,
        repeat: -1
    });

    this.anims.create({
        key: 'turn',
        frames: [{key: 'dude', frame: 4}],
        frameRate: 20
    });

    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', {start: 40, end: 48}),
        frameRate: 5,
        repeat: -1
    });

Look fine on the 'turn' frame, but not so fine on movement. For reference, here's the spritesheet I'm attempting to use: https://i.sstatic.net/Tn45R.jpg

Answer 1

You set your sprite sheet grid to 32x42 { frameWidth: 32 , frameHeight: 42 }

This is how the sprites end up being sliced with the 32x42 grid you specified:

You need to properly line up your sprites within the grid cells.

Answer 2

May I suggest an online tool, which has helped me a lot recently? https://css.spritegen.com/ You import all your seperate sprite images, add the padding you like and it creates a spritesheet and a css file. Though the css file is not needed in phaser, it displays useful information such as sprite width, sprite height, padding.

So finding the frameWidth and frameHeight values becomes very easy!

{ frameWidth: sprite width + sprite padding , frameHeight: sprite height + sprite padding }