My overall conclusions are that you should draw sprite outlines by hand (but you can trace). You can optionally add anti-aliasing to the outline by hand as well. Then you can add shading using Photoshop at double size (nearest neighbor) and then afterwards shrink that back down using bilinear scaling. At the end you could adjust a few pixels here and there by hand if needed, but in this case I didn't even need to!

How does this compare to the actual Shantae games?

I think the difference comes down to art skill more than technical methods at this point. For one thing I forgot to draw her hair bangs. But the original sprite also has me beat with additional details, and those details do look sharper. But I'm pretty satisfied with what I managed to achieve.

Unlike my previous anti-aliasing experiments which blur the entire picture with bilinear scaling, this approach only really blurs the shading, because the double-size pixels of the outline end up scaling back down as-is. I consider this a successful result.

Now let's see if I can turn this into a Gameboy Advance sprite.

Before jumping into animation, I started with a bunch of tests to figure out what I wanted and how it could be done.

My "reverse engineering" technique was kind of improvised on the spot. But it worked surprisingly well! It's cool that it successfully preserved the original proportions and level of detail.

In hindsight, using actual tracing paper probably would have made the animation easier, but I wanted to do this as cheaply as possible. It was just an experiment.

... compared to the dances in the original game.

So here's my new Shantae dance...

Alright, let's shrink it in half and trace over it in Aseprite.

Ooh! This animation is gonna come out *nice!*

This old version of [Pencil2D](https://www.pencil2d.org/) is slightly janky, but I think I can make this work.

Now that I have my keyframes, let's scale these down to double the size of the gameboy sprite, and digitally add some in-between frames. Maybe my Linux software store has something I can use?

I'll make the arch of her back follow along this curve so that she snakes upward.

A sprite animation? ... from paper sketches?? [It's more likely than you think.](https://humbird0.com/makes/pictures/shantae_dance1/readme/strafefox_making_of_aladdin_cel_animation_in_video_games.mp4) ([YouTube](https://www.youtube.com/watch?v=kOnUITJqRQQ)) And in this case WayForward already did the hard work of figuring out how to simplify the details, so I just need to reverse-engineer their sprite into a sketch of equivalent simplicity and proportions.

With this new super-power, I will once again chase my dream of achieving Shantae-quality sprite animations.

I got a new toy! This lightbox should let me play around with some traditional animation on paper.

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!*

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.

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.

Of course the later Shantae games became even better at it, so there is no shortage of inspiration!

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!

Here is the Shantae game's Rottytops animation to compare the quality. I still think this animation is way more clever.

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

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.

Four... hours! It took 4 goddamn hours to do all this tweening by hand! Let's hope the results are halfway decent.

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!*

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!

Now to animate this sucker. I'll start by animating the black and white lines first.

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

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.

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.

It's not perfect. The white rim around her boobs keeps flickering, the edge of her wing turns into a blurry mess, and there is some anti-aliasing on the outside. But this does seem to achieve mostly good anti-aliasing. All it needs is a little clean-up here and there. But doing that is much easier than animating anti-aliasing completely from scratch.

I guess the next thing to do is try to create a new Shantae animation, and see if I can make it look as good as the game.

This looks very promising! Here's a comparison.

Now let's try forcing this to use the original color palette, which will reduce some of the blurring. Any pixels that are only slightly blurred, will be snapped to an existing color, which will tend to match their surroundings.

I can remedy that by pasting the original images on top to clean up those particular frames.

Hmm... for some reason all of the frames look slightly blurry. I guess his DIAN motion interpolation didn't leave the original frames alone.

This resulted in an animation on a 2x2 grid, which is not ideal, but let's try converting this into a 3x3 grid. I'll multiply the size by 3x to make each pixel take up 6x6. Then shrink down by half to turn them into 3x3 pixels.

Now... if I shrink this down by 1/3 using bilinear scaling, every pixel will 'favor' a side.

I think this would be more useful, because when I go to clean things up I would still see the shapes and lines. They won't be turning into confusing blobs.

But that's just a theory. I need to test this to find out if it can actually work. It would be kind of a pain to create an entire animation just to test something that might not even work. Fortunately RockTheBull already made an animation kind of like this.

He was experimenting with DIAN motion interpolation which resulted in a double-size sprite with the 'pixels' moving in between the grid.

That won't look very good. I want lines, not fat blobs. So I need a better hint about which 'side' to favor. So what if I force it to have a 'bias' by animating on a 3x3 grid and then shrink down by 1/3? That would make it impossible for a moving pixel to be exactly between grid positions. Every pixel would have to slightly favor one side or the other. In theory it would probably look something like this.

Hmm... maybe if I animate the sprite at 2x or 3x size, and then scale it down with billinear blurring to generate the anti-aliased pixels?

The problem with using a 2x2 grid is that it would create these ambiguous blobs when pixels move between the grid.

Sure I do have one technique. But the Shantae games seem to animate in much more clever ways. How do you create a boob-bounce like RottyTops has?