Difference between revisions of "Rotate Pixel Art Without Blurring"

From The Battle for Wesnoth Wiki
(new image references pointing at the wesnoth website)
Line 4: Line 4:
 
Let's pretend I have this sword and a hand here that I wish to rotate about 30 degrees for an animation:
 
Let's pretend I have this sword and a hand here that I wish to rotate about 30 degrees for an animation:
  
http://exong.net/wesnoth-attach/files/sword_739.png
+
http://www.wesnoth.org/wiki-images/tutorial/groovy-rotate/sword.png
  
 
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):
 
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):
  
http://exong.net/wesnoth-attach/files/sword_standard_rotation_206.png
+
http://www.wesnoth.org/wiki-images/tutorial/groovy-rotate/sword_standard_rotation.png
  
 
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).
 
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).
Line 14: Line 14:
 
So, first I scale the sword up enough (I prefer to scale to 4x the original size):
 
So, first I scale the sword up enough (I prefer to scale to 4x the original size):
  
http://exong.net/wesnoth-attach/files/sword_4x_147.png
+
http://www.wesnoth.org/wiki-images/tutorial/groovy-rotate/sword_4x.png
  
 
Then, I apply the rotation tool normally. Since the image is higher resolution, the sword doesn't get blurred:
 
Then, I apply the rotation tool normally. Since the image is higher resolution, the sword doesn't get blurred:
  
http://exong.net/wesnoth-attach/files/sword_4x_standard_rotation_436.png
+
http://www.wesnoth.org/wiki-images/tutorial/groovy-rotate/sword_4x_standard_rotation.png
  
 
Then, I just scale the image back to the original size using pixel resize, and ta-da, we have a pretty well rotated sword:
 
Then, I just scale the image back to the original size using pixel resize, and ta-da, we have a pretty well rotated sword:
  
http://exong.net/wesnoth-attach/files/sword_rotated_138.png
+
http://www.wesnoth.org/wiki-images/tutorial/groovy-rotate/sword_rotated.png
  
 
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.  
 
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.  

Revision as of 11:22, 6 May 2009

Rotate Pixel Art Without Blurring

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:

sword.png

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

sword_standard_rotation.png

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

sword_4x.png

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

sword_4x_standard_rotation.png

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

sword_rotated.png

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.