How to Draw
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.
Get Drawin', not Paintin'!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:
- We will draw without anti-aliasing; i.e., with the pencil tool, not the brush or pen tool. If we want anti-aliasing in the final image, we just draw in high resolution and downscale it. In this case, though, we only need a lo-res icon.
- We will start with color context; if we're drawing a pear that will sit (mostly) on tables, we take the color of our table and use it as a background color. Likewise if we're drawing a flower that will grow in the grass, we take the grass color as our background. Sometimes we'll skip this step, but it's probably always a good thing to do.
- Once we have color context, we'll start by choosing colors that go well and represent the object. A pear will be yellow-green, as that's the color of pears; but yellow-green covers a lot of ground and so we'll experiment to choose what shade of yellow-green works with the shade we chose for the table.
- Lastly, we will try and draw our object at-scale, not blown up. A pear will be fairly small on the screen, so we will draw it small, at least at first. Otherwise, we're going to focus on detail that will be either too small to notice or will just turn to mud when finally rendered. When we've drawn our basic thing we might zoom in just to clean it up a bit.
Pear on TableSo, 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.
Context Color
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...
Choosing the Pear Color in Relation to the Context Color
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.
Drawing the Pear Shape - ZOOMING IN IS ILLEGAL HERE
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.
Choose the Pear Stem Color
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!
Draw the Stem
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.
Choosing Hilight and Shadow Colors
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... =)
Shading the Pear
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.
OpenGL Auto Mipmapping Considerations
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.)
The Final Glory of Fruit
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.
Show Posts
