Jump to content

roundPixels doesn't work?

Don Collins

Recommended Posts

Hello, folks. I'm hoping to use Pixi to make some games with pixelated retro-style graphics. I'm using a scaled DisplayObjectContainer to accomplish this, but I've run into the problem that, if sprites have a non-integer position (or their anchor doesn't fall exactly on a pixel boundary), they are accordingly drawn offset slightly from the scaled pixel boundaries and so overlap pixels in an ugly way.


This isn't acceptable for a retro aesthetic, of course, so I wanted a robust way to clamp positions to integer values. I hoped I would solve the problem by using the renderSession.roundPixels property (which promises "crisp pixel art" and seems intended for this purpose), but I found that it (1) doesn't seem to work at all on WebGL, and (2) works on canvas only when the offset is caused by the sprite's anchor rather than position.


Hopefully an example will illustrate what I mean: http://don.nfshost.com/roundPixels-bug-demo/ (I've also attached the source as a zip file.) It shows a WebGL renderer with a sprite displaced via anchor, a Canvas renderer with a sprite displaced via anchor, and a Canvas renderer with a sprite displaced via position. The second of these is the only one in which roundPixels appears to be doing its job.


Is this a bug, or am I just misusing roundPixels/misunderstanding what it's meant to accomplish? Thanks!


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...