Pixel Perfect

For beginners, sprites that are made with pixel art can be a headache: they appear blurry or jagged. It can be corrected easily using simple steps.

Look at the first example below, the sprite is blured.

It can adjusted in the Import Settings of any image. By default, the image is imported with Bilinear as Filter Mode. Change it to Point (no filter) and the blurry go away.

But, now, the sprite is jagged. The pixels are wrong, some parts have two pixels instead of one.

Once the game is using a Camera with Ortographic projection, the Size property need to be adjusted to a value that will show the sprite correctly.

This is done using a simple formula:

(screen height / 2) / spritesize

So, you get the height of the screen (in this example, the resolution used is 468×351) and divide by 2: 351 / 2 = 175,5, then divide it by the size of the sprite in pixels. So, if you sprites are 32×32 pixels, divide by 32. In our example, the sprite is 48×48, so the final value is 3,65.

Then the value is applied in the Size property of the Cam and now the sprite is perfect.

This can be archieved by code, to get the pixel perfect value when the screen size changes:

 

//Set the camera size to archieve perfect pixel size
public void SetPerfectPixel(Camera cam, int spriteSize){

    //The ortographic cam size to archieve perfect pixel exibition
    //is calculated bellow. The sprite size is the pixel size of the sprite
    //(in this project: 48)

    float pixelPerfectZoom = ((Screen.height * 0.5f)) / spriteSize ;

    cam.orthographicSize = pixelPerfectZoom; }

 

Another quick tip: multiply by 0.5 instead of dividing by 2. Multiplication is faster than division.

But the sprite now is too small! Well, use bigger sprites in your game. Or you can play with the values and find your own. Dividing the result above again by two: 1.82

About the Author: Dark Elf

Leave A Reply

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