Problem with load.spritesheet and dimensions

I have problem with dimensions of loaded spritesheet. Please take a look at live example:

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:

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:

What am I doing wrong?


You may want to try padding the spritesheet frames.

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:


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 });

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: :wink: