[ LiB ] |
Whew, that was one big graphics call! Let's get into more specialized graphics stuff. This section will explain how to load an image, how to draw it onscreen, and the like. Are you ready?
The first call we will be using is LoadImage . This function loads the image of your choice into your program's memory. You must load an image before you can display it or manipulate it in your program. LoadImage is defined as this:
LoadImage(filename$)
Table 5.4 examines LoadImage's parameter. To load an image, just put the filename of the image in for filename$ (make sure the filename is in quotes), and assign it to a variable, like this:
Parameter | Description |
---|---|
filename$ | The path of the image |
Global playerimage = LoadImage("playerimage.bmp")
NOTE
Why .bmp?
Unfortunately, the demo version of Blitz Basic only allows you to use bitmap files for image processing. This means that you can't just open some image off your computer and use it, unless it has a .bmp extension. However, there is a simple way around this problem. Just take the jpeg, gif, or png file, and open it in Microsoft Paint or in Paint Shop Pro (which is included on the CD). Then, open the file, click Save As, and convert to a bitmap!
NOTE
Check out what I set the filename variable as. Making the filename just the name of the file (without adding any path info ) will only work if the image is in the same directory as the game. If not, you may need to include your drive information. It might look something like this:
Playerimage = LoadImage("c:\windows\desktop\playerimage.bmp")
Even so, I suggest you keep all of your images in the same folder as the game because if you ever decide to distribute your game, the game won't work on other computers unless the user puts the images in the EXACT same folder as yours.
I usually name my image variable in such a way that I can easily see that it's an image. This means I begin my image names with its actual job (player in playerimage.bmp) and suffix it with "image."
The name that you assign to the loaded image is called a handle. Basically, a handle is just an identifier that refers to an image in memory, like in Figure 5.7.
Okay, now that we've got this LoadImage stuff down, its time to actually draw it!
It is pretty easy to guess what this function does: it draws images! Table 5.5 examines each parameter. Let's start off with the declaration.
Name | Description |
---|---|
handle | The variable which holds the image |
x | The drawn image's x coordinate |
y | The drawn image's y coordinate |
[frame] | Advanced, leave as 0 |
DrawImage handle,x,y,[frame]
DrawImage has a couple of parameters, so let's move on to a discussion of the handle variables .
This is a pretty easy-to-understand parameter. Remember when you loaded an image like this?
playerimage = LoadImage("player.bmp")
Well, the handle is playerimage . So, when sending parameters to DrawImage , use the image handle as the DrawImage handle.
The x and y parameters work just like most x and y coordinates in Blitz Basic. Using DrawImage , your selected image is drawn at the x and y coordinates, as shown in Figure 5.8. Its top-left corner is located at the given x and y values. However, there is a way to center the image so that the image's center is located at x,y.
Very often, you will want to center the image. This is most useful when rotating images because rotating images around the top-left corner looks bad (not to mention trippy ) due to the fact that you would expect images to rotate around their center. Check out demo05-01.exe to see how an image looks when it is rotated around the top-left corner.
NOTE
What does "" mean? means "or." When I say AutoMidHandle truefalse , I mean AutoMidHandle can use either true or false .
Although actual rotation is a more advanced technique and will be explained in a later chapter, I am using it to illustrate the use of placing the x and y values in the center of the image. The actual function is called AutoMidHandle and is declared like this:
AutoMidHandle truefalse
To use this function and place the x and y values in the center of the image, call AutoMidHandle with the parameter true , like this:
AutoMidHandle true
Easy, huh? And to set the x and y location back to the top left, just call AutoMidHandle , like this:
AutoMidHandle false
Table 5.6 details the parameters, and Figure 5.9 shows how demo05-02.bb, which uses AutoMidHandle true, works. Look at the difference between Figures 5.8 and 5.9. In 5.8, you can see how the x and y coordinates are located at the top-left corner of the image. On 5.9, the x and y coordinates are in the center of the image. Try running demo05-02.bb and watch how it rotates from the center instead of from the left corner, as in demo05-01.bb.
Name | Description |
---|---|
true | Places the x and y coordinates in the center of the image. |
false | Places the coordinates at the top-left corner of the image. |
Make absolutely sure that you place AutoMidHandle True before you load the image, otherwise the function won't work.
By the way, there is another function called MidHandle that is a lot like AutoMidHandle , except that it doesn't set the x and y coordinates to the center of all of the images. It only sets the x and y coordinates to the center of an image you choose. It is declared like this:
MidHandle image
The image handle you pass it will be reset to the center of the image. Use this if you only want one image handle to be in the center of the image, rather than all of them.
Okay, this command is very advanced. [Frame] allows you to draw images that are animated. It is unimportant right now, but we will be going over using animated images very soon!
This function is pretty cool. It allows you to create an image that looks like whatever you want, and use it just like a loaded image. For example, say you wanted to create an image with 100 dots on it. First, call the CreateImage function, which has a declaration like this:
CreateImage(width, height, [frames])
Width and height explain how big the image is; [frame] is used with animated images and should be set to 0 for now. To create the image, call CreateImage like this:
dotfieldimage = CreateImage(100,100,0)
Okay, you now have the handle to the image. Now, you have to populate the field with dots. The following is the full source for the program, which can also be found on the CD as demo05-03.bb:
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ; demo05-03.bb;;;;;;;;;;;;;;;;;;;;; ; By Maneesh Sethi;;;;;;;;;;;;;;;;; ; Creates an image and displays it! ; No input parameters required;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;INITIALIZATION ;Set up the graphics Graphics 640,480 ;Seed the Random Generator SeedRnd MilliSecs() ;CONSTANTS ;The length of each block Const LENGTH = 100 ;The height of each block Const HEIGHT = 100 ;The amount of dots in each block Const DOTS = 100 ;END CONSTANTS ;IMAGES ;Create the dotfield image dotfieldimage = CreateImage(LENGTH,HEIGHT) ;END IMAGES ;For each dot, draw a random dot at a random location For loop = 0 To DOTS ;For every star ;draw only on created image SetBuffer ImageBuffer(dotfieldimage) ;Plot the dot Plot Rnd(LENGTH), Rnd(HEIGHT) Next ;Set buffer back to normal SetBuffer FrontBuffer() ;END INITIALIZATION ;MAIN LOOP ;Tile the image until the user quits (presses ESC) While (Not KeyDown(1)) TileImage dotfieldimage Wend ;END MAIN LOOP
Figure 5.10 shows the created dot field.
There are a few new functions introduced in this program, and I'll go over them now. The first new function is ImageBuffer() .
ImageBuffer() acts a lot like BackBuffer() . You will learn how BackBuffer() allows you to draw on the back buffer instead of the front buffer, so that you can flip the buffers and create animation. Well, ImageBuffer() is just like BackBuffer() , but instead of drawing on a buffer, you are drawing on an image. ImageBuffer() is declared as this:
ImageBuffer(handle, [frame])
where handle is the handle of the selected image and [frame] is the chosen frame to draw on (leave as 0 for now). Drawing on an image buffer is a lot like Figure 5.11. As you can see, calling SetBuffer ImageBuffer(dotfieldimage) allows you to extract the image from the program and only draw on that. Then, when you finish, you call the SetBuffer function again. In this program, I used SetBuffer FrontBuffer() , only because there is no page flipping; however, in most games use SetBuffer BackBuffer() . Table 5.7 details ImageBuffer 's parameters.
Name | Description |
---|---|
handle | The handle of the selected image |
[frame] | The chosen frame to draw on, leave as 0 for now |
The next function introduced is TileImage() . TileImage() is declared like this:
TileImage handle, [x], [y], [frame]
TileImage works like this: it takes an image you give it, and it places copies of it all across the programming board. Think of it like a chess boardthere are only two images on a chessboard, black and white. But these two images are tiled over and over until the entire board is filled with black and white tiles. See Figure 5.12 for a visual aid to tiling, and Table 5.8 for a list of each parameter.
Name | Description |
---|---|
handle | The image you wish to tile |
[x] | The starting x coordinate of the tiled image; 0 by default |
[y] | The starting y coordinate of the tiled image; 0 by default |
[frame] | The chosen frame to tile; 0 by default |
To tile an image, call TileImage with the handle of an image you wish to tile. Blitz Basic will take care of the rest. By the way, in later chapters, you will learn how to move the tiled field up and down to simulate movement.
Alright, the next function I want to go over is called MaskImage() . MaskImage() is defined like this.
MaskImage handle, red, green, blue
MaskImage() allows you to define a color of your image as transparent. What does that mean? Let me show you.
When you draw or create an image, you always have a border that is not part of the image. See Figure 5.13 for a description of the border. As you can see, the outer part of the image is not used, and should be discarded. You don't want the border to be shown, like in Figure 5.14, do you?
NOTE
Because black is automatically masked by default, the image in Figure 5.14 does not have a purely black border. I added a tiny amount of blue to the image so that the background wouldn't be masked. The RGB value of this image's background is 0,0,10.
Calling MaskImage() can get rid of that border for you. Table 5.9 explains each parameter. Because the RGB value of this background is 0,0,10, call the MaskImage() function with the correct parameters.
Name | Description |
---|---|
handle | The image you wish to mask |
red | The red value of the mask |
green | The green value of the mask |
blue | The blue value of the mask |
The full program is detailed next: ;;;;;;;;;;;;;;;;;;;;;; ;demo05-05.bb ;By Maneesh Sethi ;Demonstrates the use of masking ;No Input Parameters required ;;;;;;;;;;;;;;;;;;;;;; ;Initialize graphics Graphics 640,480 ;Load Background lilliesimage = LoadImage("lillies.bmp") ;Draw background DrawImage lilliesimage,0,0 ;Load the frog frogimage = LoadImage("frog.bmp") ;Center the frog MidHandle frogimage ;Mask the Frog Image MaskImage frogimage,0,0,10 ;Draw it in the center DrawImage frogimage,320,240 ;Wait for user to press a button WaitKey
Figure 5.15 is a picture of this program. Beautiful, isn't it? It looks as if the frog is actually part of the image! On the CD, Demo05-04.bb is a program without masking, and demo05-05.bb is the same program with masking.
One thing to note: an RGB value of 0,0,0 is default. 0,0,0 is the color of black. This means that if your image is drawn with a black border, it will automatically be masked. In other words, try to make all your images have a black background so you don't need to worry about masking images.
[ LiB ] |