First, to everybody in Canada and the USA: Happy Canada Day and Happy America Day; we're somewhere between them (July 2) right now. I had a great day yesterday riding with some friends, one who is visiting from the USA.
I had a special four part blog series prepared but, really, it was boring and not my style. I'd rather just blog about what I'm doing at the moment or whatever strikes my fancy.
So today, we're going to learn to draw on the computer, using a mouse.
First, we're going to draw "cartoon style", not paint in a realistic style. We are capturing line and shaded silhouette, not 3D shape or depth. That's an aesthetic and practical choice; it's less work and requires less skill on my part.
With that in mind, here are some rules we'll follow:
So, let's begin to draw our "pear on table":
This is the table our pear will sit on. We use a screenshot to get the context color becuase it's more convenient than trying to figure out the exact texture; it might also be slightly better or worse to use depending on the lighting.
We've grabbed the context color. Small objects in Texas I draw as a 64x64 object. If I use all of this space, I'll have a big object; if I use small amount of it, I'll have a smaller object. This gives a more consistent "pixel size" than if I were to draw everything hi-res and then scale appropriatel, though I do a little bit of scaling.
Imagine how jarring a 32x32 image blown up to the character size would be next to a 128x128 image of the same size. One would look chunky, but the other would be very smooth. Keeping every pixel in your texture space to be about the same size in screen space will add a lot of consistency to your game. Particulrly in a game like Texas that has a fixed viewpoint (the camera never gets too close to anything) this can be very effective, and we can get away with relatively chunky pixels. Compare this to a 3D game where the camera can get right up next to a wall; you'd better have a high-detail texture there or else it's going to look very bad, since far-away walls will have the right level of detail.
Ironically, without intending to I took a screenshot that perfectly illustrates this problem. Notice how there is part of a pentagram on the floor, and notice how bad it looks. That's not so much because the pixels are chunky; lots of art is done with big blocky shapes and it looks fine. The problem here is that these pixels are TOO chunky in relation to the rest of the game. I'll need to redraw that pentagram, which strictly speaking is probably what I should have done instead of making a pear...
Next we choose the base color to use for the pear. This is just trial and error, though I almost always use the color wheel selection tool shown here for choosing colors.
The basic shape of the pear is drawn with the 3x3 pencil tool. One useful tip when drawing with this tool is to think not just in positive but also in negative space. That is, draw the shape you want, then choose the background color and shape the corners where they may stick out. You can get nice, smooth shapes this way.
Next we choose the stem color; rather than pick a new hue, we choose a darker version of the color of the pear. Fewer hues rather than more will give more consistency, especially in situations like this where it's not that important. Go easy on the colors, mac!
Now draw the stem. I use the 1x1 pencil tool in gimp tool scaled to 2, since the 3x3 would be too big.
This is a perfect example of "less is more". We just need one simple line to communicate the stem; don't overwork it. Just imagine Bob Ross going "shoop" as you draw the line. It took 1.2 seconds including tool selection, you're done now, move on.
We're almost done. Next we want to shade this to give it some 3D volume. To choose the shading colors, I use a shade swatch. Basically, take the primary color and draw it on a background. Then choose a color for "light", usually a bright bright yellow (shown top left) and for "dark", usually a dark blue. This define your light and shadow.
Next you overdraw the original circle, with a certain opacity (I've used 65%, sometimes I use 35% for one and 65% for the other.) You now have some colors to choose from for shading.
Finally, if you have foresight you could choose these light and shadow colors before you start any art for your game, and keep them consistent. Or, keep them consistent for certain areas.
Yeah, foresight is awesome isn't it? The only problem is that in my case this particular advice is hindsight masquerading as foresight... =)
Next, you select your base color using the smart select or color select tool. That way, when you draw your shading (remember: you aren't going to zoom in) you don't have to worry about overdrawing the borders. Then, just draw the shadow and light using colors from your color swatch. Voila! A shaded pear.
The final step is also important, because of the way objects sometimes can be rendered by GL. You want to replace your original background color (from the table) with the color from your pear. This is because your object, even if it's rendered aliased (i.e., NOT anti-aliased, like all the graphics in Texas are) may be mipmapped; this will bleed some of the color from the borders into your original image causing an ugly border to appear. You don't want this, so by putting the object color into the background, you help eliminate unwanted bleed effects as this color will be the one that bleeds; and it's not that noticable.
This could also be dealt with by a smarter mipmap algorithm that wouldn't blend colors from 0-alpha pixels, i.e., it would act as if those pixels didn't exist. Anyhow, it's important!
Then, you just add your alpha map (the way I do these last steps is by selecting my background, flood filling with the pear color, then inverting the selection, then adding alpha channel based on this.)
And here it is, in all it's glory! Just for fun, I'll leave this item in the final game though I might hide it somewhere as a bit of an easter-egg.