How to rotate pixel art without blurring

[zookeeper]

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. Do note that 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.

[Jetrel]

Intriguing...

I shall have to try this out, later.

[Woodwizzle]

Very clever, and very simple. Suprising I've not heard of this before, seems like it would be a well know technique, certainly deserves to be. It may be helpful to after scaling up the image, to reduce the pallete to only the colors already uses (especially if you are using team color) since it might be possible for additional colors to be created when scaling down.

[Iris]

I wonder if it's possible to apply the same technique to EGA color images.

[Jetrel]

It may be helpful to after scaling up the image, to reduce the pallete to only the colors already uses (especially if you are using team color) since it might be possible for additional colors to be created when scaling down.

No, because...

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).

... makes that problem expressly impossible.

[Sgt. Groovy]

Have you compared this to rotation without interpolation?

[zookeeper]

Intriguing...

I shall have to try this out, later.

I find it intriguing if you haven't come across this before. I didn't really think I was really inventing anything especially new.

Have you compared this to rotation without interpolation?

Nope. I don't have any programs that can do that. I think GIMP might have been able to do (or maybe it was some other program) it if you set some semi-global interpolation options correctly, but I'm not sure. I think the result would be almost identical, but I wouldn't really know.

[allefant]

Well, here's what GIMP does if you rotate and set "interpolation" to "none".

[sparr]

for very slight rotation, up to maybe 10 degrees, you can consider using a shear/skew. beyond a few degrees you end up with stretching problems.

[Sgt. Groovy]

Here's a comparison of the different methods. First row is 10 and second 45 degrees. From left to right: the scaling method, rotation without interpolation, rotation with linear, and rotation with cubic interpolation.

[Redeth]

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:

It's a good method. Or you can be a lazy bum like Redeth and simply sharpen the object that is going to be rotated before and after the rotating process takes place. It won't look the same, but with some cleaning up it will do, because a little blurriness is desirable when viewing a moving object. Leave the TColored pixels out of it, though.

[Darth Fool]

Personally, I like the following method: Never make an object at exactly 90 degree rotations. First, it is a little unlikely and generally looks odd. So, what to do instead, make all straight objects at ~30 degrees. Then, through reflection and rotations of 90 degrees, you get 8 different rotations (instead of the 4 you get if you put the object at 90 degrees or 45 deg)

[Woodwizzle]

My bad, I thought that I only read to use pixel scaling on the way up, not back down.

[irrevenant]

Really handy tute! Any chance of adding it to the wiki?

I was going to do it, but I wasn't sure how to import the graphics...

[Jetrel]

Really handy tute! Any chance of adding it to the wiki?

I was going to do it, but I wasn't sure how to import the graphics...

Graphics can't be stored on the wiki, they have to be linked from somewhere. Like this forum.

Look at some of the other tutorials for good examples, and thanks for doing it.