[ Trouble Shooting ] #001 - Unity 2D Game Visuals (Non-Retro Style)
What will be covered in this trouble shooting guide?
– Issues regarding Jitter of Camera Movement
– Issues regarding Tile Palette Sprites Jitter
– Issues regarding Standalone Sprites Wave
– Squeezing too many pixels into screen space
Disclaimer: this guide is unique to the issues I was experiencing over three weeks and may not be the problem you are dealing with.
First, ICONIC is not meant to be a Retro/8-Bit/Pixel style game, it is meant to be a modern smooth, minimalist game. However, portions of the game’s style can benefit from the Unity Pixel Perfect Camera Unit specifically in regards to the walls, and even to some extent the standalone icons in the middle of the scene.
Modern Non-Pixel 2D:
Notice that even at angles, there is no squares, the edge looks smooth to the eye. This tutorial will work for this style game.
First let's identify the problem(s).
Click on any of the orange titles to see a GIF of the problem! You will want to focus your attention within the GIF on the area indicated by the red circle.
Problem Solving Process & Delays
Week 1: I was told I had camera Movement Jitter & Player Movement Jitter. I worked on the camera and player, and here are the two scripts I ended up with.
Note: My code is far from perfect I am still learning quiet a bit, for instance the 2.0f in the Update method on player controller should be a float variable at the top of the script, such as playerBaseRotation. Name your variables based on what makes them easily recognizable for you or someone else later!
Also! During the writing of this tutorial, player controller movement input is in void Update, while the actual application of force line of code was moved to void FixedUpdate. You can achieve this through using bools and if statements to activate function.
Additionally my camera still seems to have an update precision issue every 15 frames or so despite having interpolation on the 2DRigidbody. Still struggling to fix this: Frame Rate Hitching!
Week 2: was told I had camera Movement Jitter & Player Movement Jitter (Again), however, if I turned off the Unity Pixel Perfect Camera Component then on the camera the jitter stopped. So I started looking at Pixel Perfect as the problem, unfortunately I wasn’t getting too much help here. I spent a lot of time reading documentation this week.
I also couldn’t just leave Pixel Perfect off because I needed it for the wall problem, partially.
I was lucky to have Lecks, Cloud-Yo, and Katharsy on Discord to help keep me sane and try to troubleshoot during this week. You can find them on my discord here: Wild Origin Discord
Week 3: I had been researching the problem extensively based on people’s feedback and was unable to really make progress. It was at this time that I was able to get into contact with yuanxing_cai from Unity to get help by sending over my project. This is where progress started to be made.
Now Let's (Potentially) Solve Your Problem.
Problem #1 - Pixel Waving
The problem/visual result here has to potential problems
1. It could be the max resolution of your images
2. It could be the camera size settings.
As you can see on the left, the max resolution setting helps reduce the number of pixels down from 128×128 to 64×64 and the image doesn’t look damaged as it is dividing equally by 2!
you can see however with the 2048 setting it isn’t limiting the max size and pixels are not falling evenly between pixels on the screen in the camera view making one side of the border look fatter and the other sides skinner.
With the Camera size issue you have the same effect as density of the image (number of pixels in the image) far exceeds number of pixels of the screen regardless of the PPU settings. The only time this works is when all pixels divide evenly by 2/4/8/16, etc.
Problem #2 - Tile Palette Jitter
Tile Palette Jitter, this problem stems from a similar problem that affects 3D models regarding edge data, or edge bleed. Here is an article regarding Pixel Bleed: https://www.realitymod.com/forum/showthread.php?t=90244
Now in Unity you can have the same problem occur with 2D sprites as 3D models. I had this problem a couple years back when working with vegetation. In which the bottom pixel of my grass texture was causing lines at the top of the image rendered in scene. The result was thousands of lines floating in the scene right above some flowers.
Ref Image 1: As you can see in reference image one, I have left a small alpha gap in my image of just a few pixels.
Ref Image 2: Here the red line goes all the way to the bottom edge of the image.
Ref Image 3: Shows the different on Left and Right of the results, notice flowers with the red line below also show the same red line at the top.
Solving the Wall:
The approach/strategy/mechanic here is the same as the flower. You will notice below my sprites that are stand alone have an alpha transparency, which allow for some softening of the image of the edge of the visible graphic.
If the image is all the way to the edge of the tile, then it will cut off the softening or pixel bleed caused by moving between pixels in game view, and will create a very visible Jitter.
It is important to note this image has an alpha border, which prevents a hard cut off from occuring when edges fall between pixels.
This will produce a very pronounced and obvious “Jitter” as it is a very harsh edge with no alpha to mitigate or soften.
This is ideal for your tile! You want to make sure you only have an alpha border of same width for tiles edges that won’t be placed against other tiles!
With the alpha border in your tiles it will help greatly reduce the issue of harsh cutoff creating the “dancing” or jittering movement that your eye detects when the scene moves. Make sure you don’t provide an alpha border on the side where two tiles meet, otherwise you will have gaps in your tile set!
Only edges that face empty space should have the alpha border, I used a 3 pixel alpha gap for my scene.
Problem #3 - Jitter of Camera Movement
This was solved by yuanxing_cai, in which there had to be a modification made to the PixelPerfectCamera.cs inside of the Library/Package Cache. Once moving it from that location to the Packages folder, I was instructed to comment out line 218 & 223.
This helped mitigate the jitter caused by the pixel perfect, and allowed me to focus in on problem 1 and 2!
yuanxing_cai’s post is here!
A lot of things can go wrong when it comes to movement of both the player, camera, and the scene itself on the screen. So if you have one of these issue be prepared to work on this for a while if you are unlucky.
I hope this helps the next person who runs into one of these three problems, and it saves them considerable time! Last but not least I want to once again thank Yuanxing_cai, Lecks, Katharsy, and Cloud-Yo! For their help in this process. I likely wouldn’t have been able to narrow down the problem and identify/solve the wall jitter if it weren’t for them!
– Cody Rauh, Game Developer @ Optimistic Games