Pixel Perfect Rotation

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:

rotated

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

but what I’m getting is this:

qwJcJ

See the following for more context:

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/lowrezjam-template: Defold template project for LOWREZJAM
DEMO: LOWREZJAM 1.0

4 Likes

@britzl Thanks so much.

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.