Computer Graphics Skills
| In addition to programming skills, you'll need to understand how computer graphics work. If you want to become a guru in computer graphics, be prepared to do almost nothing but that for the rest of your career. However, you don't have to be a guru to start writing games. You just need to know a few fundamental concepts. The Basics of Computer GraphicsThe tool you'll use for displaying graphics in your games is a monitor, which is also commonly called a screen, or display. An understanding of monitors is the starting point for developing computer graphics skills. How Computer Monitors WorkThe internals of monitors aren't as complex as you might think. Figure 1.3 illustrates how they work. Figure 1.3. How computer monitors work. Factoid These days, many computer screens that do not use electron guns. Instead, they use an electrical current to make small cells of plasma glow different colors. These gas plasma displays are nice because they can be made quite flat. For this reason, they have long been used in laptop computers. Increasingly, they are also being used for desktop displays. Gas plasma displays are arranged just like monitors that use electron guns. Specifically, they contain rows of pixels and each pixel is composed of a red, a green, and a blue dot. A monitor, also called a screen or display, is coated on its front with a chemical called phosphorus. When electrons hit the phosphorus coating, the phosphorus glows. The color that the phosphorus emits depends on what chemicals you add to it. The phosphorus coating on the front of your screen is made up of groups of red, green, and blue dots. One group of dots is called a pixel. Every pixel has a red, green, and blue dot in it. To make a pixel turn a particular color on your screen, you mix different amounts of red, green, and blue. Tip When you write a game, you can assume that everyone who plays it will have a computer that supports the 800x600x24 graphics mode. That's a resolution of 800 pixels across and 600 rows of pixels with a color depth of 24 bits per pixel. If you want to write a cutting-edge game (not recommended when you're just starting out), you can assume that players' computers support the 1024x768x24 graphics mode. The electrons that make pixels glow come from electron guns inside your computer monitor. That's why the darn thing is so deep. The bigger the screen, the farther back the electron gun has to be so it can hit all the pixels. As Figure 1.3 shows, color screens actually have three electron guns, one each for red, green, and blue. As you can see from Figure 1.3, all of the pixels on the screen are arranged in rows. The rows are called scan lines. The electron guns fire at each pixel, one after the other. They start at the top scan line and work their way down to the bottom. When they reach the end of the last scan line, they start again at the top of the screen. The time that it takes for the electron guns to hit every pixel on the screen is called the screen's refresh rate. Selecting Graphics ModesComputer monitors display better pictures if they have a high number of scan lines as well as a high number of pixels per scan line. In other words, if there are lots of pixels per row and lots of rows of pixels on the screen, your game looks better. It has a high resolution. You specify a monitor's resolution by stating the number of pixels per row followed by the number of rows on the screen. So, for instance, a common resolution used by games is 800x600. That's 800 pixels per row and 600 rows on the screen. All monitors are capable of displaying more than one resolution. Each resolution is called a video mode. You'll often hear game programmers talk about 800x600 mode or 1024x768 mode. Obviously, the higher the resolution, the better your graphics look. The problem with that? Higher-resolution modes require more memory because drawing those graphics requires more processing power. In addition, not every monitor has support for all high-resolution modes. The monitor itself is connected to a video adapter. The capabilities of the computer's video adapter also affect which modes a computer can set its monitor to. Table 1.2 shows some common modes.
When you select a mode for your game, you want to select one that's high enough to draw good graphics, that's likely to be supported on nearly everyone's computer, and that doesn't require too much memory and processing power. Typically, that ends up being either 800x600 or 1024x768. The graphics mode also determines color depth. Color depth determines the number of colors a monitor can display. Every color is specified by a unique number. The number contains pixel values for the colors red, green, and blue. Every other color a monitor displays is created by mixing red, green, and blue. Tip With a color depth of 24 bits, you can get a good range of colors. Almost all video adapters support that color depth. Suppose a graphics mode on a monitor has a color depth of 8 bits each for red, green, and blue, for a total color depth of 24 bits. Each set of 8 bits specifies an intensity of its respective color. Eight bits enables you to specify 256 individual numbers, 0255. A value of 255 for red means that the pixel's red is set to full intensity; 128 is half intensity; 0 is off, no red. With a 24-bit color depth, you can, for instance, set the 8 bits for red to 128, the 8 bits for green to 0, and the 8 bits for blue to 255 to get a color that contains some red, no green, and lots of blue all mixed together. The result is a nice shade of purple. The vast majority of video adapters actually support a color depth of 32 bits. They still use 24 bits for color. The extra 8 bits are used for special effects. Displaying Pictures on a Computer MonitorThe images games display on screens are called bitmaps, pixel maps, or pixmaps. A bitmap contains one item of data for each pixel you want to color on the screen. As a result, we often end up calling the data items pixels. That's not strictly correct, since they're not really pixels. They contain data for pixels, so we tend to apply the name to them. Figure 1.4 shows a Krelnorian who's not at all happy you showed up on his planet (Krelnor, which is just a hop, skip, and a hyperjump away from the popular tourist destination planet of Jaglon Beta). Figure 1.4. A bitmap of an alien. If this picture is stored in a computer, it's stored in a bitmap. Notice that the bitmap is rectangularall bitmaps are. But the likelihood is that you just want to display the Krelnorian. Your game probably doesn't display the bitmap's background. What your game needs to do is combine the image of the Krelnorian with whatever's on the screen without displaying the background pixels in this bitmap. To get just the Krelnorian and not the background pixels, your game must make the background pixels transparent. The graphics library (OpenGL) and game engine (LlamaWorks2D) take care of that for you. When you add your bitmaps to a game, you'll need to tell the game engine which color is the background color. The library and the engine display the Krelnorian but not the background color. As we get into animation in later chapters, I'll show you how this is done. Animating Your GameTip To get good animation, you need to display 30 frames per second or more. Games aren't much fun if nothing moves. If you want to make the Krelnorian in Figure 1.4 (or anything else) move, you use the same techniques that have been used in movies and cartoons for over a century. Think about how movies work. A movie is just a collection of pictures on a long reel of film. Each picture is called a frame. In each frame, the scene changes slightly. You get the illusion of movement by displaying the frames on the movie screen one after the other very quickly. This technique is exactly how animation works in computer graphics. Your game draws a frame onto the screen, displays it for a portion of a second, and then draws the next frame. In reality, what games do is draw each frame into a chunk of the computer's memory. The chunk of memory is called a buffer. The image that is displayed on the screen is in the front buffer. While the player is looking at the frame in the front buffer, the game draws the next frame into another buffer called the back buffer. When it's done, it switches the front buffer and the back buffer. Because the back buffer is now the front buffer, the image in it is displayed on the screen. This process is illustrated in Figure 1.5. Figure 1.5. Front and back buffers switch for each frame of animation. Figure 1.5 shows two rows of pictures. Each row represents what's going on in a frame of animation. The picture marked as the front buffer is what's currently displayed on the screen. In the top row, the picture on the left is the front buffer showing the unhappy Krelnorian. While that's being displayed, the game draws the next picture into the back buffer. When it is drawn, the game switches the buffers. The result is shown in the next frame, which is depicted in row two. Row two shows that the front and back buffers have been switched. The front buffer is now the picture on the right. The game is drawing the Krelnorian's next movements into the back buffer on the left. When it's done, the buffers will be switched again. With each buffer switch, the Krelnorian appears to move slightly. Doing this in your game isn't hard. All your code has to do is draw each frame. The graphics library and the game engine handle everything else. |
EAN: 2147483647
Pages: 148