Issue #9 - February 2001

Beginning Sprites

By Rancid <rancid@neozones.com>

Many things have been done to death in qbasic.... The Nibbles game for example. Making games like Nibbles in QBasic is actually a good way to learn how to program. Usually, the classics don't require a ton of graphical work, which is good for the average programmer, but gives little experience in graphic design. Many solo programmers find themselves in trouble when they decide to make more complex games that require sprites. This is a tutorial on how to start making your own sprites from scratch... all you will need for this is Microsoft Paint. Adobe Photoshop or another advanced editor will be required to do some of the advanced work if you decide to go farther.

No need to worry about you experience in Microsoft Paint, The beginning steps actually don't require much more than patients. The first thing you need to do is decide how big your sprite is going to be.... on a 320x200 screen, 32x32 will work.... but on a 800x600 screen, 200x200 is necessary. For display proposes, I'll use 200x200. Now here's the part that scares many: draw something. draw a stick man just standing there or maybe a bit more complex character.

Here is the outline of a cloaked individual I drew. If your character is a bit more complex, try zooming in to get those pixels where you want them when you are drawing. The quick way is to hold CTRL and hit PAGE DOWN. If you still need more zoom then go to VIEW > ZOOM > CUSTOM > 800%.

Now your probably thinking. woohoo, a stickman, now what? Remember, detailed graphics take a lot of time, and even getting the hang of the concept is difficult. Open another window with Paint in it, make it a good 200 tall and 1000 wide. take your stickman that's 200x200 and paste him perfectly at the beginning of this big long window. This long window will be where your finished sprite will be saved, so save it often.

Once you have your work spot saved, modify your stick man just a little bit.... make his little legs close just a little bit.... Flip between your work window and your save window to see how your newly modified stickman looks to your original. If you like it, copy it and paste it exactly beside your first stickman in your save window. now you have 2 frames of animation. save your work. Go back to your work window and make his legs close a little more. Pretty soon you have a stickman who's walking... sort of.

Lets say you want a little more action? try making your stickman's little arms swing as he walks. Try making his head bob a little. The more detail in your sprite, the more it will add to your game. Try to set aside as much time for graphic development as programming.

So, now that you've made your very own sprite, lets try adding some depth to our creation shall we? Make your stickman hold a cane as he walks, try putting some clothes on him.... The best way to do anything like a cane for your stick man is simple but detailed. Make a colored line (a bright unused color) where you want the cane. Animate the line to be exactly where you want the cane in the future throughout your sprite.

Now this next part requires something better than Microsoft Paint. You will need a image editor that will allow you to rotate a image by any angle... I use Adobe Photoshop 5 for this. Now, draw up a really nice cane you intend to use for your stickman sprite.

Slowly rotate your cane to match the line in your sprite. cut out and paste your rotated cane into a bmp. make sure to label all your work properly, so you know what it is. a good name for a cane rotated 30 degrees counter clockwise is: cane30ccw.bmp. One thing thats very important to remember while making your sprite, is not to paste your extra object or overlapping objects before you have finished the rest of your sprite, the graphic below is just for show SO DON'T DO IT. You will hate yourself if you didnt back up your images.

One thing that is also extremely important when working with graphics it to have a zero color. A zero color is simply your color that doesn't show up in the game (a transparent color), instead the background of the game is there, not a big black box. Make sure you declare a zero color in your game or you will have the box effect.....

Finally, once your stickman.has been colored in like the one below, you can add your cane on top. Notice that there are many ways to color your sprite, I used Photoshop's plaster effect to make the cloaked sprite look 3D'ish.

There are many diverse ways and techniques to making sprites. There's even programs made in qbasic for sprites, such as pp256. I suggest if your fairly new to image loading, try making a sprite based game in pp256 first. It is somewhat easier because you have smaller images to work with, and a pre made palette to work with.... I would suggest you use the gradient palette not the standard palette included in pp256.