back
Introduction to the Windows Graphic Device Interface (GDI)
Here is a great tutorial by Soren Christensen & Humberto Abreu from vbexplorer.com that explains how game programmers utilize graphics. Read through it first. Don't try to download the example files. I have already downloaded them placed them in the public folder under Period three. After you finish reading the tutorial, continue with the rest of this page.

Drawing and Animation Tutorial #1

The BitBlt Function

The basic idea here is that you, as a programmer, can call upon certain functions that lie deep within the Windows operating system. Although they look complicated, they aren't that hard to use once you get used to them. I take that back. They are complicated. The fact is that you can start using them even if you don't understand them to the core. Just start using them and evetually you will fully understand their secrets. Even though this animation method is more complicated, it's absolutely essential for the game programmer to know. Why? It speeds up animation tremendously. The animation techniques you've been learning so far are all pretty slow. The BitBlt function taps you into the heart of Windows and accelerates the whole process.

Here's the deal with BitBlit: it takes an image from a source and transfers it to a destination somewhere on your screen. You can then alter the X and Y coordinates of the destination image and create the illusion of motion. The destination image is called a sprite. Remember the sprites from Shockwave? It's basically the same thing. The only difference is that now we are writing the code that makes it happen instead of using an application to do the work for us.

The process of copying the image from the source to the destination if called bliting. Typically what's done is you start with a source image like this:



You then selectively copy one section at a time across the screen to your destination. If you can copy one piece at a time, you create the illusion of motion. That's what bliting is all about.



So, we see that animation is accomplished by using this built-in function from Windows that allows us to take a rectanglular piece of a picture and copy it to other parts of the screen--creating what we call the sprite. But, there's a new problem here. What if the sprite you wish to animate is not a rectagle? The illusion of animation would be ruined if you saw the edges of the sprite moving at the same time. We have to block out the edges; and we can do that by using something called a mask. Check out these three pictures:



The first is the original picture. What I want to do is create an animation of just his face. I don't want the background to show in the final animation product. So, first I black out the background. I used Photoshop, but you can do the same thing with simple shapes using the Paint program in Windows. That's my fist step. Of course, I don't want the black to show either because I plan to have a background color. This is where the mask comes in. The mask is the third image. The mask consists of only black and white. The white blocks off what we don't want to see. We only see what's in the black.

Take a look at the four Visual Basic Programs in the public folder (under period three):
  1. Blitmask
  2. Lane
  3. Blitmove1
  4. Lanemove
Assignment (2 parts)

Make your own versions of the Mask program and the Movement program.
Warning! When you create the forms, change the ScaleMode property of the form from "twips" to "pixels." Also set the AutoRedraw property to TRUE.