# To test out my 3x3 pixel grid anti-aliasing technique, let’s see if I can achieve a Shantae style sprite animation.
# Maybe something similar to Rottytops, except with Risky Boots?
# I’m not going to directly copy Rottytop’s pose. I’ll just take a little inspiration from it while doing something a little different.
# Also, I don’t want to directly copy Risky’s sprite. Let’s try reverse-engineering it, and then creating a new sprite from there.
# How do you reverse-engineer a sprite? Let’s try vaguely tracing over it with pencil, to get the general idea of the sprite, and then create a new sprite from that pencil sketch.
# From here I’ll just use my usual sprite tracing technique. Scale the image to double the intended size. Ink the lines using Paint tool Sai’s vector “curve” tool. Scale that image down by half. Use that as reference in Aseprite and trace over it with pixels.
# Now if I did this right, my new sprite should be the same height as the game’s original sprite.
# … Apparently it’s 2 pixels taller. Ah whatever. That’s close enough for this test.
# Let’s figure out how I want the sprite to look in the end. I’ll give this single image the full rendering treatment.
# Now to animate this sucker. I’ll start by animating the black and white lines first.
# Now I’ll triple the size and add frames with pixels moving between the grid lines.
# By the way, doing motion interpolation like this by hand is freakin’ tedious!
# Okay, that only took about 2 hours. Now to do it again in full color! I’ll start with the flat colors. It’s tempting to try scaling down this flat version to see how the anti-aliasing looks with the outlines, but screw that, let’s just go ALL THE WAY!
# Four… hours! It took 4 goddamn hours to do all this tweening by hand! Let’s hope the results are halfway decent.
# At triple size, the interpolated animation looks like this.
# Now let’s scale to down by 1/3 with bilinear scaling, and force it to use the same color palette.
#
Here is the animation at the sprite’s intended size. The results aren’t quite as nice as I had hoped. A few parts have some unnecessary blurring. Some highlights flicker in and out, and sometimes some grey pixels get used in the purple areas as an in-between shade.
# But let’s clean this up and see how good it can look.
#
Here is the finished sprite, looking as good as I can make it. I spent an hour and a half manually fixing every problem I could find.
#
Here is the Shantae game’s Rottytops animation to compare the quality. I still think this animation is way more clever.
#
And this is what Risky Boots originally looked like in the game. I think I actually managed to out-do this sprite! … But the effort it took was ridiculous!
#
Of course the later Shantae games became even better at it, so there is no shortage of inspiration!
# So what are my conclusions of this experiment?
# It partly works, but you still have to do a lot of manual clean-up afterwards to fix the things that it gets wrong.
# I probably could have just animated on a 2x2 grid instead of a 3x3 grid. With RockTheBull’s Rouge sprite I was able to scale it up afterwards to 6x6, and then down to 3x3, and then shrink it in half with bilinear anti-aliasing. Animating the in-between frames on a 2x2 grid would have taken a little less time.
# This process is NOT a time-saver! Just the opposite. It is the sprite-animation equivalent of doing long-division. You do eventually get useful results, but you’re basically brute-forcing it. And in the end you still end up doing a bunch of manual anti-aliasing and adjustments by hand to clean up the messy results.
# So you might as well just draw the animation directly at the native size and skip of all this scaling nonsense.
#
If I have trouble figuring out the anti-aliasing, my old pixel-counting technique might actually be the better approach, because I can make manual adjustments right away while I’m tracing out the low-resolution version of the sprite.
#
Incidentally, RockTheBull’s Rouge sprite is the same height as my Risky Sprite. It looks like I still have a ways to go before I can create boob-physics like this!