Introduction To 2D Graphics


In the next few tutorials, we will be taking a look at 2D graphics. 2D graphics can be very useful in game programming. In addition to the fact that we can make games that are completely 2D, knowing how to do 2D graphics can add a great deal to 3D games with very little effort. 2D graphics are used for splash screens, menus, and HUDs (Heads-up Displays), among other things. In future tutorials, we will take a look at how to actually do 2D graphics. In this tutorial, we will look at how to get started with 2D.

The 2D World

The 2D coordinate system that we are going to be using is a little different from the 3D system that we have been using. The major difference (in addition to the obvious fact that there are only two dimensions) is that in our 2D world, all of our coordinates will be based on pixels on the screen, rather than a world coordinate system.

The important thing to remember here is that our system is not relative, because it is based on pixels. If we want to draw something half way across the screen, we will have to calculate what half way is, based on our window size. We will need to keep in mind the window size when we are drawing.

The 2D coordinate system’s origin is in the top left corner of the screen. The x-axis starts at 0 there, and goes right. The y-axis starts there as well, and goes down. This is probably not very natural for you guys who have not yet done very much with computer graphics, or have spent a lot of time doing math, because normally, the y-axis would go up instead of down. However, this is the way it has always been done with 2D graphics, and so we’re not about to change it right now.



No, this section is not about ghosts, and it is not about elves. And it is also not about lemon-lime flavored beverages either. In computer graphics, a sprite is a two-dimensional image. Nearly everything we do while we are doing 2D graphics will be a sprite, since most of our work will involve drawing 2D images on the screen in the spots we want them.

Of course, the definition of sprites isn’t just limited to 2D drawing. Sprites even come up in a 3D world. They are often used to achieve fancy effects, like explosions (point sprites), fire, and smoke. They can also be used in simple ways to get detailed images of objects without having to create a complicated 3D model (bill boarding and cross bill boarding). For example, we could use a picture (sprite) of a missile, rather than creating (and spend all of that energy rendering) a detailed 3D model. For the time being, we will be looking at sprites in a 2D world, and later on we can come back and discuss how to use sprites in a 3D game.

Troubleshooting.png Having problems with this tutorial? Try the troubleshooting page!