1. Chapter 5 Working with Images
Starting Out with
Games & Graphics in C++
Tony Gaddis

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

3. 5.2 Bitmaps
Concept:
Images are commonly saved to disk as bitmaps. The Dark GDK library provides functions for loading, displaying, and modifying bitmaps.

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

5. 5.2 Bitmaps Loading a Bitmap Image
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:

6. 5.2 Bitmaps
Loading a Bitmap Image
Figure 5-1 Output of Program 5-1

7. 5.2 Bitmaps Bitmap File Locations
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

8. 5.2 Bitmaps Copying Bitmap Files to the Project Folder
Figure 5-2 Visual C++ New Project dialog box
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

9. 5.2 Bitmaps Copying Bitmap Files to the Project Folder
When we click OK
A project folder will be created at the following location:
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

10. 5.2 Bitmaps Specifying a Bitmap File’s Path
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:
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:

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

12. 5.2 Bitmaps Getting a File Name from the User
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 5-5
Figure 5-5 A path entered by the user

13. 5.2 Bitmaps Loading Multiple 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:
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

14. 5.2 Bitmaps Loading Multiple Bitmaps
You can specify a bitmap number as a second argument when you call the dbLoadBitmap function
Here is an example:
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

15. 5.2 Bitmaps Loading Multiple 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 0
As a result, bitmap number 1 will be displayed on the screen

16. 5.2 Bitmaps Loading Multiple Bitmaps
The code to the right shows how we can load multiple bitmap images and then display them one at a time:

17. 5.2 Bitmaps Getting a Bitmap’s Size and Color Depth
The dbBitmapWidth function returns the bitmap’s width (in pixels), as an integer
For example:
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:

18. 5.2 Bitmaps Deleting Bitmaps from Memory
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:

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

20. 5.2 Bitmaps Flipping, Mirroring, Fading, and Blurring Bitmaps
The dbFadeBitmap function fades a bitmap
Here is the general format of how you call the dbFadeBitmap function:
BitmapNumber is the number of the bitmap that you want to fade
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
Figure 5-9 Original and faded bitmaps

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

22. 5.2 Bitmaps Flipping, Mirroring, Fading, and Blurring Bitmaps
The dbBlurBitmap function blurs a bitmap
Here is the general format of how you call the dbBlurBitmap function:
BitmapNumber is the number of the bitmap that you want to blur
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
Figure 5-10 Original and blurred bitmaps

23. 5.2 Bitmaps
Flipping, Mirroring, Fading, and Blurring Bitmaps

24. 5.3 Color Key Transparency
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.

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

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

27. 5.3 Color Key Transparency
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

28. Color Key Transparency
The dbloadImage Function
Here is an example:
This statement loads the image stored in MyPicture.bmp and assigns it the image number 1

29. 5.3 Color Key Transparency
Displaying Images with the dbPasteImage Function
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:
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)

30. 5.3 Color Key Transparency
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

31. 5.3 Color Key Transparency
Changing the Key Color with the dbSetImageColorKey Function
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:
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

32. 5.3 Color Key Transparency
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:
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
Figure 5-11 The Web.bmp and Spider.bmp images

33. 5.3 Color Key Transparency
Changing the Key Color with the dbSetImageColorKey Function
Figure 5-12 Output of Program 5-5
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

34. 5.3 Color Key Transparency
Deleting Images from Memory
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

35. 5.3 Color Key Transparency
Deleting Images from Memory
Here is an example:
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

36. Chapter 5 Working with Images
QUESTIONS ?