Other than writing a slot machine program which would pay me automatically from Bank of America and ignore any losses, I cannot think of many things which are more fun than adding images to my JB programs. For those of you with little experience adding sprites to your code, check out the wonderful articles in the LB Newsletters at http://babek.info/libertybasicfiles/lbnews/nlindex.txt and download the archive file to get the code and images for each example.

Sprites are not the only images which can be included with your JB programs, any BMP image can be used. If you have a little experience editing images, you can resize, crop, and convert the image to a different format. The methods will vary depending upon which image editor you prefer, but they are not difficult to learn.

Do you have to resize an image to use it in a graphics window or graphicbox? No, you don't. You can make your window or graphicbox any size which suits you, but we often want to reduce the size of the image file. JB supports only BMP images and seems to prefer 24-bit color the same way some people prefer Pearl Jam to Rod Stewart.

Your BMP image can be larger (much larger!) than your graphicbox and can be positioned when you write the program code. Before you can use an image in your program, it must first be loaded into JB with the following command:

 

LOADBMP "workingName", "fileName.bmp"

The workingName is an alias you will use while working with this image. The fileName.bmp is the name of your image file. Image files do not have to be located in the same folder as your program, providing you specify the full path to the image. For most uses, you will want to have the image in your program folder.

The syntax to display an image is:

PRINT #handle.ext, "down"

PRINT #handle.ext, "drawbmp name x y"

Graphics will not be displayed until you first put the pen down. When you issue the "drawbmp name x y" command, the image will be displayed x pixels right and y pixels down from the upper-left corner of the window or graphicbox you are using as a container. You can also write code to move the display by substituting variables for x and y, but you must preserve the spacing of the parameters.

PRINT #handle.ext, "drawbmp name "; x; " " ; y

The variables must be outside the quotation marks. We have 3 demos here to show how these variables can be used.

'DEMO-1 for Images

NOMAINWIN



WindowWidth=200

WindowHeight=200

UpperLeftX=INT(DisplayWidth-WindowWidth)/2

UpperLeftY=INT(DisplayHeight-WindowHeight)/2

LOADBMP "splash", "JB-splash.bmp"

GRAPHICBOX #1.gbx, 6, 10, 180, 140

BUTTON #1.btn, "CLOSE", [quit], UL, 80, 153, 40, 20

OPEN "My Picture Window" FOR window as #1

PRINT #1, "trapclose [quit]"

PRINT #1.gbx, "down"

FOR y=255 to -300 step -1  'Begin with image off-screen, bottom.

 TIMER 10, [pause]

 WAIT

 [pause]

 TIMER 0

 PRINT #1.gbx, "discard"

'Tell the program "what" to print, and "where" to print.

'The syntax is "PRINT #handle.ext, "drawbmp name x y"

'In this example, we are changing the horizontal origin (y) with each 'pass through the loop.

PRINT #1.gbx, "drawbmp splash 6 "; y  'Reposition the image

'Tell the user the print routine has ended.

PRINT #1.gbx, "font arial 14"

PRINT #1.gbx, "color RED"

PRINT #1.gbx, "place 10 50"

PRINT #1.gbx, "The demo"

PRINT #1.gbx, " has ended."

PRINT #1.gbx, " Click CLOSE."

WAIT

[quit]

 UNLOADBMP "splash"

 CLOSE #1

 END

This demo begins with the image well below the graphicbox, and then scrolls it to the top 1 pixel at a time with each pass through the FOR/NEXT loop. The graphicbox is 180 pixels wide and 140 pixels high, while the image is 168 pixels wide and 252 pixels high. Clearly the image is larger than the graphic box, but we can use the graphicbox in a manner similar to a "portrait mask" and anything inside the mask will be visible. In your [quit] routine, be sure to issue the UNLOADBMP command to make sure all files are properly closed.

Because setting up the window and graphicbox is identical in all three demos, I will insert only the code used to change the display in the next two demos. In each program, the filename of the image is different, but the workingName is "splash". You don't have to remember this, but it is a useful technique to reuse code with different images.

'DEMO-2 for Images

DO

 TIMER 10, [pause]

 WAIT

 [pause]

 TIMER 0

 x=x-1  'Move the image 1 pixel left with each pass.

 PRINT #1.gbx, "discard"

 PRINT #1.gbx, "drawbmp splash "; x; " 20"

LOOP UNTIL x=-200

This demo begins with the image off-screen, right, and moves the image left to right across the graphicbox by 1 pixel with each pass through the DO/LOOP. The image is actually much smaller than the graphicbox, but is positioned by selecting the appropriate values for x and y.

'DEMO-3 for Images

y=-250  'Position the image off-screen, top.

WHILE y<>100

 TIMER 25, [pause]

 WAIT

 [pause]

 TIMER 0

 y=y+1  'Move the image 1 pixel down with each pass.

 PRINT #1.gbx, "discard"

 PRINT #1.gbx, "drawbmp splash 10 ";y

WEND

You didn't think I would exit this tutorial without a little glory for myself, did you? Punky-Doodle and I spent six years retired in Mexico, and took this Valentine photo at the beach one evening. It was only when I wanted reliable Internet service that we moved back to the states.

Use your favorite image editing program to edit and/or resize your JPG, GIF, and BMP image files and save them in BMP format. Put all images needed into the same folder as your program and ZIP the folder when sharing or distributing your program.

Don't be afraid to experiment with different size images, or changing the x and y parameters to position your image. As you saw above, any loop can be used to add movement to your images. Working with images is fun, you won't smoke your computer just because you changed a line of code!