Teaching the ways of Pixel Art [Lesson 4: Calc Sprites]
Moderator: DarkAuron
Teaching the ways of Pixel Art [Lesson 4: Calc Sprites]
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
- dysfunction
- Calc Master
- Posts: 1454
- Joined: Wed 22 Dec, 2004 3:07 am
- Location: Through the Aura
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
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!
I saw a good example in 3FG's HP:HG, and the idea just clicked
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!
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 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:
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:
After it gets outlined, start filling in dark areas with black, and light areas with white.
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.
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.
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.
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..
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:
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:
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..
So the head will have to move down again, this time losing its round shape and becoming more square-like, but that's okay.
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.
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:
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.
Now he's done! Compare the monochrome large version of him with the smaller, converted sprite and you get a strong resemblance:
And that concludes this lesson. Sorry if it seemed a bit short, but I didn't know what else to add
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,
so I played with the forward facing direction sprite and came up with a few things:
All I can say is: trial and error.
If you don't remember what he looked like, here's what I ended up with at the end of Lesson 2:
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:
After it gets outlined, start filling in dark areas with black, and light areas with white.
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.
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.
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.
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..
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:
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:
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..
So the head will have to move down again, this time losing its round shape and becoming more square-like, but that's okay.
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.
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:
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.
Now he's done! Compare the monochrome large version of him with the smaller, converted sprite and you get a strong resemblance:
And that concludes this lesson. Sorry if it seemed a bit short, but I didn't know what else to add
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,
so I played with the forward facing direction sprite and came up with a few things:
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
-
- Calc Wizard
- Posts: 526
- Joined: Tue 08 Mar, 2005 1:37 am
- Location: who wants to know?
- Contact:
-
- Calc King
- Posts: 2195
- Joined: Sun 27 Mar, 2005 4:06 am
- Location: sleeping
- Contact:
-
- Calc Guru
- Posts: 901
- Joined: Tue 29 Mar, 2005 9:13 pm
- Location: almost..........there........
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...
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.
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.