Pixel Art Distortion in game window

Community Showcases
1

Hey everyone,

I’m hoping someone has some experience with this. I’ve done a good amount of research online and there seems to be a lot of confusion regarding the topic.
I’m trying to build a game with pixel art. For a while now I’ve been having some issues in which the sprites can get distorted based on certain settings. These include the GAME window resolution and some canvas settings. I’ll try to be a through and detailed as possible. If something is unclear I’ll be happy to clarify as best as I can https://100001.onl/ https://1921681254.mx/.

Canvas settings for the following images are seen on Canvas_Settings_1.png. The settings I’m messing with in particular are in the Canvas Scaler. The UI Scale Mode is set to Scale With Screen Size.

Note in Ex_1.png some pixels have been distorted causing the sword to look jagged and gross. This is an image on the GAME window zoomed in all the way. Ex_2.png is the same sword sprite but zoomed out all the way in the GAME window. Once again the image is jagged and the overall shape is distorted.

I thought I found a solution when I changed the settings on the canvas as seen on Canvas_Settings_2.png. In the Canvas SCaler settings, I changed the UI Scale Mode to Constant Pixel Size

2

this is a common occurrence, it happens when the sprite is alligned inbetween pixels, such that unity has no way to display the sprite correctly since there is no such thing as half pixels. When there is a pixel that is inbetween 2 pixels unity will either decide to display that pixel on both, neither or either, this will inevitably lead to distortion.

How to fix:

  1. the game window is too small on your screen and will never give you a correct representation of your pixel art as if you were playing the game in full screen. ( not enough pixel space)

  2. look into pixel perfect methods, you will have to take a lot of measures to achieve this, it will only work for certain “zoom” distances, and there will be other restrictions, such as camera and object movement

here is what is happening to you:

2 Likes
3

This is the best explanation of this I have seen on this forum. This question gets asked over and over again, but people still don’t seem to understand why it happens.

4

IMHO give credit where credit is due.

That Super Mario sprite is from that (should I say) classic Stack Overflow answer by DMGregory (animation was created by him too):
https://stackoverflow.com/questions/35785291/getting-giggly-effect-when-slowly-moving-a-sprite

5

@eses I didn’t realize he pulled it from stack overflow. Was not my intention to give undue credit. Perhaps I got a bit carried away in my previous post. In any case, I think it helps explain the issue well.

6

@spryx

Yep… I didn’t either mean to make it sound like the answer wasn’t OK.

But even when using some arbitrary image that one might not consider to be art, IMHO (as 3D generalist/artist myself) it is reasonable to mention the source - creating art usually requires skill and time (just like creating code) - valuable time of the person that created the work.

7

@eses I don’t mean to overblow this but you are taking intellectual property to the extreme,

  1. the creator of this image posted the image in a public forum with the intention of facilitating the education of others
  2. in his post he does not ask for his art not to be displayed in other sites
  3. I did not claim ownership of the image
  4. I posted the image in the exact same context as he intended ( for educational purposes on a public forum)
  5. I did not try to use the art commercially, nor do I stand do gain anything from this use
  6. this one is the most irrelevant but I googled for this image, though even if I had found it through stack overflow I would not bother to add info about its source due to all the reasons specified above ( I can see that this rubs you the wrong way from the above post, but I am a pixel artist myself and minutia like this is overzealous at best )