Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images Starting Out with Games & Graphics in C++ Tony Gaddis

Copyright © 2010 Pearson Addison-Wesley 5.1 Introduction Primitive shapes are drawn using functions such as –dbLine –dbCircle –dbBox Can only be used to draw basic images In this chapter, we will –Learn how to display images Created with graphics programs such as Microsoft Paint Captured with a digital camera –Cover various special effects with images –Demonstrate how to use color key technology 1-2

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps 1-3 Concept: Images are commonly saved to disk as bitmaps. The Dark GDK library provides functions for loading, displaying, and modifying bitmaps.

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps When graphic images are stored on a computer’s disk, they are commonly stored as bitmaps The term bitmap refers to a set of data that describes every pixel in an image When a image is saved on the computer’s disk as a bitmap, it is saved in a file that describes every pixel in the image Digital cameras, scanners, and graphics programs like Microsoft Paint create image files that end with extensions such as –.jpg –.bmp –.gif These extensions are all different file formats for saving a bitmap image to file 1-4

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The Dark GDK library provides a function named dbLoadBitmap that loads a bitmap file into memory The dbLoadBitmap function can be used to open files that have been saved in the following formats: –.bmp –.jpg –.tga –.dds –.dib –.png You call the dbLoadBitmap function, passing the name of the bitmap file as an argument Here is an example: 1-5 Loading a Bitmap Image

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps 1-6 Loading a Bitmap Image Figure 5-1 Output of Program 5-1

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps When you pass the name of a bitmap file to the dbLoadBitmap function –The function must be able to locate the file on your system’s disk –If the function cannot locate the file You will see nothing displayed There are two ways you can make sure the function locates the bitmap file –(1) Copy the bitmap to the program’s project folder –(2) Specify the file’s path, as well as its name 1-7 Bitmap File Locations

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps When bitmap files are copied to the project folder –A bitmap file can be loaded by simply specifying the bitmap’s file name –There is no need to specify the bitmap’s file path You specify the location of the project folder when you create the project For example, suppose you want to create a project named BitmapDemo –In Visual C++, you would Click File Then New Then Project –This brings up the New Project dialog box 1-8 Copying Bitmap Files to the Project Folder Figure 5-2 Visual C++ New Project dialog box

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps When we click OK –A project folder will be created at the following location: 1-9 Copying Bitmap Files to the Project Folder This is the location where you would copy the bitmap file The location may be different on your computer depending on how your user account is set up, for example, suppose your user name is jsmith09 The project for jsmith09 would be created at the following location: C:\Users\jsmith09\Documents\Visual Studio 2008\Projects\BitmapDemo\BitmapDemo

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps Specifying the bitmap file’s path and name when you call the dbLoadBitmap function –Eliminates the need to copy the bitmap file to the project folder For example, suppose the Boston.jpg file is stored in the folder C:\Images The file’s name, including the path, would be as follows: 1-10 Specifying a Bitmap File’s Path It is important to remember when you write a Windows path as a string literal in a C++ program –Each backslash character must be written as two backslashes Here is an example:

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps 1-11 Getting a File Name from the User Figure 5-4 Example output of Program 5-3 Because the dbInput function returns a string, you can use it to get a file name from the user Program 5-3 demonstrates this

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps Double backslashes are used when a bitmap’s file path and name are entered by the programmer as string literals Single backslashes are used when a bitmap’s file path and name are entered by the user as input For example, suppose the user of Program 5-3 wants to display the bitmap file C:\Images\Beach.jpg The user would enter the path with single backslashes, as shown in Figure Getting a File Name from the User Figure 5-5 A path entered by the user

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps With the dbLoadBitmap function –You can load up to 32 images into memory –Only display one bitmap at a time Others can be held in memory until they are ready to be displayed –Each bitmap is assigned a number in the range 0 – 31 –This bitmap number is how the Dark GDK keeps track of bitmaps in memory Previously, we called the dbLoadBitmap function –Providing only the bitmap file name as an argument –For example: 1-13 Loading Multiple Bitmaps This statement causes the bitmap file to be loaded as bitmap number 0 Bitmap number 0 is a special bitmap because it is the only one displayed on the screen

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps You can specify a bitmap number as a second argument when you call the dbLoadBitmap function Here is an example: 1-14 Loading Multiple Bitmaps The following code shows an example of loading multiple bitmap images: None of these bitmaps will be displayed, however, because none of them is bitmap 0

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps If a bitmap has a number other than 0, You display the bitmap by copying it to bitmap 0 This is done with the dbCopyBitmap function When you call the dbCopyBitmap function, you pass two arguments –The first is the number of the bitmap you are copying –The second is the bitmap number you are copying to The following example copies bitmap 1 to bitmap Loading Multiple Bitmaps As a result, bitmap number 1 will be displayed on the screen

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The code to the right shows how we can load multiple bitmap images and then display them one at a time: 1-16 Loading Multiple Bitmaps

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The dbBitmapWidth function returns the bitmap’s width (in pixels), as an integer –For example: 1-17 Getting a Bitmap’s Size and Color Depth The dbBitmapHeight function returns the bitmap’s height (in pixels), as an integer –For example: The dbBitmapDepth function returns the bitmap’s color depth as an integer –For example:

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps It is a good idea to remove bitmaps once the program has finished using them Removing bitmaps –Frees up memory –Can improve the program’s performance After a program is finished using the bitmaps it has loaded into memory, it can remove them with the dbDeleteBitmap function You pass a bitmap number as an argument to the dbDeleteBitmap function and it removes the bitmap from memory Here is an example: 1-18 Deleting Bitmaps from Memory

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The dbFlipBitmap function flips a bitmap vertically Here is the general format of how you call the dbFlipBitmap function: 1-19 Flipping, Mirroring, Fading, and Blurring Bitmaps Figure 5-7 Original and flipped bitmaps BitmapNumber is the number of the bitmap that you want to flip

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The dbFadeBitmap function fades a bitmap Here is the general format of how you call the dbFadeBitmap function: 1-20 Flipping, Mirroring, Fading, and Blurring Bitmaps Figure 5-9 Original and faded bitmaps FadeValue is an integer that indicates the level of fading This value must be in the range of 0 through 100 A value of 0 fades the bitmap completely to black A value of 100 performs no fading BitmapNumber is the number of the bitmap that you want to fade

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The dbMirrorBitmap function mirrors a bitmap horizontally Here is the general format of how you call the dbMirrorBitmap function: 1-21 Flipping, Mirroring, Fading, and Blurring Bitmaps Figure 5-8 Original and mirrored bitmaps BitmapNumber is the number of the bitmap that you want to mirror

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps The dbBlurBitmap function blurs a bitmap Here is the general format of how you call the dbBlurBitmap function: 1-22 Flipping, Mirroring, Fading, and Blurring Bitmaps Figure 5-10 Original and blurred bitmaps BlurValue is an integer that indicates the intensity of blurring This value must be in the range of 1 through 9 A value of 1 slightly blurs the bitmap A value of 9 greatly blurs the bitmap BitmapNumber is the number of the bitmap that you want to blur

