Pixel Art Blurry

Questions
#1

I’m using pixel art in my game: 16 x 16 tiles, 16 x 32 player, etc. Sometimes the player’s sprite is a little distorted (bent along the black outline, somewhat jittery when walking, some pixels seem to be bigger than others, etc.) It’s not terrible, but it’s not ideal. I’m not using any fancy camera tricks with zooming.

Do you have any recommendations as to how to make it look better? I’ve set the checkboxes in the Sprite section to “nearest” instead of “linear.” This sharped things up, but still distorts the images somewhat and also makes some pixels look bigger / bolder than others.

Ideal scenario (crisp even when moving):

g_--x--_s_x20151103135904_2
g_-_-x-_-_s_x20151103135904_2.jpg1280×853 164 KB

#2

Heya @Anthroyd

In the project settings (game settings? I’m not at my computer at the moment…same place you found the linear/nearest setting…) There is also a checkbox for “subpixels.” Uncheck that guy. It uses screen resolution. If you want pixel-perfect rendering in a non-native resolution you gotta disable subpixels.

1 Like
#3

Thanks. I unchecked it but unfortunately nothing much happened.

Here are two screenshots. The first is launch window size (960 x 640) and the second is maximized. I’m using the RenderCam extension with a fixed view area / aspect ratio, so when it resizes, it doesn’t stretch the graphics and adds black bars to keep aspect ratio consistent (4 : 3).

Capture

other

You can see the distortion in the second image’s black border. Some pixels look larger than others. As you move the character, the boldness of the pixels sorta changes. Any ideas?

#4

Yeesh. I see what you mean. That’s probably a rendercam thing, in that case. If you use the built-in camera and renderscript do you have the same issue? It seems to be biased towards the right side of the image.

@ross.grams have any idea what might be causing this?

My feeling is with the default camera/renderscript this probably wouldn’t be happening, but tbh, these days i never start a new project without immediately adding rendercam and defos, because they are essential (in my mind) so…i dunno? Sorry, mang.

2 Likes
#5

Oh, just to add, is this a straight-up sprite with the built-in sprite material, or are you doing something special with shaders?

#6

Basic sprite. No trickery going on. Thanks for trying to help @ryanscottlandry

1 Like
#7

I don’t know a lot, but I’d say this issue comes from rendercam, unfortunately (sorry, i love you, Rendercam!). I’ve never had any pixel-perfect problems with the default render script (though I’ve had tons of problems trying to fullscreen on “any” monitor without stretching, etc., which is why i use rendercam). Hopefully ross might have some insight for you on this one. Good luck with your game, in any case! Your insistence that it be pixel-perfect makes me want to play it, not even knowing what the game is :slight_smile:

3 Likes
#8

Have you checked this manual? https://defold.com/manuals/adapting-graphics-to-screen-size/#retro8-bit-graphics

1 Like
#9

Oh, you are using Rendercam, sorry, then the problem could be with that camera solution as well. You could try Defold-Orthographic as an alternative.

But stay by temporarily switching to the default render script and camera and verify that the basic solution works.

#10

Could it perhaps be due to the camera zooming slightly when maximized window size? I thought that would cause distortions unless it was like a 2x or 4x zoom, not some fraction like 1.23.

But then again, that’s how lots of games work. You can maximize and maintain aspect ratio using black bars. The sprites don’t normally distort.

#11

Yeah, it’s because RenderCam adjusts the zoom if you make the window larger or smaller. As you showed in your small screenshots, it’s displaying larger, but not exactly 2x larger, so some of the “pixels” have to be distorted since they don’t match your monitor pixels. The black bars maintain the aspect ratio of the viewport, so the overall image stays the same, but it won’t maintain the same scale so that your “pixels” match up 1-to-1 with your monitor pixels.

Unfortunately RenderCam doesn’t have an option for locking to integer zoom levels, and isn’t designed to let you manually override it easily either. If Defold-Orthographic supports that, then you should use it instead.

3 Likes
#12

It sounds like if only integer zooms should be used, then the game’s base screen dimensions should be extremely small, like 256 x 192 or something so that integer zooming a small amount is possible. Otherwise, if you start with a 960 x 640 screen size, just zooming one time would require a 1920 x 1280 screen size with no in-between, right?

2 Likes
#13

Yup…

A quick google search for “pixel art scaling game” came up with some interesting answers:


They mention the following options:

  1. Tolerate a tiny display with lots of extra space,
  2. Crop (or expand) the view area, or
  3. Make alternate assets for different resolutions.

You could also just live with the distortions of course.

This article is pretty good. They recommend 640x360 as a good resolution to work with.

6 Likes
#14

Thanks for the suggestions and resources, @ross.grams

#15

I found how to fix this (surprisingly enough)
All you need to do is to go to the game.project and change “Default Texture Mag Filter” (found in the graphics category) from linear to nearest :slight_smile:

#16

Yep, that does the trick! Perfect for that pixel perfect style!

#17

I know this is a bit late in this conversation but I noticed that the atlas added a default 2 pixel border extrude this could also be what happened

image
image1623×630 16.8 KB

switching border extrude to 0 fixes the issues
image
image1635×629 23.1 KB