Pixel Perfect Rotation

[p9alisand]

This is a bit difficult to put into words.

When rotating pixel art sprites, I’ve noticed the sprites’ pixels do not remain in alignment. That is, they are “overly smooth” and break the illusion of pixel art:

A better example; what I’m looking for is something like this:

but what I’m getting is this:

See the following for more context:

• Pixel perfection in 2D game projects | Lea Hayes
• Unity Pixel Perfect Rotation - Game Development Stack Exchange
• Pixel Art Rotation - A tool for your pixel art games - Community Showcases - Unity Discussions

How can I achieve the desired effect?

[britzl]

@p9alisand

How can I achieve the desired effect?

The solution is to render the game to a render target (off screen buffer) in 1:1 pixel resolution and then draw this buffer upscaled to desired pixel size. This is handled automatically in this template project:

SOURCE: GitHub - britzl/template-lowres: Defold template project for lowres/pixel-art games.
DEMO: LOWREZJAM 1.0

[p9alisand]

@britzl Thanks so much.

[p9alisand]

I’ve used the template to get the effect I wanted. However, now I’m seeing black boxes on the edges of the window. How can I fill the whole window?

BTW, I’m building off of the War Battles tutorial.