Pixelation
General => General Discussion => Topic started by: Rakukojin 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.
(http://www.ljplus.ru/img4/l/o/look1982/HowAnimotionWorks.gif)
Source: Wormjim.ru (http://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 (http://www.spriters-resource.com/genesis/alladin/sheet/15383))
(http://img32.imageshack.us/img32/3412/gdaladdin.png)
SNES/Super Famicom (Source: Spriter's Resource (http://www.spriters-resource.com/snes/aladdin/sheet/32))
(http://img32.imageshack.us/img32/5287/snesaladdin.png)
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 (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 (http://slappypictures.blogspot.com/2010/03/making-of-earthworm-jim.html).
(http://2.bp.blogspot.com/_5_6DN8_IUSE/S6CVmK5XngI/AAAAAAAAAZU/-sfqeVUebhs/)
(Source: The Slappy Picture Show (http://slappypictures.blogspot.com/2010/03/making-of-earthworm-jim.html))
In a 2010 interview with Sega-16, Mike Dietz shed some more light about how they created the animations, stating:
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 (http://www.sega-16.com/2010/03/interview-mike-dietz/))
----------
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:
(http://img252.imageshack.us/img252/5601/psycrowcel.png)
Source: Rocket Worm (http://rocketworm.com/concept-art.html)
Now here is the same image scaled down to the size of the actual sprite with no editing:
(http://img545.imageshack.us/img545/1148/psycrowscaled.png) (http://img51.imageshack.us/img51/182/psycrowscaled6x.png) (Scaled 600%)
And here is the final sprite from the game:
(http://img837.imageshack.us/img837/1795/psycrowsprite.png) (http://img7.imageshack.us/img7/2941/psycrowsprite6x.png) (Scaled 600%)
(Source: Spriter's Resource (http://www.spriters-resource.com/snes/earthworm/sheet/4130))
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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:
(http://img27.imageshack.us/img27/9265/jimcel.png)
And here's the same image scaled down to 46x46, the same size as the game sprite, with no editing:
(http://img214.imageshack.us/img214/6207/jimscaled.png) vs. (http://img221.imageshack.us/img221/4863/jimsprite.png)
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.
-
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. :)
-
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.
(https://lh3.googleusercontent.com/--Q98zdNG2KA/T1W86OjVG0I/AAAAAAAAAL0/ub8Il-kE5CA/s355/red.png)
Now here is the image scaled down to 64px in height using nearest neighbor interpolation and indexed to 16 colors.
(https://lh6.googleusercontent.com/-MkYrU3t3cMA/T1XA20mFJgI/AAAAAAAAAMQ/rZAiqe6qu5M/s64/red-scaled.png) (https://lh5.googleusercontent.com/-3JEnKhuz9Ao/T1XBQUHGymI/AAAAAAAAAMY/aQbg57R_W_w/s384/red-scaled-6x.png)
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.
-
(http://i42.tinypic.com/1zb6qyu.png)
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.
-
I would try and reduce the palette first, then maybe try resizing with RotSprite? A lot of your problems may just be design problems, and you may need to try enlarging or simplifying important areas. But still, your distorted mess wouldn't be impossible to sprite over, especially with the larger version as a reference.
-
You may want to process your picture with a 'Minimum' filter, so that the black outlines get fattened. Then the reduction is more likely to keep those edges as full pixels.
-
I think I might have gotten it...
Study the actual .gif of the transformation. Notice on the 2nd and 3rd frames they digital paint over the line art (which is NOT colored before being scanned in) with a palette that's limited and very clean. If you resample the colored digital art, you'll get a result very similar to the first frame of the .gif where the sprite is small and there is no outline. They draw an outline after they resample, rather than attempt to fix broken details.
-
Amazing, hugh! I've always been a huge fan of EarthWorm Jim's artwork but I never went to the lengths of research you did here, I thank you very much for the work you put to this.
Now all that is left is for us to figure out how they went about making their setpieces into tiles =O
Something that might've made the character's face glitch out so much is how similar your whites are to your skincolors. Look at Jim's very pink skintone, that would never be confused with the white of his eyes, the mouth is pretty far from the eyes and usually includes some strong skintone outlines and black areas beside the white teeth to distinguish it furhter. Pre-planning this sort of color matching would be great, and even if you plan to use black outlines in the final product I think colored outlines like those of Jim's would still be beneficial, as any antialiasing that came from resizing (use of rotsprite mentioned below sounds like a good idea) could serve as base for your cleanups.
You might want to tweak the specific alignment of your character's face features since they all seem to converge on the same area and it just doesnt seem like the sprite form can ever communicate all the detail you have
Can you please update on how your process went? I'm curious about what process you finally chose.
-
Am I confused, or are you under the impression that they invented some magical technique to turn drawings into perfect looking pixel art? What they most likely are talking about in the answer you bolded is that each character is made up of several sprites, due to system constraints on the Mega Drive et al.
-
I was a bit confused about that quote, which is why I bolded it, but I figured it out. Even though I knew from the start that their process wasn't anything special, I was just really curious. Secretly I wish they did have some magic technique for creating awesome pixel art from drawings ;D
Progress with my own work is slowing down to a crawl because of life, but I found some other images that suggest they did redraw the sprite after scanning and before rescaling. Supposedly, these were part their animation tests.
(http://img196.imageshack.us/img196/3472/jimpants2.gif) (http://img844.imageshack.us/img844/6846/nuke.gif) (http://img259.imageshack.us/img259/4219/ewjrun.gif)
I guess I just gotta practice more in general, whether it's pixel art or hand drawn.
-
very nice stuff Rakukojin.
All this talk of EWJ and Sega Magazine has reminded me of another Sega game with very neat timing and drawings, except it attempts emulating human form unlike our cartoony Jim here, it's Comix Zone....
http://vividgamer.com/wp-content/uploads/2011/08/comix_zone-suphero.jpg
https://www.youtube.com/watch?v=azIZwsCGjW0
have you ever heard about anyone doing a feature on it like this? it's probably later than EWJ so they might have some added techniques for the scan-optimization of drawings :p...the humanoid fetaures might give you hints on how to fix the cluttered face of your character.
Also...it's kinda unappropiate because we're at pixelation but I cant help but wonder....why are you shrinking your drawings down to pixelart size in the first place? HD art is all the rage now, it's even old news now that GuiltyGear happened so long ago