Do you remember the Pythagorean theorem from high school? No worries if you don’t… We also did not think we’d ever use THAT again. Let’s dive in!
Why are we talking about high school trigonometry?
Project Ghost is a multiplayer horror game focusing on lighting and shadows. In this progress update, we will dive into our journey in refactoring our game from 2D to 3D in Unity
The problem
First, our switch to 3D led to a “giggly” effect on our assets when moving around a level.
Second, our assets were looking stretched and wonky. We set out to figure out why.
The cause
Simply put, Unity’s camera moves along a grid. If your assets are not perfectly aligned with this grid, you will get rendering issues like the “giggly” effect. In our research to understand this phenomenon, we found a Stack Overflow article with visual aids to illustrate what was happening to the pixels. At this point, we knew that we would need to refactor our assets to align with our grid. More on this later.
Furthermore, we found out that the stretching of the pixels was caused by the 45° angle of our camera. This viewing angle distorted the perfect squares of the pixels into triangular shapes. Therefore, achieving pixel-perfect for our camera would not be as simple as snapping our assets onto a grid. This is where trigonometry will come to our aid.
The Pythagorean theorem told us that the camera should compensate for its viewing angle so that the pixels appeared perfectly square. In math terms, we needed to solve for the hypotenuse. This will be our magic number.
The fix
You might be asking yourself, “these fine folks are not the first ones to make a pixel-art game; I’m sure Unity has an easy solution for this….” You are not wrong. Unity has a pixel-perfect camera component. Huzzah! ╰(°▽°)╯
However, this component is only compatible with Unity’s 2D renderer, and as you know, our game uses a 3D renderer. Frankly, we did not know where to go from here. Therefore, we sought help from fellow indie game developer Elliot Colp (@FinalNanner) to find a solution. Please go check out his incredible work on Tumble Rush.
With his help, we determined that our pixel grid was actually 1/32 by 1/32. This is entirely project-dependent and is determined by the pixel resolution of your assets. As you may have guessed, our pixel resolution is 32 pixels by 32 pixels.
If we were viewing the level at a perfect 90° angle, we would simply have to set our camera’s snapping for the X and Z axis to 1/32 increments (0.03125). Remember that our Y axis is locked because we are only displaying a 2D plane of our game. However, our grid has to compensate for the camera angle by solving for the hypotenuse, which we will call z. Z is the vertical axis in the 2D render of our game, as shown below.
Based on the formula, the solution to find our magic number is:
In this case, our magic number is 0.04419411. We set the camera’s snapping grid to x = 0.03125 and z = 0.04419411. This means that the camera moves by increments of 0.03125 pixels on the x-axis and 0.04419411 pixels on the z-axis. Again, this is due to the camera being at a 45° angle and the resulting distortion of the pixels on the z-axis.
The result
After all this work involving theorems and hippos 🦛, we finally achieved pixel-perfect! Check it out below, and let us know what you think!
Subscribe
You can sign up to receive updates and special announcements directly into your inbox every month! By signing up, you will also be registered to be a playtester for our upcoming community playtests!