Tutorial: How to setup Unity3D for pixel-perfect low-resolution 2d art.

Disclaimer: I have no idea if I'm explaining something obvious, obscure or useful. It just took me so long to figure out all this stuff or look it all up, that I thought it'd be better if you only had to look in one place.

PART ONE

This is what we're gonna make. A 320 x 200 game in Unity3D. In other words, really low resolution pixel art, something Unity3D really doesn't want to do very easily.

The image has a 64 x 64 sprite, a pixel font, (kindly made by the good people of the Mother 3 Fan Translation), and everything is completely pixel-perfect. Pixel perfect means, that every pixel is the same size and sit perfectly next to each other and nothing is blurry. As in, any SNES or GBA game was pixel perfect.

From here on it's like a tutorial, but also sort of a reference guide.

1. Drag 'n drop your image into the 'Project' Tab. Here, use mine if you need something to use.





2. Set it up like this:

3. 'Pixels To Units' is set to 64, because in this scene, the size of this animation is a standard unit. I'll get back to that later.

4. Cut the image up in 'Sprite Editor'. Click 'Slice' in the top left corner, set 'Type' to 'Grid' and size to 64 x 64. Click 'Slice', then click 'Apply in the top right corner.

5. Drag the newly cut frames into the 'Hierarchy' tab and save it when Unity prompts you to.

6. In the 'Scene' tab, click the on the gizmo where it is yellow in my picture below and click on where it says 'Persp', so it says 'Back'.

7. Select the 'Main Camera' object in the 'Hierarchy' tab and make it like this in the inspector:

What 'Size' in the Camera component means

8. We're making a pretend-game that has a resolution of 320 x 200. This is where the 'Pixel To Unit' thing comes on, and the 'Size' box in the Camera component. 'Size' is "half the amount of units we can vertically see on screen". I.e., our vertical resolution is 200px, a unit is 64px, so 'Size' should be 200/64/2 = 1.5625.

9. There. Now the game is actually set up nicely to be a pixel-perfect 2d game.

Weird problems when getting sharp pixel art in a unity3d build

10. If we make a build (cmd + B on Mac... something else on windows), we'll get a Resolution Dialog Box. If we select 1280 x 800 and press play, the game will be perfectly Sharp and look like it has the intended resolution, even though it's actually 4x that.

11. But if we go into 'Edit' -> 'Project Settings' -> 'Player', and in the 'Resolution' tab, set the resolution to 320 x 200, and in the 'Standalone Player  Options' set 'Display Resolution Dialog' to 'Disabled', and make a build, we'll go from a sharp image like this...

to something horrific like this...

I have no idea why. So... don't do it...

12. Okay, that was it for Part One. In Part Two I explain how to get pixel perfect pixel-fonts.