Sprites of odd dimensions blurred when flipped

[skiffcz]

Im using phaser (1.0.6) for my game, but I suspect this to be so low level so Im putting it here. I have a spritesheet of three frames. The zebras looking to the left are unchanged and simply rendered, those looking to the right are flipped using scale.x = -1. What happens is pretty much what the topic say. The first row shows the behaviour of the system for textures with odd dimensions, the second one is for even sized textures. I render using pixi canvas renderer.

 

 

Anyone can reproduce this, or knows a better workaround that simply creating all your pix with even dimensions?

[xerver]

Are you sure that the items are at integer positions, at floting point positions items will be interpolated between two pixels on canvas.

[rich]

That was my first thought too, but Pixi rounds all positional values automatically before rendering so this should never happen. However: are you using Canvas or WebGL? (try forcing one specifically) - this might be a mipmapping style issue.

[skiffcz]

Im using canvas renderer.

 

All zebras are positioned at (int,int) coordinates. But you made me thinking with the floating point interpolation. In the original example, the anchor for the zebras is set to (0.5,0.5) (so the sprite is flipped around its center). If I leave the anchor in the (0,0) of the sprite, this blur indeed does not appear, no matter the size or shape.

 

It seems to me, that when the anchor point (in the dimension you are flipping) is not integer, PIXI (or phaser) rounds this anchor to whole pixels, but this shifts the whole sprite half a pixel, thus causing canvas renderer to interpolate the sprite.

 

I was able to confirm it through this simple experiment:

my sprite is 85 x 103px

anchor point of (.5,.5) produces (42.5,51.5) -> image is blurred when flipped

setting the anchor point manually to whole pixels like (0,0) or say (43/85,52/103) -> image is sharp when flipped

[rich]

Try this, in PixiPatch.js edit the renderDisplayObject function to:

				this.context.drawImage(					displayObject.texture.baseTexture.source, 					displayObject.texture.frame.x,					displayObject.texture.frame.y,					displayObject.texture.frame.width,					displayObject.texture.frame.height,					Math.floor((displayObject.anchor.x) * -displayObject.texture.frame.width), 					Math.floor((displayObject.anchor.y) * -displayObject.texture.frame.height),					displayObject.texture.frame.width,					displayObject.texture.frame.height);

See what happens. You may need to rebuild the phaser.js file via grunt if you use that in your game before you'll see the change of course.