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 hour .

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 4.1.

Figure 4.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 4.2 shows how this coordinate system looks.

Figure 4.2. The Windows XY coordinate system is similar to the traditional coordinate system except that it applies to the client area of 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 .

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 able to mix 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, exciting 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.

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. The additive or subtractive nature of a color combination is dependent 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.

Table 4.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 to 255 in value.

Table 4.1. Numeric RGB Color Component Values for Commonly Used Colors

Color	Red	Green	Blue
White	255	255	255
Black
Light Gray	192	192	192
Dark Gray	128	128	128
Red	255
Green		255
Blue			255
Yellow	255	255
Purple	255		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 . 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.