Rotate Pixel Art Without Blurring

From The Battle for Wesnoth Wiki

Rotate Pixel Art Without Blurring

Note: Although the author undoubtably had good intentions when writing this page, this method effectively ruins the palette of the rotated artwork by introducing semi-transparent artefacts (thereby increasing the color count of the palette several times over). There is no easy way to rotate pixel art without blurring, you can only get acceptable results by drawing the object in the rotated position from scratch. This page is currently pending either a rewrite or complete removal. -artisticdude

I've often seen people say that you shouldn't try to use the rotate function of graphics programs to rotate pixel art, because that results in blurriness. I suppose in some cases some programs can rotate images without blurring, but even with one that blurs, you can still do pretty clean rotations. Here's how:

Let's pretend I have this sword and a hand here that I wish to rotate about 30 degrees for an animation:


If I just go and use the rotate tool, I end up with a somewhat blurry mess (don't comment on how this one doesn't actually look all that messy):


How to go around this? Simple. I scale the sword up, rotate it and scale it back down, using pixel resize (the resize method which doesn't try to blur or anti-alias anything).

So, first I scale the sword up enough (I prefer to scale to 4x the original size):


Then, I apply the rotation tool normally. Since the image is higher resolution, the sword doesn't get blurred:


Then, I just scale the image back to the original size using pixel resize, and ta-da, we have a pretty well rotated sword:


It might need a little manual clean-up of a handful of pixels, but that's quick and easy to do, compared to actually redrawing the sword in a different angle. I myself have found this very useful and use it all the time when working on animations.

Note: Not every rotation angle results in a clean result, so you might have to try slight variations of the angle to find one which, when scaled back down, results in clean edges. Again, I've found this to be worth the minor trouble.

This page was last edited on 13 December 2011, at 23:48.