skiffcz Posted November 20, 2013 Share Posted November 20, 2013 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? Quote Link to comment Share on other sites More sharing options...
xerver Posted November 21, 2013 Share Posted November 21, 2013 Are you sure that the items are at integer positions, at floting point positions items will be interpolated between two pixels on canvas. Quote Link to comment Share on other sites More sharing options...
rich Posted November 21, 2013 Share Posted November 21, 2013 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. Quote Link to comment Share on other sites More sharing options...
skiffcz Posted November 21, 2013 Author Share Posted November 21, 2013 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 103pxanchor point of (.5,.5) produces (42.5,51.5) -> image is blurred when flippedsetting the anchor point manually to whole pixels like (0,0) or say (43/85,52/103) -> image is sharp when flipped Quote Link to comment Share on other sites More sharing options...
rich Posted November 21, 2013 Share Posted November 21, 2013 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.