Problem with load.spritesheet and dimensions

Phaser 3
1

Hi,
I have problem with dimensions of loaded spritesheet. Please take a look at live example:
http://to.phpworkstation.com/

Knight animation is corrupted :expressionless: You can see blinking area on the left corner, sword on the first frame is also corrupted. Image size is 68x17 (with 4 frames so each frame is 17x17):

this.load.spritesheet('knight', '/knight.png', { frameWidth: 17, frameHeight: 17 });

Image URL: http://to.phpworkstation.com/knight.png

Player has corrupted animation too - please go into the water and swim right - you will se some green blinking on left side :frowning:

this.load.spritesheet('player', '/player-male.png', { frameWidth: 10, frameHeight: 20 });

Image URL: http://to.phpworkstation.com/player-male.png

What am I doing wrong?

2

:wave:

You may want to try padding the spritesheet frames.

3

Thanks for your reply. Watch my “video” showing 3 problems: knight bonus pixel in animaton, player corrupted animation when swimming right, strange lines after go out the water:

http://to.phpworkstation.com/phaser.mp4(image larger than 4 MB)

:slight_smile:

4

Hi,
The problem comes from your assets, a spritesheet or atlas always have a few transparent pixels between each frame.
I resized your character’s spritesheet to 72x20 and added 1 pixel transparency in each side(artists usually add more transparency), so change this line:
this.load.spritesheet('player', '/player-male.png', { frameWidth: 12, frameHeight: 20 });
character

5

Thank you very much - that was it!

Graphic is created by my 10 years old son :slight_smile: I’ve created game in kaboomjs but performance is poor :confused: if you wanna play: http://game.phpworkstation.com :wink: