How to fix blurry pixel sprites

  • Hey all, (hopefully) a simple question here. The 16-bit sprite I'm using looks really blurry during run-time; according to one of Ashley's posts I found, this is because I put the hotspot in between two pixels, so it isn't rendering properly. However, I can't find a single place to put it that doesn't make it blurry! What am I doing wrong?

  • Have you tried enabling 'pixel rounding' in project properties? (new to r59)

    If you set an object's position between two pixels (e.g. X = 2.5), most browsers display it with linear filtering, to make it actually look like it's half way between two pixels. However, for fine pixel art, that can make it look blurry. Pixel rounding always forces the draw position to be rounded to an integer which should fix the problem.

    Setting an object between pixels is more common than you might think: all the behaviors do it. For a lot of games, it makes the motion look really nice and smooth, but it doesn't suit pixel games.

  • Yeah, but that doesn't seem to be working either... I'd post a .capx, but there's literally nothing in the project but this one single sprite. <img src="smileys/smiley36.gif" border="0" align="middle" />

  • I think you should, maybe you did something different! I have tested pixel sprites and they work just fine here, no blurring.

  • *sigh* Got it working. No idea how, but it's working. <img src="smileys/smiley5.gif" border="0" align="middle" />

    Thanks for the responses and sorry for wasting your time, I guess!

  • Aaaand I changed the size of the sprite and it started being blurry again. Here's the cap:

    db.tt/61FvHuSV

    Complete with auto mirror issues. My first foray into C2 is off to a lovely start, as you can see.

  • Doesn't look at all blurry to me here. What browser are you using, and can you post a screenshot of it looking blurry?

    To get auto-mirror working properly, center the origin. Edit the sprite, click the image points tool, and hit 5 on the num pad.

  • I'm using Firefox 6.0.2. Here's a screenshot of it in run-time, with an in-editor comparison. It's definitely not as blurry as the first time the problem happened, but it's still very noticeable.

    dl.dropbox.com/u/19702035/C2help.png

    And thanks, auto-mirror works fine now.

  • Doesn't look at all blurry for me in Firefox 7. I'm a little confused by your picture. The editor is zoomed in but the comparison to the sprite at runtime is the same size - it should be smaller if displayed at 100% scale. Are you doing some scaling at runtime...?

  • I zoomed in a little bit just so they'd be the same size, but it's still blurry at 100% scale. Here's another at 100%:

    dl.dropbox.com/u/19702035/C2help2.png

  • I'm having a similar problem. I am using dt in my movements, so the sprite movement is very imprecise. If I use Pixel Rounding, the positions of the sprites bounce back and forth since they are moving with relation to dt (not a nice whole number usually). I can't think of a way to make the sprites not blurry and without rounding. Any tips? Even in designing sprites, perhaps?

    dl.dropbox.com/u/45336737/GentleShip/index.html

  • Is pixel rounding on in that demo you posted? It's not easy to tell, and I can't see any blurring, so I assume so. It seems to play just fine as well. It's helpful to provide your .capx so we don't have to guess your settings.

  • I was not using Pixel Rounding in the first link. Here's the link to the project. Thank You so much!

    dl.dropbox.com/u/45336737/GentleShipProj/GentleShip0.1.capx

    The blurring isn't fatal by any means, but if I can prevent it that'd be great.

  • If I turn on pixel rounding, it seems to work just fine. Crisp graphics and nothing "bouncing" like you say. Am I looking in the wrong place?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I'm sure you're looking at the right place. Basically with pixel rounding, since it's always moving forward, if it gets in a spot where the x is actually between pixels it will move a pixel ahead or back even if the controls aren't touched since the speed isn't exactly 1 pixel per tick. Pixel rounding is doing exactly what it's supposed to do, and the fact that you're not noticing might mean it's pretty trivial, and no one else will notice either :P . As far as I know there's no way to prevent this besides redesigning how the level moves.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)