Transcript Chapter 1: Title - New River Community College

Chapter 5
Working with Images
Starting Out with
Games & Graphics in C++
Tony Gaddis
Addison Wesley
is an imprint of
© 2010 Pearson Addison-Wesley. All rights reserved.
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
Copyright © 2010 Pearson Addison-Wesley
1-2
5.2 Bitmaps
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
1-3
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
Copyright © 2010 Pearson Addison-Wesley
1-4
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:
Copyright © 2010 Pearson Addison-Wesley
1-5
5.2 Bitmaps
Loading a Bitmap Image
Figure 5-1 Output of Program 5-1
Copyright © 2010 Pearson Addison-Wesley
1-6
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
Copyright © 2010 Pearson Addison-Wesley
1-7
5.2 Bitmaps
Copying Bitmap Files to the Project Folder
•
When bitmap files are copied to the
project folder
Figure 5-2 Visual C++ New Project dialog box
– 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
Copyright © 2010 Pearson Addison-Wesley
1-8
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
Copyright © 2010 Pearson Addison-Wesley
1-9
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:
Copyright © 2010 Pearson Addison-Wesley
1-10
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
Copyright © 2010 Pearson Addison-Wesley
1-11
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
Copyright © 2010 Pearson Addison-Wesley
1-12
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
Copyright © 2010 Pearson Addison-Wesley
1-13
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
Copyright © 2010 Pearson Addison-Wesley
1-14
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
Copyright © 2010 Pearson Addison-Wesley
1-15
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:
Copyright © 2010 Pearson Addison-Wesley
1-16
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:
Copyright © 2010 Pearson Addison-Wesley
1-17
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:
Copyright © 2010 Pearson Addison-Wesley
1-18
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
Copyright © 2010 Pearson Addison-Wesley
1-19
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
Copyright © 2010 Pearson Addison-Wesley
Figure 5-9 Original and faded bitmaps
1-20
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
Copyright © 2010 Pearson Addison-Wesley
1-21
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
Copyright © 2010 Pearson Addison-Wesley
Figure 5-10 Original and blurred bitmaps
1-22
5.2 Bitmaps
Flipping, Mirroring, Fading, and Blurring Bitmaps
Copyright © 2010 Pearson Addison-Wesley
1-23
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.
Copyright © 2010 Pearson Addison-Wesley
1-24
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
Copyright © 2010 Pearson Addison-Wesley
1-25
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
Copyright © 2010 Pearson Addison-Wesley
1-26
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
Copyright © 2010 Pearson Addison-Wesley
1-27
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
Copyright © 2010 Pearson Addison-Wesley
1-28
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)
Copyright © 2010 Pearson Addison-Wesley
1-29
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
Copyright © 2010 Pearson Addison-Wesley
1-30
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
Copyright © 2010 Pearson Addison-Wesley
1-31
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
Copyright © 2010 Pearson Addison-Wesley
Figure 5-11 The Web.bmp and
Spider.bmp images
1-32
5.3 Color Key Transparency
Changing the Key Color with the dbSetImageColorKey Function
Figure 5-12 Output of Program 5-5
•
•
•
•
•
•
Copyright © 2010 Pearson Addison-Wesley
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
1-33
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
Copyright © 2010 Pearson Addison-Wesley
1-34
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
Copyright © 2010 Pearson Addison-Wesley
1-35
Chapter 5
Working with Images
QUESTIONS
Addison Wesley
is an imprint of
?
© 2010 Pearson Addison-Wesley. All rights reserved.