Teaching the ways of Pixel Art [Lesson 4: Calc Sprites]

A place for graphics

Moderator: DarkAuron

Post Reply
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Teaching the ways of Pixel Art [Lesson 4: Calc Sprites]

Post by DarkAuron »

I bet you guys didn't think I'd be posting in here anymore. I'm about to work on lesson #4 that has to do with small calculator sprites, as mentioned before. Stay tuned!
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
User avatar
dysfunction
Calc Master
Posts: 1454
Joined: Wed 22 Dec, 2004 3:07 am
Location: Through the Aura

Post by dysfunction »

Great!
Image


"You're very clever, young man, but it's turtles all the way down!"
User avatar
kalan_vod
Calc King
Posts: 2932
Joined: Sat 18 Dec, 2004 6:46 am
Contact:

Post by kalan_vod »

Yay!!! Welcome back DA.
Liazon
Calc Guru
Posts: 962
Joined: Thu 27 Oct, 2005 8:28 pm

Post by Liazon »

I think I'm starting to understand now. Because you move your arms while you walk or run, you can make a convincing sprite that's only chest up, so long as you show that the arms are moving (by making one smaller or larger.) it appears as if the character is walking.

I saw a good example in 3FG's HP:HG, and the idea just clicked :D

Too bad everything in programming is a trade off.

size vs. speed
leg movement vs. arm movement
facial detail vs. body details

And I found that drawing 3 level greyscale sprites is just as difficult as plain monochrome. Still, thanks a lot for the advice and welcome back DA!
Image Image Image
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Post by DarkAuron »

For awhile I was constantly tired, mostly just restoring myself back to my 'regular', school-based sleeping schedule, but I'm a bit restless tonight and after not being able to think of how to start off this lesson, I realized I could reuse my punk dude again :P His sprite is sized at 20x30 and I aim to lower that to 8x12. Don't think it's possible? Read this lesson and find out how I cut him in less than half the size, while losing his colors as well.

If you don't remember what he looked like, here's what I ended up with at the end of Lesson 2:
Image

First what needs to be done is convert to monochrome. You could just save the file as a 1bit image but image programs almost never do that well, so doing it by hand is most efficient. Start off by outlining the sprite with black, as shown here:

Image

After it gets outlined, start filling in dark areas with black, and light areas with white.

Image

As you do so however, you may notice that detailed, shaded areas such as the cap may seem hard to convert. Keep the detail and lose obvious indication of shape, or lose detail and become simplified? Toying with the values may seem difficult and annoying, and even though you might be able to tell it's still a cap, someone who's never seen it before probably won't be able to. When you're doing monochrome, a balance of shape vs. shadow heavily conflicts.

Image Image Image

Since a conversion to a smaller size is in order, it's best to keep things simplified with less detail, mostly maintaining enough shape to work with. Thus, the cap will look white for now.

Image

As the legs and feet are drained of color, you'll notice the feet don't look round anymore, more like rectangles instead of feet, and the 'shading' done to the legs don't make sense now. Also, the shading done on the arms looks out of place, and detail isn't of worry right now.

Image Image Image

You might be asking "why didn't you just use the sprite of that guy before you did the shading on him in lesson 2, why not just use the sprite at the end of lesson 1?" Well, because I wanted to demonstrate that there are shadow/shading conflicts, and because not all sprites are solid colors like that. Some have shading, as this guy started out with in this lesson.

Still, we're not done. If we're going to 8x12 from 20x30, that's 40% of the size, so doing a resize will result in..

Image

Looks like crap. Well, a head, body, and a couple of lines that could resemble limbs, but not much. Still, it's a rough outline of the guy. With this you can make a miniature outline and shape of him, like so:

Image

A couple of things need to be done with that. Lower the head since he doesn't have a long neck, lengthen the arms, and 'ground' out the feet. If you don't ground and flatten out the feet with such a tiny sprite he'll look more like an insect with all the circles and ellipses like he does now. The result would be something like this:

Image

Next, let's start working on his cap. Move up the 'lip' of the cap and try to add the head. Unfortunately theres not enough room to solidify the head of the cap, though..

Image

So the head will have to move down again, this time losing its round shape and becoming more square-like, but that's okay.

Image

Then just finish off the lines for the cap head, and round off the lip so its shape is seperated from the head of the cap.

Image

This next part isn't that big of a deal, but it balances out the sprite more by equalizing the thickness and making the arms not seem as short by adding a few pixels below them:

Image

And finally, with a bit of trial and error, the hair can be added. One thing I might note is that if you try to add pixels onto the head, they may shrink the head or seem to add an eye that's looking left or right, depending on where you put the pixel at.

Image

Now he's done! Compare the monochrome large version of him with the smaller, converted sprite and you get a strong resemblance:

Image Image

Image Image

And that concludes this lesson. Sorry if it seemed a bit short, but I didn't know what else to add :roll:

Oh, I know what I can add. If you do some basic outline stuff, you can come up with new, interesting styles out of nowhere. Such an example is calcul831415's attempt at doing a full-body sprite,

Image


so I played with the forward facing direction sprite and came up with a few things:

Image

All I can say is: trial and error.
Last edited by DarkAuron on Mon 26 Feb, 2007 11:28 pm, edited 1 time in total.
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
User avatar
kalan_vod
Calc King
Posts: 2932
Joined: Sat 18 Dec, 2004 6:46 am
Contact:

Post by kalan_vod »

Wow it didn't seem like it was possible, but it looks nice! nice tut.
User avatar
tr1p1ea
Maxcoderz Staff
Posts: 4141
Joined: Thu 16 Dec, 2004 10:06 pm
Location: I cant seem to get out of this cryogenic chamber!
Contact:

Post by tr1p1ea »

Its nice, but why didnt you go for a 16x16 canvas? You could get the major details in that way ...
"My world is Black & White. But if I blink fast enough, I see it in Grayscale."
Image
Image
User avatar
Dwedit
Maxcoderz Staff
Posts: 579
Joined: Wed 15 Dec, 2004 6:06 am
Location: Chicago!
Contact:

Post by Dwedit »

I've noticed that using a black background allows you to fit in a lot more detail, since you no longer need to allocate 2 pixels to an outline.
You know your hexadecimal output routine is broken when it displays the character 'G'.
DarkerLine
Calc Wizard
Posts: 526
Joined: Tue 08 Mar, 2005 1:37 am
Location: who wants to know?
Contact:

Post by DarkerLine »

You can get the same effect by drawing black objects on white. Ex:

1. White smiley on white background: Image
2. White smiley on black background: Image
3. Black smiley on white background: Image
4. Black smiley on black background: Image

Notice how #2 and #3 both have more detail.
just try to be nice to people.
_________________
My TI Blog - http://mpl.unitedti.org/
threefingeredguy
Calc King
Posts: 2195
Joined: Sun 27 Mar, 2005 4:06 am
Location: sleeping
Contact:

Post by threefingeredguy »

Yeah, but it wouldn't look the same in-game.
Image
thecheat
Calc Guru
Posts: 901
Joined: Tue 29 Mar, 2005 9:13 pm
Location: almost..........there........

Post by thecheat »

this is the type thing that takes a bit of work, and, it's something I happen to be good at... here, let me mess with your sprite a bit...

Image

unfortunatly, at demensions of 8 pixels and under, it's hard to show straight forward faces, it sometimes helps to turn their faces to the side that make it look less of a blob.
Gert-Jan
New Member
Posts: 42
Joined: Mon 06 Feb, 2006 5:18 pm

Post by Gert-Jan »

thank you for the nice tutorial
Post Reply