0
\$\begingroup\$

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://imgur.com/a/xJ95Qbj

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://imgur.com/Rzi5i7Z

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

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:

enter image description here

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

\$\endgroup\$
  • \$\begingroup\$ I suspected it was something like this, but the 'turn' being the base I was using to go off of and coincidentally fitting perfectly made me confused. Thank you! \$\endgroup\$ – B.Batiege Sep 7 '18 at 13:25
  • \$\begingroup\$ I had a quick follow up question: do you know how I can reliably fix this issue? \$\endgroup\$ – B.Batiege Sep 7 '18 at 18:09
  • \$\begingroup\$ Use a paint program such as gimp ( gimp.org/downloads ), photoshop, or mspaint, and move the sprites to be inside the grid cells. \$\endgroup\$ – Stephane Hockenhull Sep 7 '18 at 18:35
0
\$\begingroup\$

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 } 
\$\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.