Unity 2018.2 – 2D Pixel Perfect Camera

Intro

The general availability release of Unity 2018.2 (full release details here) includes a preview of the new 2D Pixel Perfect camera components/scripts.  Having recently spent some time manually adjusting camera settings for Neon Aileron, I thought I’d share some feedback on this new component.  Overall, this new component works great and will definitely save you a lot of time if you are working on a pixel art project.

Pixel Perfect Camera Setup Without The New Unity Package

Prior to release of the new 2D Pixel Perfect camera package, I had manually configured the camera to provide pixel perfect appearance.  I learned how to do this by reading (many times) this article by Paul Tham, published in 2015.  The article prescribes using the “Size” setting of the camera to ensure the project is rendering in a pixel perfect manner, which works great.  Note:  The camera “Projection” should also be set to “Orthographic” as the article details.  For the “Size” field, this can be calculated based on the below formula (please see article for a more in-depth discussion of why this formula is valid).

Vertical Resolution / (Desired Scale * Pixels Per Unit) * 0.5

Vertical Resolution – This is the vertical resolution of the players screen.  My monitor is 1920 x 1080, so my vertical resolution for this example will be 1080.  For coding, you can use Screen.height to retrieve this information.

Desired Scale – This is the scale that you will apply to your base resolution to give it the best fit.  Whole numbers should be used if you want to maintain pixel perfect.  For Neon Aileron, the base vertical resolution is 432px, which is the height of the background assets/images.  If I scale this by 2 (432 x 2 = 864), it will help fill my screen without exceeding my overall vertical screen resolution (1080).  If I scale by 3 (432 x 3 = 1296), the top and bottom part of the screen would get cut off.

Pixels Per Unit – This should match the Pixels Per Unit setting on your sprites.  For Neon Aileron, I have this set to 72.

“Clean” Layout With Orthographic Size Calculation

Here is what this looks with the numbers I mentioned above:

1080 / (2 * 72) * 0.5 = 3.75     Note that this number does not have to be a whole number to maintain pixel perfect, only the desired scale needs to be a whole number.

Note the empty space at the top and bottom of the screen.

HUD Closeup (x200%). Note all pixels appear cleanly. (Click to see full size)

“Stretch” Layout With Orthographic Size Calculation

Now let’s see what happens when we attempt to stretch our window to fit the whole screen.  To do this we will use a desired scale that is not a round number.  To get our “stretch” scale, we divide the vertical resolution (1080) by the base resolution (432), which gives us 2.5 as our desired scale.  We then use this to calculate our orthographic size.

1080 / (2.5 * 72) * 0.5 = 3

Here is what this looks like when we set the orthographic size to 3.  This stretches the game to fit the whole screen, however some pixels get positioned and/or stretched incorrectly.

When zoomed in, the issues with this approach become apparent. Many pixels appear out of place vertically and horizontally.

Pixel Perfect Camera Setup With The New Unity Package

Now that you’ve tolerated some math and viewed some examples of the “hard way” to create a pixel perfect camera, let’s move onto the easy way. With the 2D Pixel Perfect package we can simply add the Pixel Perfect Camera script to the main camera and adjust some settings to get similar effects to what we previously discussed.

If anyone would like more details on how to load the package and basic setup instructions, leave a comment and I can add some extra content.

“Clean” Layout With 2D Pixel Perfect Package

Here are the settings I use to get a clean, pixel perfect image:

Field Info

  • Assets Pixels Per Unit – This matches the PPU setting on my sprites.
  • Reference Resolution – This is the base resolution of my game (size of the base background).
  • Pixel Snapping – Enabled
  • Crop Frame – X and Y
  • Stretch Fill – Disabled

Here is what this looks like in the game:

This looks identical to our 3.75 ortho scale because it generally uses the same technique.

Note the similarly clean score HUD.

“Stretch” Layout With 2D Pixel Perfect Package

The 2D Pixel Perfect package also has a “stretch fill” option, which provides a better output than our previous “stretch” technique.  I believe this uses bilinear filtering to fill in the “gaps” where pixels may be missing or stretched.  This will not be truly pixel perfect, but fills the screen very nicely and looks clean when viewing the game at higher resolutions.

Here are some screenshots of how this looks in the game.

Looks very good; no noticeable pixel issues.

On closer inspection, you will notice some bilinear filtering around the objects.

Conclusion

The new 2D Pixel Perfect package is an excellent asset for creating pixel art games.  Both the “clean” and “stretch” options look very good when the game is in full-screen mode, so I plan to offer both options through the configuration/pause menu so the player can decide which looks best on their display.

Additional Reading/Viewing

This is the Unity forum thread that discusses additional details about how the package works:  https://forum.unity.com/threads/pixel-perfect-preview-package.533433/

Here is the package on GitHub, in case you have any issues importing it:  https://github.com/Unity-Technologies/2d-pixel-perfect

This video does an excellent job of showing why a 2D pixel perfect camera is needed:  https://www.youtube.com/watch?v=5WYvYZnGKKc

Errata

In the 2D Pixel Perfect screenshots, the ring around the score multiplier at the top isn’t centered properly.  It should be noted that was the result of a position/placement error, not an issue with the package.

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *