How can i properly display 2D Pixel sprite's pixels without distortion while it's moving ? (in unity)

Question

Introduction to what i'm trying to do

Hi, I'm trying to make a 2D Pixel Platformer Game in Unity. Before that i used godot and for some reasons (not about the engine) i switched to unity. And in Unity there are things need to handle by myself, and they were handled by the engine in godot (i guess), because godot is more suitable and compatible with 2D Pixel games (i guess). So; i am not sure why the problem happens

The Problem

In the scene, my pixel sprite is playing his Idle animation (he's only breathing so you can think of that as head and the body moving 1px up and down repeatedly) While playing that simple animation, if my sprite is big enough on the screen, there is no problem and it looks pixel perfect animation is playing without distortion (or disruption idk what was the right word). But if the character looks smaller on the screen, i mean if i scale the character down or keep the scale same and make camera's angle of view bigger, so character looks smaller (not too small a regular platformer character size), What happens is character's eyes visibly goes thinner and thicker as the character plays his animation (head and the body moving 1px up and down repeatedly). Character's eye is 2 black pixels side by side thats it. While the animation playing it kinda distorts. Height changes.

Yes I fixed it somehow but..

I fixed it, but idk how and seems like a temporary fix AND i don't think that is how it's supposed to be fixed because we wrote code, I'm okay with writing code for fixing it but first i want to know what was the problem and how to fix it in editor. aaand it just seems weird to write code for simply having a properly functioning pixel sprite animation.

How did i fixed it ? just watched this video and added the same script to the camera i have no idea how it worked and why my animation problem was occuring at the first place.

What I'm asking for

Pleaaaase somebody explain all that to me, why is that happening what are the possible and proper fixes. i'm researching for days and i thought unity had a "big community a lot of tutorials too easy to learn"

TL;DR : when playing animation pixel sprite character's some pixels distorts

version: Unity 2019.3.3f1

I imported sprite the right way (Filter mode: Point(no filter) Compression: none, Pixels per unit: 16 (that option seems suspicious maybe the problem is about that pixels and units thingies)) I can provide more information about project or directly send you the whole project if you can't reproduce the error. I'm just too curious and want to learn how to have a proper 2D display setup and finally start the fun part coding mechanics etc. since a code about camera solved the issue the problem might be unity's camera settings because unity has no 2D special camera component while godot has Camera2D and Camera3D seperatly. These are just my guesses please teach me what you know.

Answer 1

I may be over exaggerated the problem and searched waay too deep answers before patiently trying out the easier solutions..

Whatever i wanted to tell how did i solved it (hopefully permamently right now everything looks ok, if i'm wrong; please correct me)

i added a "pixel perfect camera (experimental) component" to my camera set ppu to 16 res to 320x180 then set sprite's ppu to 32. Then made a background looks like that so i can see which pixels my character is on. And my character was standing between 2 pixels horizontally, i guess because he has 19 pixels horizontally ( but still.. doesnt make sense to me why cant he still be perfectly on top of 19 pixels we see on the background ? ) and vertically he was perfectly matching the pixels on the background because he has 34 pixels horizontally and 34 can be divided to 2. Soo are sprites has to have an even number of pixels to be shown perfectly on the screen ? What am i going to do if one of the frame animations i have to add +1 pixel vertically or horizontally, do i have to add 2 instead ? Hmmm.. I still have a lot of questions and still didn't understand the topic, but atleast found a simpler solution for now. That pixel perfect camera comp. made my Idle animation's eyes stable.

Answer 2

I've written a few texture loaders and 2D renderers in OpenGL using C++. One of the conventions that I've followed to make the renderer easier to manage was I typically had all my sprites to meet the requirements of their size in pixels being a multiple of (2^n)^2 meaning a texture image could only be in sizes of 8x8, 16x16, 32x32, 64x64, etc. I also allowed them to have transparencies.

Then I wrote a function to not only read in just a single sprite but to read in a sprite sheet where you can have multiple sprites in one texture image. You just had to supply to the function the (x,y) starting position of the current sprite index, and it's size by using a (glm::vec2) for height and width.

The file loader would only accept square images, but the sprites that were pulled out of the texture image could be any size within the limits of the size of that image. With transparencies enabled, this made it easy for the animation engine to pick which sprites to use at a given amount of time for a specific duration - interval. Everything worked seamlessly.

There are a few things to be aware of and they are borders around the images, off by one errors, and the other basics loading images such as compression, color scheme, reflecting the image horizontally, vertically or both, etc. I hope this might give you some insight.

Now when it comes to rendering these, because it appears to be a 2D application, you shouldn't have to worry about "perspective projection" since this is an 'orthographic projection' but it is something you should still be aware of when it comes to the rasterizing stage of converting you world coordinates to camera view to screen coordinates as this can produce skewing or stretching, or even objects being oriented in the wrong direction if you're not careful.