AuthorTopic: Earthworm Jim's "Animotion" Technique  (Read 18035 times)

Offline Rakukojin

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Earthworm Jim's "Animotion" Technique

on: March 06, 2012, 12:43:24 am
I've gathered lots of research on how the sprites were made for Earthworm Jim and although it's very simple, I cannot reproduce a similar result. Earthworm Jim was created with a technique they dubbed "Animotion", which is simply hand-drawing each frame of animation, scanning it and cleaning it up.


Source: Wormjim.ru

This technique was adapted from the earlier "Digicel" technique used in the Genesis/Mega Drive version of Aladdin to give it more of a cartoon feel than the SNES version.

Genesis/Mega Drive (Source: Spriter's Resource)


SNES/Super Famicom (Source: Spriter's Resource)


Shiny Entertainment, the creators of Earthworm Jim, produced a short promotional video for the game and how they went about creating the animations.

http://www.youtube.com/embed/zaiZva_-X9M

From this promotional video, you can see that they used a pencil and paper to draw the images, recorded them with a camera and edited the sprites with Deluxe Paint Animation. Their technique is also outlined in the out-of-print book "Behind the Scenes at Sega: The Making of a Video Game", which EWJ animation director Mike Dietz has uploaded to his blog here.


(Source: The Slappy Picture Show)

In a 2010 interview with Sega-16, Mike Dietz shed some more light about how they created the animations, stating:

Quote from: Mike Dietz
Second, Dave and I, and later Andy Astor, developed a system for compressing the animation data that allowed us to fit many more frames of animation on the cartridges than most games, and also allowed us to easily stretch the characters into much larger shapes on screen than was normally allowed by conventional game engines at the time. Initially this system required an excruciatingly time consuming process of manually indexing multiple sprites per character per frame using graph paper. I handled this at first and had an amazingly complex matrix of graph paper drawings of sprites pasted all over the walls of my office. After finishing the first couple of games using this manual method we brought in Andy Astor, the biggest brained genius I ever met, and he wrote software to automate the process.
(Source: Sega-16)

----------

So my question is, how does one draw an image on paper for the purpose of being scanned and rescaled properly? Let me explain a little bit more, here the actual hand-drawn [cropped] image of the EWJ character Psycrow:


Source: Rocket Worm

Now here is the same image scaled down to the size of the actual sprite with no editing:
(Scaled 600%)

And here is the final sprite from the game:
(Scaled 600%)
(Source: Spriter's Resource)

As you can see, the resized image is a good representation of what the final image will look like, minus the require cleanup.

----------

My problem is that whenever I try to follow all the same steps, but I can't seem to get any good result when trying to resize smaller than 64px. I lose detail in my lines if my picture is drawn with just pencil or ink, but I get a very distorted image if my picture is colored in with Copic markers. Is there a step that I am missing or would it just be that my skills might just be lacking?

I can pixel right from the bat (I love to btw), but I always get a result like the SNES Aladdin when I'm aiming for something like the Genesis version. Any advice would be helpful.

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #1 on: March 06, 2012, 12:46:49 am
Isn't this very similar to rotoscoping? I imagine you might have similar results if you have a tablet and just doodle the same way but with the pen tool.

Are you painting over the lineart before you shrink it down? I imagine this is a very important step as it simplifies the image into colors which will be retained when shrunken down.

Offline Rakukojin

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #2 on: March 06, 2012, 12:57:51 am
What I've been doing with line art is trying to draw thicker lines before I scan the image. After I scan it, I index the color so that there's only 2 colors, black and white, but when I resize it the lines always get broken up. I tried to paint over it before, but when I went to resize it, areas like the face and chest usually become a bunch of chunky pixels.

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #3 on: March 06, 2012, 01:30:15 am
In this case, nearest neighbor interpolation is probably NOT what you want. It may be useful for making the mask of the sprite -- determining which parts are opaque -- and otherwise, bilinear or cubic scaling is more appropriate.

It's also necessary to work out the palette ahead of time, so that you can quantize the scaled-down result to it.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #4 on: March 06, 2012, 01:40:03 am
What I've been doing with line art is trying to draw thicker lines before I scan the image. After I scan it, I index the color so that there's only 2 colors, black and white, but when I resize it the lines always get broken up. I tried to paint over it before, but when I went to resize it, areas like the face and chest usually become a bunch of chunky pixels.
Thicker lines are only going to steal space that you won't have once you shrink it down. The point of shrinking it down isn't to end up with lines you can actually use, but to give you a nice base reference to draw over.

Also, this technique might not be usable for anything much smaller than 64x64.
« Last Edit: March 06, 2012, 01:42:06 am by Dusty »

Offline HughSpectrum

  • 0010
  • *
  • Posts: 283
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #5 on: March 06, 2012, 01:44:03 am
Quote
It's also necessary to work out the palette ahead of time, so that you can quantize the scaled-down result to it.
Makes sense.  The conversion to 16 colors is probably done during the large print version, where they have colored it before scaling it down.

Offline Rakukojin

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #6 on: March 06, 2012, 02:44:38 am
Thicker lines are only going to steal space that you won't have once you shrink it down. The point of shrinking it down isn't to end up with lines you can actually use, but to give you a nice base reference to draw over.

Also, this technique might not be usable for anything much smaller than 64x64.
I was always afraid that my thin lines would disappear when it got rescaled.

And I've always thought too that resizing a hand-drawn piece of artwork was for the purpose of a base to draw over, but it seems like EWJ's artwork scaled down is still very usable.

Here is a drawing of Jim:


And here's the same image scaled down to 46x46, the same size as the game sprite, with no editing:
vs.

I'm perplexed as to why the image scales down so nicely to a very small size. You can even make out the details on his head very easily. It looks like all you would need to do is fix some of the lines, erase stray pixels and add some shading rather than redraw the entire image on top of it.

I've tried to downsize a picture with about 8 or 16 colors, but I could never get anything this nice.

Offline BladeJunker

  • 0001
  • *
  • Posts: 84
  • Karma: +0/-0
  • Know your limits, then break them.
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #7 on: March 06, 2012, 06:31:24 am
Quote
I've tried to downsize a picture with about 8 or 16 colors, but I could never get anything this nice.

How bad are your results since you're so dissatisfied, may we see your tests? A closer look at whats going wrong for you would help narrow down the problem more than remarking at how great it worked for Shiny. :)

Offline Rakukojin

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #8 on: March 06, 2012, 08:07:42 am
Okay, here is a sample picture of a character that went over many revisions in order to simplify the shapes and design as much as possible without losing the overall feel. The color choice was just to test out how it would scale. Excuse the part of the foot that was accidentally cut out.



Now here is the image scaled down to 64px in height using nearest neighbor interpolation and indexed to 16 colors.


The result is a distorted mess although it does still retain its shape somewhat so it is possible to redraw it completely. The problem is that I kept having to simplify the original design over and over to the point of where it almost loses it's original identity.

So I'm wondering if I am putting too much detail still into a small area (like the face)? Do I have to draw the character smaller on paper before scanning? Or do I just have to specifically make characters that will easily shrink down in size from the start?

Sorry if I'm asking too much, I just recently played a few games with amazing sprites like Earthworm Jim and Maui Mallard in Cold Shadow and I can't help but wonder how they were able to create such great pixel art by starting off with pencil and paper.

Offline 9_6

  • 0010
  • *
  • Posts: 416
  • Karma: +0/-0
    • View Profile

Re: Earthworm Jim's "Animotion" Technique

Reply #9 on: March 06, 2012, 09:07:31 am


The first thing I tried was upping the contrast, getting rid of the white highlights on the red and magic wanding the background to a different color and that helped with not losing the image in the background color.
I also noticed a double outline around psycrow with the outside black and the inside colored so I tried that and pretty much went ballistic on my second go.
Scaled down that kind of thing apparently creates sel-out which is preferable over a broken outline.

White highlights seem to add noise when scaled down. Be careful with those.
Apparently you will not be getting away without extended adjustments on pixel level either way.
Does scaling an image blur it?
Opera fix Firefox fix