Struggling with graphics for a pixel art sprite

Questions
#1

Hello everyone,
I recently started to delve into Defold, and I am trying to learn the engine a bit.
Recently, I tried to import a spritesheet to implement a pixel art character with a basic Idle animation. Here is what it looks like :
Anna_Idle_test1

So I import the sprite sheet in the engine, make an animation from a tilesource, slap it on my player. This is where I start getting confused. It appeared blurry, but I knew it was because graphics settings were set on “Linear”, so I put it to “Nearest”. Now the sprite is fine, but when I start playing around with the size of the window, it, well, looks not very good :
image

I have the render method set on Fixed_fit_projection with near = -1 and far = 1, and the sprite is 80x80 pixels in size. What is the problem here ? the sprite’s size ? the render method ? The camera’s distance from the sprite ? How can I make it look correct ?

Thank you in advance for your answers !

#2

Ok, found the answer to my own question : I use a camera, and the orthographic zoom set to 1.7 didn’t please it one bit. So I will shift my question : what happens to make it go crazy when camera is set at 1.7 orthographic zoom ?

#3

The reason it looks weird with the zoom set to 1.7 is because that means that the nearest filtering will not produce pixels of equal size (as i*1.7 can round either up or down), so some pixels are larger than others, which is why one of her eyes looks smaller than the other. So if you use nearest pixels and and want equally sized pixels, your zoom must be a whole number, like 1, 2, 3, or 4.

Keep in mind that if you use fit or stretch projection, then the player resizing the window or using fullscreen will most likely not set the zoom to a whole number, so you would need to use fixed projection, and set the zoom depending on window size manually.

The only ways to use floating point numbers as zoom with equal pixel size is to write a custom render script, maybe even with custom shaders, or to use linear scaling and to deal with the blurriness in some other way.

Unfortunately Defold is focused on smooth drawn art, and for pixel art you have to work against the default renderer a bit to make it look fine scaled.

1 Like
#4

The upscaled low-res texture will by default be scaled to fill as much of the window as possible. It is possible to ensure that the upscaled texture will have a zoom that is set to an integer value. You can toggling scale snapping via the toggle_scale_snap message or explicity set snapping using the set_scale_snap message with snap set to true or false.

1 Like
#5

thank you for your answer ! I dug a little on internet and also found about this, I think I’m starting to understand how it works now !

#6

Ooooh, thank you very much, I’ll try that !

#7

Tried this, however for some reason it seems to have the worst behavior of all the things I have tried… I’m not sure why, I have set it to 640*360 to test, but it still deforms my sprites in strange ways. I have snap enabled, not sure what I am doing wrong here. My sprite also becomes incredibly blurry when traveling diagonally.