Learning to Draw Basic Graphics
- Graphics Essentials
- Examining Graphics in Windows
- Painting Windows
- Building the Crop Circles Example
- Summary
- Field Trip
This chapter is from the book
This chapter is from the book
This chapter is from the book
NOTE
1979 was a critical milestone in the evolution of video games because it brought us Asteroids, which is one of the most enduring games ever. Created by Atari, Asteroids was one of the first vector graphics games, which means that it relied solely on lines to draw graphics, as opposed to little square pixels. Asteroids demonstrated that a very simple concept, with even simpler graphics and a soundtrack that gradually builds tension, creates a mix for success. In fact, Asteroids was so successful that arcade operators had to build larger coin boxes for the games—not a bad problem to have!
A computer game consists of many different pieces, all of which must come together to form a unique entertainment experience for the player. By far, the most important pieces of any game are the graphics. Graphics are used to represent the characters and creatures in a game, as well as background worlds and other interesting objects that factor into the overall game design. Granted, games have certainly done well because of factors outside of graphics, such as game play and sound quality, but those games are very rare. Besides, nowadays game players expect to see high-quality graphics just as we all expect to see high-quality visual effects in Hollywood movies. So, it's important to develop a solid understanding of graphics programming and how to use graphics wisely in your games.
In this chapter, you'll learn
-
The basics of drawing graphics using the Windows Graphics Device Interface
-
What a device context is and why it's important to GDI graphics
-
How to paint text and primitive graphics in Windows
-
How to create a sample program that demonstrates GDI graphics in the context of the game engine
Graphics Essentials
Before jumping into the details of how graphics work in Windows and how they are applied to games, it's important to establish some ground rules and gain an understanding of how computer graphics work in general. More specifically, you need to have a solid grasp on what a graphics coordinate system is, as well as how color is represented in computer graphics. The next couple of sections provide you with this knowledge, which you'll put to practical use a little later in the chapter.
Understanding the Graphics Coordinate System
All graphical computing systems use some sort of graphics coordinate system to specify how points are arranged in a window or on the screen. Graphics coordinate systems typically spell out the origin (0, 0) of the system, as well as the axes and directions of increasing value for each of the axes. If you're not a big math person, this simply means that a coordinate system describes how to pinpoint any location on the screen as an XY value. The traditional mathematical coordinate system familiar to most of us is shown in Figure 3.1.
)
Figure
3.1 The traditional XY coordinate system is commonly used in math.
Windows graphics relies on a similar coordinate system to specify how and where drawing operations take place. Because all drawing in Windows takes place within the confines of a window, the Windows coordinate system is applied relative to a particular window. The Windows coordinate system has an origin that is located in the upper-left corner of the window, with positive X values increasing to the right and positive Y values increasing down. All values in the Windows coordinate system are positive integers. Figure 3.2 shows how this coordinate system looks.
)
Figure
3.2 The Windows XY coordinate system is similar to the traditional
coordinate system except that it applies to the client area of windows.
NOTE
When I talk about drawing graphics in a window, I'm actually referring to the client area of a window, which doesn't include the title bar, menus, scrollbars, and so on. In the case of games, you can think of the client area of the main game window as the game screen. You learn more about the client area of a window later in this chapter in the section titled, "Painting Windows."
If the Windows graphics coordinate system sounds a little complicated, just think of it in terms of a classic game of Battleship. In Battleship, you try to sink enemy ships by firing torpedoes at specific locations on a grid. Battleship uses its own coordinate system to allow you to specify locations on the grid where ships might be located. Similarly, when you draw graphics in Windows, you specify locations in the client area of a window, which is really just a grid of little squares called pixels.
Learning the Basics of Color
A topic that impacts almost every area of game graphics is color. Fortunately, most computer systems take a similar approach to representing color. The main function of color in a computer system is to accurately reflect the physical nature of color within the confines of a computer. This physical nature isn't hard to figure out; anyone who has experienced the joy of Play-Doh can tell you that colors react in different ways when they are combined with each other. Like Play-Doh, a computer color system needs to be capable of mixing colors with accurate, predictable results.
Color computer monitors provide possibly the most useful insight into how software systems implement color. A color monitor has three electron guns: red, green, and blue. The output from these three guns converges on each pixel on the screen, stimulating phosphors to produce the appropriate color. The combined intensities of each gun determine the resulting pixel color. This convergence of different colors from the monitor guns is very similar to the convergence of different colored Play-Doh.
NOTE
Technically speaking, the result of combining colors on a monitor is different from that of combining similarly colored Play-Doh. The reason for this is that color combinations on a monitor are additive, meaning that mixed colors are added together to become white; Play-Doh color combinations are subtractive, meaning that mixed colors are subtracted from each other to become black. Whether the color combination is additive or subtractive depends on the physical properties of the particular medium involved.
The Windows color system is very similar to the physical system used by color monitors; it forms unique colors by using varying intensities of the colors red, green, and blue. Therefore, Windows colors are represented by the combination of the numeric intensities of the primary colors (red, green, and blue). This color system is known as RGB (Red Green Blue) and is standard across most graphical computer systems.
NOTE
RGB isn't the only color system used by computers. Another color system used heavily in desktop publishing applications is CMYK, which stands for Cyan-Magenta-Yellow-Black. Colors in the CMYK color system are expressed in terms of the color components cyan, magenta, yellow, and black, as opposed to red, green, and blue in RGB. The CMYK color system is used heavily in printing because CMYK printing inks are subtractive in nature, making it easier to print using a four-color ink combination (cyan, magenta, yellow, and black); hence the term four-color printing.
Table 3.1 shows the numeric values for the red, green, and blue components of some basic colors. Notice that the intensities of each color component range from 0 to 255 in value.
Table 3.1 Numeric RGB Color Component Values for Commonly Used Colors
|
Color |
Red |
Green |
Blue |
|
White |
255 |
255 |
255 |
|
Black |
0 |
0 |
0 |
|
Light Gray |
192 |
192 |
192 |
|
Medium Gray |
128 |
128 |
128 |
|
Dark Gray |
64 |
64 |
64 |
|
Red |
255 |
0 |
0 |
|
Green |
0 |
255 |
0 |
|
Blue |
0 |
0 |
255 |
|
Yellow |
255 |
255 |
0 |
|
Purple |
255 |
0 |
255 |
The Win32 API defines a structure named COLORREF that combines the red, green, and blue components of an RGB color into a single value. The COLORREF structure is important because it is used throughout the Win32 API to represent RGB colors. To create a color as a COLORREF structure, you use the RGB() macro, which accepts red, green, and blue color components as arguments. Here is an example of creating a solid green color using RGB():
COLORREF green = RGB(0, 255, 0);
The color created in this line of code is green because the green component (the middle argument) is specified as 255, whereas the red and blue components are specified as 0. Changing the values of these three arguments alters the mix of the color—with lower numbers resulting in darker colors and higher numbers resulting in brighter colors.
You can experiment with RGB color combinations in the standard Paint program that comes with Windows. Double-click one of the colors in the color palette in the lower left corner of the Paint window. Then, click the Define Custom Colors button in the Edit Colors dialog box. You can then either type numbers into the Red, Green, and Blue edit fields or click to select a color and intensity (see Figure 3.3).
)
Figure
3.3 The standard Windows Paint program allows you to specify colors via RGB
values.