A Pixel Perfect Camera for 2D Games in Unity.
This is an early work in progress. Please report any issues you find. Also, feel free to contribute fixes or additions.
Unity is a great engine, but it isn't perfect for 2D games that use pixel art. This can become evident when you try to rotate sprites or move sprites. Rotating sprites often results in perfectly diagonal edges that leave the pixel grid. Moving sprites can have a similar problem where pixels don't line up as expected. Check out the GIFs below in the Demo section to see examples with and without PixelCamera2D.
The setup used in PixelCamera2D
uses two camera's, a quad, and a render texture to display your game. The first camera renders an image to a render texture which is sized according to the Base Width
and Base Height
values. The second camera renders its child quad whose texture is the render texture mentioned above. This child quad is resized and scaled account to the screen width and height.
This method makes pixel art games more consistant by removing perfectly straight diagonal lines and providing better scaling and letterboxing options.
Copy the PixelCamera2D
folder into your Assets
folder.
- Drag the
PixelCamera2D
prefab from thePixelCamera2D/Prefabs
folder into your scene. This prefab contains the pixel camera, render camera, and rendered quad. - Set the Camera component's
Size
value if necessary. - Set the
Base Width
andBase Height
to a value that your pixel art was designed for. This is used to determine how many pixels wide and high your game should be. This is used when determining best fit and scaling sizes. - Click the
Create RenderTexture Asset
button and choose a location to save the new render texture. This is created using the givenBase Width
andBase Height
, so anytime those change you should use this button. If you have an existing render texture that is the correct size from another scene, you can simply drop that into the camera'sBase Texture
value in the inspector.
- Base Height: The height of your game view.
- Base Width: The width of your game view.
- Behaviour: The type of view scaling behaviour to use. There are two options currently.
- Best Pixel Perfect Fit: Scales your view by pixel perfect increments like 1x, 2x, 3x, etc. This ensures equal pixel sizes. For example for a base size of 200x200, view size will be fixed to sizes like 200x200, 400x400, etc depending on screen size.
- Scale To Fit: Scales the view to fill the screen as much as possible while maintaining aspect ratio. This fills most of the screen, but may results in some rendering artifacts because of uneven pixel sizes.
- Quad: The quad the camera will render to. This shouldn't have to be changed.
- To change your letterbox color just change the background color on the
PixelCamera2DRenderer
object.
This project contains a demo in the PixelCamera2DDemo
folder. This includes an example of static sprites, moving sprites, and a line renderer to show how each behaves. It also includes a button in play mode to enable and disable PixelCamera2D
so that you can compare what your game would like with or without it.
Notice the differently sized pixels and smooth diagonal edges on the sprites and line.
The pixels are now of equal size and the diagonal lines have been pixelated.