Pixel Perfect in Unity

Artefacts-and-other-issues

This week has been a adventure in Pixel Graphic Minutia behavior in Unity. I made some animations for the protagonist for our game, and wanted to test them out in Unity, to make sure everything was appearing and behaving as expected. This is when I saw it; the visual bug.

There are clear black lines of pixels showing up in certain frames of the animation. What makes it worse, is that it is inconsistent in that it doesn’t always appear on the same frames. In addition, the pixel outlines of the sprite itself sometimes gain thickness in certain frames. This is especially visible on the engine behind the sub.

 

Up and down animation sub
There were no artifacts visible in the PNG of the spritemap, and the line thickness of the black outline is mostly consistent in the frames

What gives?

This thing became an obsession, since it was making every animation put into unity look amateurish and dirty. What was causing it? I started troubleshooting, thinking that both of these symptoms were the same issue.

Searching online for keywords like “Unity, black, pixels, animation, frame, artifacts, outline, thickness” in different combinations.

Since the the outline was inconsistently bad, I tested these theories

  • The sprite moving over the background was to blame
  • The lighting we used was causing some issues
  • The sprite location on the z axis compared to other objects was causing it
  • The “object” of the player had a bigger hitbox/rigidbody than the animatio

None of them proved to be the problem. I eventually figured out the outline issue is a bug in Unity, and made a workaround;

Outer Frame Sprites

The “slice” tool for sprite sheets in unity was randomly picking up stray pixels from the image above or below the frame of the animation. This was not a mistake on my part; all the sprite frame borders were clean. My sollution was to increase the distance between the frames in the sprite sheet by 1 pixel each (resulting in a 2 pixel increase between frames). This would become a lot of wasted data in a bigger game, but the workaround is functional for the scope of the project.

Protagonist-sub-boost-fixed

Sprite line thickness

This problem was bigger in scope.

Here’s a simple way to put it: Imagine you are Playing a game like The Witness. You are looking at a painting on the wall in-game. If you stand close to it, the “Puzzle Tile” will take up X am amount of pixels on the screen. The “Puzzle Tile” has dimensions of 840×420, but where you stand it only takes up 420×210 pixels on-screen. This seems self-explanatory, but it was hard to understand in a 2d world where the camera is orthographic. It applies to Unity orthographic camera as well.

Gif-of-camera-thing

Why does that matter?

In Unity you can decide where the camera is supposed to be, and define it’s position on the Z Axis. This will effect how big your sprites and assets will appear on-screen, and isn’t that visibly distinct unless you’re making pixel art. When using pixel sprites every pixel counts, and if the camera is a certain distance away from the screen it will not display correctly. What happens is that that your display will try to “fill out” the gaps where pixels should or shouldn’t exist, causing inconsistent animations and “pulled” pixels. To properly display pixel art, you need to calculate how many pixels should be in one “unity Unit” based on the Orthographic camera position and the vertical display resolution. My equation was simply;

Pixels per Unit= Vertical screen resolution / (2 * Orthographic camera position)

or

1080 / 10 = 108

Which means that my “pixels per Unit” for every art asset put into unity should be 108 to be properly displayed at 100% resolution compared to camera placement.

After putting in the fix, I got this result:

Sollution-to-artefacts
Lower image is before fix, and is still having pixel-bugs in the frame, while upper image has the fix applied with no visual bugs in the outer frames or increasing line thickness in the animation.

-Benjamin Thomas Harbakk

 

EDIT: Here’s my Comment for this week’s assignment

Advertisements

5 thoughts on “Pixel Perfect in Unity

  1. Hey Ben!
    I hope my comment shows now 😀
    Thank you very much for this blog entry. Not only do you present what you have done this week, but you also talk about what issues you have had and how you solved them. Great! Pixel Art is definitely not appreciated enough in my opinion, and after reading your entry I feel even more so.

    Your blog entry is well written and coherent, making it easy for the reader to follow along.To support this, structuring the post like you have done it, going from what you have worked on to what issues you had and finally to how you solved them was a fantastic choice. Furthermore, I appreciate that you went the extra mile to visually explain the phenomenon of sprite line thickness and its influence in approaching pixel art. This also ensures that people without much knowledge about the subject have an easier time following your process and to understand the problems you have faced. In my opinion, the entry ends a bit too abrupt. I would have loved to maybe see a short conclusion of everything you have mentioned above, how much the difficulties influenced or even delayed your project or in general just some smoother ending. Nevertheless, I admire your passion and obsession for what you do, which will always end up in great results.

    As I have already written on Ellens’ blog, the pixel art style absolutely seems to fit both of you and I am really excited to see how this project will shape out.
    Keep up the good work!
    -Alex Sinn

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s