9
\$\begingroup\$

I'm right now in front of a huge "Game Design" question. I'm making a pixel-art-ish game and using bilinear interpolation could solve lots of animation-issues. On the other hand, its not a "pixel-game" anymore.

If I use Bilinear Interpolation the animation works but it looks "hybrid-ish" and the artstyle gets lost. Either I mess up my animations or I mess up the artstyle. I cant have both it seems.

Is there any other way to solve this?

enter image description here

\$\endgroup\$
  • 4
    \$\begingroup\$ That's your game, you decide :) \$\endgroup\$ – Alexandre Vaillancourt Dec 31 '16 at 0:12
  • \$\begingroup\$ Is "mono-linear" interpolation (usually just called "linear interpolation") an option? \$\endgroup\$ – Philipp Dec 31 '16 at 13:05
  • 1
    \$\begingroup\$ I reworded the question to make it sound less opinion-based. \$\endgroup\$ – Philipp Dec 31 '16 at 13:30
  • \$\begingroup\$ wait .. .what? i dont need to approve this ? :D \$\endgroup\$ – OC_RaizW Dec 31 '16 at 14:16
  • 1
    \$\begingroup\$ There's also the possibility of rotation by shearing, which moves the input pixels around without duplicating/eliding/blending them. \$\endgroup\$ – DMGregory Sep 2 at 17:42
13
\$\begingroup\$

Automatic rotation of pixel art by other angles than 90° usually goes wrong. If you want to maintain the pixel-art aesthetics you usually won't get around redrawing your art in each angle.

If you use a faux-retro look where your sprites are actually in a far higher resolution than they look, you can sometimes get away with upscaling them by an integer factor without interpolation in your graphic editor and then rotating them in linear interpolation at runtime. To avoid your sprites from getting blurred while in original orientation, always ensure that the drawing position is rounded to the nearest integer (some graphic engines/frameworks/libraries allow you to draw sprites on floating-point coordinates which often results in blurring). But that's usually still just a lazy substitute which doesn't reach the quality you can reach with manual work.

Here is an example of a sprite in the original size, upscaled by factor 3 without interpolation and then rotated by 30° with linear interpolation:

enter image description here

\$\endgroup\$
  • 1
    \$\begingroup\$ Essentially each "pixel" becomes 10x10 pixels or something like that? \$\endgroup\$ – John Dec 31 '16 at 13:36
  • 2
    \$\begingroup\$ @John yes, that's what I mean with faux-retro. 10x10 might be a bit large (depending on the resolution of the hardware platform you are targeting, of course), but that's basically the idea. You have a sprite which looks like a 16x32 pixel-art piece but is actually a 48x96 texture with each "visible" pixel actually being 3x3 pixels of the same color. \$\endgroup\$ – Philipp Dec 31 '16 at 13:49
  • \$\begingroup\$ thaaat was about the same i was thinking.... \$\endgroup\$ – OC_RaizW Dec 31 '16 at 14:17
  • \$\begingroup\$ the same approach was in Starbound, when "visible" pixels were actually squares of 3x3 real pixels \$\endgroup\$ – trollingchar Sep 2 at 17:06
13
\$\begingroup\$

Have a look at RotSprite.

RotSprite is a scaling and rotation algorithm for sprites developed by Xenowhirl. It produces far fewer artifacts than nearest-neighbor rotation algorithms, and like EPX, it does not introduce new colors into the image (unlike most interpolation systems).

Example of RotSprite

The algorithm first scales the image to 8 times its original size with a modified Scale2× algorithm which treats similar (rather than identical) pixels as matches. It then calculates what rotation offset to use by favoring sampled points which are not boundary pixels. Next, the rotated image is created with a nearest-neighbor scaling and rotation algorithm that simultaneously shrinks the big image back to its original size and rotates the image. Finally, overlooked single-pixel details are restored if the corresponding pixel in the source image is different and the destination pixel has three identical neighbors.

You can either implement this algorithm yourself as part of your game's drawing code, or use it to create rotated assets beforehand. The pixel art tool Aseprite has integrated RotSprite as part of it's sprite editor.

GIF of rotsprite in action

Also, have a look at this Unity forums thread on how to use RotSprite in Unity, as well as more general information about RotSprite.

\$\endgroup\$
  • \$\begingroup\$ jeez. i downloaded that for unity and tested it - and it outcome is far worse than the usual unity pixel-rendering.. But thanks \$\endgroup\$ – OC_RaizW Jan 6 '17 at 10:27
  • \$\begingroup\$ @OC_RaizW That shouldn't happen. You might want to contact the developer of the Unity asset. \$\endgroup\$ – Rudey Jan 6 '17 at 20:03
-3
\$\begingroup\$

top left of page is a option: auto-select: group & layer. choose layer option then rotate. thats the way no one tells you.

\$\endgroup\$
  • 3
    \$\begingroup\$ Which image editor are you talking about? The question doesn't mention any specific tool. So if you know an image editor where rotating a low resolution sprite with minimal quality loss is in fact so easy, please tell us to which one these instructions apply. \$\endgroup\$ – Philipp Sep 2 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.