Software7

Personal Developer Notebook

Pixel Perfect 2D Graphic with Unity and CINEMA 4D

When creating a 2D Game the goal is to render the background and sprites pixel perfect.

To achieve this here are some instructions for Unity and CINEMA 4D:

  • switch the main camera in Unity to ‘orthographic’ projection
  • the size of the camera should be set to half of the height of the target resolution, e.g. 320 for a Retina iPhone
  • create a plane in CINEMA 4D and set width and height to the pixel size of your sprite
  • set the number of horizontal and vertical segments of the plane to 1
  • set the orientation of the plane to +Z
  • convert the plane into a polygonal object
  • switch to BP UV edit layout
  • select ‘Use UV Polygon Edit mode’
  • click the UV command buttons ‘Mirror V’ and ‘Mirror U’ (then you don’t need to rotate the plane in Unity)
  • save the C4D file into the asset folder of Unity
  • then switch to Unity
  • select the mesh
  • in the inspector set the scale factor from 0.01 to 1 and press ‘Apply’
  • create a material, e.g. with an unlit shader, and add your image to this material
  • width and height of the image have to be a power of 2 (not necessarily square)
  • select the image
  • change the wrap mode to ‘Clamp’
  • change the filter mode to ‘Point’
  • change the format to an uncompressed format, e.g. ‘Truecolor’
  • in game view select the appropriate target resolution, e.g. 960×640
  • make a screenshot of the game view and open the screenshot in Photoshop and zoom in: should be pixel perfect

Here is an example:

This 16×16 image can be used as a test (left: original size; right:800% zoomed in):

PixPerfTest   PixPerfTest128

After applying the steps above it looks like (left:original: right: zoomed in):

PixPerfRendered   PixPerfRenderedBig

This is a perfect result! 🙂

Some remarks:

  • for performance reasons, to reduce draw calls, it makes a lot of sense to collect all the sprites and put them into one big image, a texture atlas
  • the texture atlas needs to have a power of 2 height and width
  • but the sprites on the atlas can have completely arbitrary sizes

There are third party tools for Unity that are making the process of atlas generation much more efficient and easier. The tool I use is named Sprite Manger 2 from Above and Beyond Software, take a look here: http://www.anbsoft.com/middleware/sm2/.