Copyright © 2010 Pearson Addison-Wesley 5.2 Bitmaps 1-23 Flipping, Mirroring, Fading, and Blurring Bitmaps

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency 1-24 Concept: Color key technology is used to make some pixels in an image transparent. This allows you to display an image on top of a background image. The background image will show through the transparent pixels in the foreground image.

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency Color key technology, also known as chroma key, is widely used for special effects in movies and television The technology allows filmmaker’s to blend two images, making them appear as one To create the scene, the filmmaker will shoot two videos: –The primary video: A video of the actors standing in front of a large screen that is a specific color, known as the key color –The background video: A video of the background scenery 1-25

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency The primary video is placed on top of the background video The pixels in the primary video that contain the color key are not shown The resulting video makes it appear that the actors are standing in front the background scenery –Also used in television weather forecasts The weather person stands in front of a key-colored background Before the image is transmitted, a computer replaces the key color with the actual weather map 1-26

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency 1-27 The dbLoadImage Function The dbLoadImage function loads an image from a file Here is the general format of how you call the dbLoadImage function: Filename is the name of the file containing the image –The function can only load files in the.bmp,.jpg,.tga,.dds,.dib, or.png formats ImageNumber is the number you assign the image –The image number must be an integer in the range of 1 through 65,535 –After an image is loaded, you use its image number to identify the image

Copyright © 2010 Pearson Addison-Wesley Color Key Transparency The dbloadImage Function 1-28 Here is an example: This statement loads the image stored in MyPicture.bmp and assigns it the image number 1

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency After you have loaded an image, you can display it in the program’s window with the dbPasteImage function Here is the general format of how you call the dbPasteImage function: 1-29 Displaying Images with the dbPasteImage Function ImageNumber is the number of the image you want to display X and Y are integers specifying the screen coordinates where the upper-left corner of the image will be displayed Transparency is either 0 or 1 –A value of 0 means no pixels will be treated as transparent –A value of 1 means all pixels that contain the color key will be treated as transparent –The default key color is black (red = 0, green = 0, and blue = 0)

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency 1-30 Displaying Images with the dbPasteImage Function Here is an example: This statement will display image 1 at the coordinates (0, 0), and all key color pixels will become transparent

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency 1-31 You can use the dbSetImageColorKey function to change the key color to anything you wish Here is the general format of how you call the dbSetImageColorKey function: Changing the Key Color with the dbSetImageColorKey Function The arguments that you pass for Red, Green, and Blue are the key color’s red, green and blue component values For example, the following statement sets the key color to red: You have to call the dbSetImageColorKey function before loading an image with the dbLoadImage function If you execute the statement above and then load an image All of the pixels in the image that have RGB values of 255, 0, 0 will be transparent when the image is displayed

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency Set the key color to the RGB values 0, 255, 0 Load the Web.bmp Image Load the Spider.bmp image Display the Web.bmp image –We will not need transparency when we display this image because it is the background image Display the Spider.bmp at the desired coordinates –We will use transparency when we display this image so the green pixels will not appear 1-32 Figure 5-11 The Web.bmp and Spider.bmp images Changing the Key Color with the dbSetImageColorKey Function For example, suppose we have the images Web.bmp and Spider.bmp, as shown in Figure 5-11, and we want to combine them so the spider appears to be on the web Here are the general steps we will perform to combine the two images:

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency 1-33 Figure 5-12 Output of Program 5-5 Changing the Key Color with the dbSetImageColorKey Function Line 8 sets the key color to green Line 11 loads the Web.bmp file as image #1 Line 14 Loads the Spider.bmp file as image #2 Line 21 pastes image #1 without transparency Line 27 pastes image #2 with transparency Line 30 waits for the user to press a key

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency After a program is finished using the images it has loaded into memory, it can remove them with the dbDeleteImage function You pass an image number to the dbDeleteImage function and it removes that image from memory 1-34 Deleting Images from Memory

Copyright © 2010 Pearson Addison-Wesley 5.3 Color Key Transparency 1-35 Deleting Images from Memory This statement removes image number 1 from memory In many programs it is a good idea to remove images once the program has finished using them Some images are very large, so removing them after they are no longer needed frees memory and can improve the program’s performance Here is an example:

Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images QUESTIONS ?