Sprite artifacting when moved with Velocity

[semk]

So I'm seeing some sprite artifacting when I move it with velocity:

 

 

On the left is the sprite when I move it with something like:

var speed = 4;char.x += speed;

On the right is the sprite when I move it with something like:

char.body.velocity.x = 150;

and you can see two issues:

   1 - general "blurring" of the whole sprite

   2 - some pixels ending up on the opposite side of the sprite 

 

 

What I think is happening - 

 

It looks like with velocity, since it's tied to a 

if (key.isDown)

function, it can land on decimal number like x = 25.56 depending on when the player let go of the key,

and the sprite then arranges itself into the world on X coordinate 25.56, 

it looks like this causes the x/y of the sprite itself to be "messed up".

 

Any one encounter this and is there a fix other than adding/subtracting whole numbers from the x/y of the character?

[Tom Atom]

Hi,

 

 - images can be blurred if coordinates are not whole numbers,

 - not clear, whether you have sprite atlas, but if images in atlas are close to each other, then WebGL/OpenGL can sometimes take part of neighbouring image (again rounding). Solution is apply padding with 1 free row/column between atlas frames or duplicating first and last row and column of image in atlas (this. is way I do it). Check what sprite is in your atlas on the left of image with artifact - probably some similar pose - so, probably it is not opposite side of current sprite, but reminder of previous.

[proyb2]

If I think that's bitmap roll over issue, file a bug at github and see what they say.

 

To get whole number, you could use javascript Math round, floor, etc on coordination..

[semk]

thanks for the help guys, I'm going to try Tom Atom's suggestion first before I submit any kind of issue. I find it strange that no one else would have encountered this so it must be something on my end, I actually don't have any padding on my sprite sheet so here's hoping that fixes the issue! 

 

Edit -

 

So adding padding fixed my pixel issue and setting char.x,char,y to whole numbers on update also fixed my blur! 

[Tilde]

I have a couple spritesheets where the frame is inexplicably shifted over a pixel no matter what I do. So I'm there with you on this one.