1 / 36

Chapter 5 Working with Images

Chapter 5 Working with Images. Starting Out with Games & Graphics in C++ Tony Gaddis. 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

iolana
Download Presentation

Chapter 5 Working with Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 5Working 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 bitmaprefers 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 • 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: • 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:

  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 Figure 5-5 A path entered by 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

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

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

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

  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 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: • The dbBitmapWidth function returns the bitmap’s width (in pixels), 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 • BitmapNumber is the number of the bitmap that you want to flip Figure 5-7 Original and flipped bitmaps The dbFlipBitmap function flips a bitmap vertically Here is the general format of how you call the dbFlipBitmap function:

  20. 5.2 Bitmaps Flipping, Mirroring, Fading, and Blurring Bitmaps • 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 The dbFadeBitmap function fades a bitmap Here is the general format of how you call the dbFadeBitmap function:

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

  22. 5.2 Bitmaps Flipping, Mirroring, Fading, and Blurring Bitmaps • 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 The dbBlurBitmap function blurs a bitmap Here is the general format of how you call the dbBlurBitmap function:

  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 • Here is an example: • This statement loads the image stored in MyPicture.bmp and assigns it the image number 1 The dbloadImage Function

  29. 5.3 Color Key Transparency 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) 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:

  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 • 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 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:

  32. 5.3 Color Key Transparency Changing the Key Color with the dbSetImageColorKey Function • 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 • 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: 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 5Working with Images QUESTIONS ?

More Related