skiffcz

Sprites of odd dimensions blurred when flipped

Recommended Posts

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.

 

post-5202-0-41251300-1384988474.png

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.