PDA

View Full Version : How to sprite a hamster.


DawnBat
April 8th 2005, 12:59 AM
The first thing you do when building a sprite is figure out how and what you are going to draw. Using Google's Image Search, I dug up half a dozen hamster pictures. I drew on all of them to some degree, but these two provided the most inspiration:

[attachment=1]

This baby is dynamic and inspiring for obvious reasons.


[attachment=2]

I just adore the way this guy's hair stands straight up!


Okay, so the next step is to draw it out on paper, to get an idea of what you're getting into. I'd show you how this step went, but my scanner is not working. Bad scanner. :bomb:

Once I got an idea of what the sprite was gonna look like, I went into Microsoft Paint and (using the line tool) made a snappy outline that pretty much conformed to my pencilwork. I then proceeded to quickly color it in with the ugly orange than Paint gives you, so that I knew where the different patches of color would be:

[attachment=3]

This is the base graphic. The next step is to mess around with the colors.

I went into Paint's color dialogue, and started mucking around until I found an attractive golden-brown. After I replaced the orange with this color, I needed two other colors: the gold color's shadow, and the shadow of the white.

The gold color's shadow is the gold color, only minus 50 luminance. Easy as pie. And once I had decided this, it became easy to make the white's shadow. I didn't want grey though, because I wanted to indicate a warmer, more cream sort of white. So I took my golden color, reduced the saturation a ways, cranked it up to max luminance, and then dropped the luminance fifty points. Easy as pie. Then, to make the outline fit the sprite better, I replaced the black with a dark brown.

[attachment=4]

Once you throw the shading in, you are home free. This is a professional-quality sprite. But I wanted to take it up one more level. So I used a technique I call "Half Pixelling." Basically, I pretended that I had twice the resolution that I really had. I created a step between the gold and the outline, and wherever the hamster's outline would have more curve to it than allowed in the resolution, I replaced the line with the lighter colour. Half-Pixelling allows you to make the sprite look like it has more detail than it really has.

After Half-Pixelling, I spent another ten minutes pushing, prodding, and tweaking. I moved the head so that it looked like his weight was more balanced. I pushed his forehead down, and tweaked the hair spikes:

[attachment=5]

Viola! Hamster-flavored Sprite!

Next week: How to make a Hamster walk.

Piebald
April 8th 2005, 01:00 AM
THAAAAAAAAAAAAAAAAAAAAAAAAAAAANK YOU!!!

Of course the pictured critters are guinea pigs, not hamsters, but the sprite is absolutely FANTASTIC!!!!!!!!!!!!!!!!!

DawnBat
April 8th 2005, 01:01 AM
THAAAAAAAAAAAAAAAAAAAAAAAAAAAANK YOU!!!

Of course the pictured critters are guinea pigs, not hamsters, but the sprite is absolutely FANTASTIC!!!!!!!!!!!!!!!!!
I've never seen a hamster, and this is what came up in my search.

Piebald
April 8th 2005, 01:04 AM
It's not a problem, because the sprite can DEFINITELY pass for Hamster

:snowball: :cool:

DawnBat
April 8th 2005, 01:04 AM
Oh, and I should add that this sprite only uses 7 colors! That's not as important as it used to be, but the color restrictions of less powerful game machines had the side effect of unifying the sprite more, so it's still good practice to get by with as few colors as you can.

Piebald
April 8th 2005, 01:06 AM
It also makes the sprite smaller. So later on, when I animate it, I can have more frames :thumb:

Piebald
April 8th 2005, 01:14 AM
You know what, I NEVER thought of using the line tool ...

DawnBat
April 8th 2005, 01:24 AM
You know what, I NEVER thought of using the line tool ...
I use the Line tool for the 'rough draft', then I zoom the heck in and push stuff around with the pencil.

Cool things that make Paint useful for making sprites:

1. Eraser tool. If you rightclick, instead of replacing everything under it with the background color, it only replaces the foreground color with the background color. Useful for uber-fast recolors.

2. Right click when you have the selection tool, and it gives you the option "Paste From File". This means you can have something important in the clipboard, and still paste in a different frame. Then just undo/redo to see how the two work with each other. Almost as good as onion-skinning.

3. PSP and Adobe make it a pain to mess with one pixel at a time. In Paint, it's a breeze!

4. Holding Ctrl when selecting a color or drawing gives you access to a third color. How's that for convenient?

5. Nine out of every ten infinite monkeys use Paint instead of Word when trying to rip off The Bard.

DawnBat
April 8th 2005, 01:25 AM
6. Ctrl-F for aun uncluttered look at your sprite against a blank screen. Nice for getting the big picture.