Can't crop spritesheet properly

[sirmarcelot]

Hello

 

I've been trying to try out Phaser, but I have a really frustating problem. I've tried more than once, so I dont undestand what's going on.

I've been trying to use the Spritesheet functionality, so I've used:

this.game.load.spritesheet('locke', 'assets/gfx/locke-big.png', 32, 48, 10 , 0, 0);

To load both versions of the attached image. However, when moving around, the animations seems to always corrupt the border of some sprites. This does not make sense to me. In the horizontal version, I've used a 320x48 image. Well, if it's a sprite sheet with 10 images of 32x48, shouldn't that work alright? 

 

These are the animations I've added:

this.player.animations.add('left', [0, 1, 2], 10, true);this.player.animations.add('right', [3, 4, 5], 10, true);this.player.animations.add('jump-left', [6], 10, false);this.player.animations.add('jump-right', [7], 10, false);this.player.smoothed = false;this.game.smoothed = false;

Can anyone give me a hint? How do you guys manage and draw your sprites? Which tools you use to edit the PNG files?

 

Thanks

 

[lewster32]

The issue here is that you simply need to leave a little bit of padding between your sprites. Because often times your sprites' pixels will not fit exactly 1:1 on the pixels of your canvas you end up with these fractional pixels causing some of the adjacent frames will leak through, unless you provide a small gap - usually 2 pixels - between each of your sprites. Also, if you're using webGL you'll want to use a power-of-two sized image as your base, in your case 512x64, to ensure it works correctly.

[sirmarcelot]

Hmm, I see, will try that. Thanks! This padding you suggest, for instance, 2 pixels, is what I should then use as spacing when loading the sheet? Or do I need to actually increase my sprite size..?

 

But then this is an issue with the sprite loading, isn't it? I'm not using any special scaling, I've just wanted it to read the sprites from the sheet, and at least from reading the documentation, this wouldn't be expected (i.e. reading a 32x48 sprite with 0 gap should produce... the same 32x48 sprites if you slice the PNG, right? =) ). This should be documented...

 

Regards!

[lewster32]

You actually need to increase the sprite size; physically alter your sprite sheet to add gaps between frames. The problem is that even though you're not scaling, if you move your sprite via velocity, tweens or any other non-integer means, or if your sprite anchor settings causes the sprite's position to not neatly line up with the pixels, the sprite will spend most of its time somewhere between pixels. It's this scenario where the problem will rear its head, and partial pixels from outside of the frame will tend to bleed into your current frame.

 

This isn't well documented mainly because it's expected behaviour, and almost all spritesheet/atlas assembly tools have the option to pad, and sensible defaults usually in place, i.e. 2 pixels.

[sirmarcelot]

I included 2 pixels between images as you said (thus making it 338x48) but I did not increase the actual sprite size, and used: 

this.game.load.spritesheet('locke', 'assets/gfx/locke-big.png', 32, 48, 10 , 0, 2);

Which so far seems to work alright.

Thanks!

[lewster32]

I'd expand the image canvas to 512x64 just to keep webGL happy. You need not put anything in the empty space, it just means that  webGL will be able to use the image as a texture (whose dimensions need to be a power of two in both directions)