Lab 4
Using Blitz Graphics
Pre-requisites
Read Chapter 5
Objectives
Creating a graphics window
Loading, drawing, and using images
Color
Vocabulary
Bitmap Image
Handle
Tile
Mask
Page Flipping
Frame
Buffer
Discussion and Procedure
You can start with your own StarWars2.bb from last week (rename it first to MyStarWars3.bb and copy
to Lec4 folder), or use the StarWars3.bb file already in the folder.
First, Fix the KeyCodes. After setting up image strings for the ships, add more constants near top of file:
Const TIE$="<-o->", XWING$=">-o-<"
Const UPKEY=200, LEFTKEY=203, RIGHTKEY=205, DOWNKEY=208, SPACE=57 Add
Then fix arrow handlers
if KeyDown(200)

(use KeyDown instead of KeyHit)
if KeyDown (UPKEY)
Because we will generate random numbers, add this line
etc.
SeedRnd MilliSecs() at top of file
Part 1. Capturing and Pre-Processing Images
1. Capture images on google images. Thumbnails for ships, etc. and Full Size for backgrounds
2. Convert .JPG to .BMP using MS PAINT.
3. Make background black using MS PAINT or other product.
1
Part 2. Creating a Graphics Window and Handling Images
4. Change text window to graphics by creating a graphics window:
Graphics 800, 600
color depth and mode—use default
5. Load images
Delete
Const TIE$="<-o->", XWING$=">-o-<"
And, after the line defining all your constants, add
Const UPKEY=200, LEFTKEY=203, RIGHTKEY=205, DOWNKEY=208, SPACE=57
Global xwingimg=LoadImage("Xwing.bmp")
Global dstarimg=LoadImage("DeathTrench.bmp")
 add (spell check!)
 add
Notes
A) To show the effect of non-masked images, we are using ones with non-black backgrounds
B) Right after these lines, load Tie4.bmp into tieimg
6. DELETE ALL REFERENCE TO shipstring$
including in Type Ship
Type Ship
Field x,y ;the position of the ship
Field hitpoints ;how many hits left
Field shipstring$ ;what the ship looks like
End Type
…
…
player\shipstring = XWING$
…
…
enemy\shipstring = TIE$
delete
delete
delete
2
7. Modify Display function to Draw the Images
Change display function
From:
Function Display(aShip.ship)
Text aShip\x, aShip\y, aShip\shipstring$
End Function
To:
Function Display()
DrawImage xwingimg, player\x, player\y
DrawImage tieimg, enemy\x, enemy\y
End Function
Also, modify the function call in the Main loop:
From
While Not KeyHit(1)
Display(player)
Display(enemy)
Delay 100
To:
While Not KeyHit(1)
Display()
Delay 100
8. Run the program, you should see Xwing and Tie fighter on screen
Notes
A) Use arrow to Move X-wing up into Tie—Tie is on top. It's background covers X-wing too
B) Reverse order of drawimage commands in Display so tieimg is first
C) Add another command in the Display function to draw the death star image at position 0,0
before the other two.
D) Switch to ship images that have been blacked out in background. At top of program, load these
images instead: Tie4black.bmp and Xwingblack.bmp. You can mask other colors using
MaskImage command, see p128
3
Part 3. Color and Lasers
The Color command takes three integers to set the red, green, blue proportions of all future lines drawn
Color 255, 0, 0
makes all future lines drawn pure red.
The line command draws a line from one point to another using the current color.
Line 10, 50 , 100, 200
draws a line from (10,50) to (100, 200)
9. Put these two together and you can make a new function to check and draw a laser beam on the
screen. This should go at the bottom of your program:
Function CheckXwingLaser()
If KeyDown(SPACE) Then
Color 255, 0, 0
; red = 255, 0, 0
Line player\x, player\y, player\x, player\y-25
Color 255,255,255
; white= 255,255,255
EndIf
End Function
black=
0,0,0
This draws a line from the player's current x/y position (upper left corner of the image) to a spot 25
pixels directly above.
You must add a function call in your main while loop to activate this function:
While Not KeyHit(1)
Display()
CheckXWingLaser( )
Delay 100
…
 add
Notes
A) Try changing the color of the laser beam
use 255, 0, 255
or 0,255,0 etc
B) You can align the laser beam (and all graphics commands) to the center of an image by adding
this line at the top of your program right before you load in the images:
AutoMidHandle True
 add
Global xwingimg=LoadImage("Xwing.bmp")
Global dstarimg=LoadImage("DeathTrench.bmp")
…
Run the program now and everything is displayed with x,y at center (now it skews the positioning
of the death star background image)
4
C) Change the positioning of the death star image so you place it in the center of the screen
Function Display()
DrawImage dstarimg, 0, 0
 change 0,0 to center pt of your screen
D) Now, using offsets from player\x and player\y, try to make 2 laser beams come out of the wing
tips and focus on a point about 75 pixels above the Xwing's center. Spend some time adjusting
the offsets – modify the line command already inside CheckXwingLaser() function. Then add a
second one. One beam will be something like this ( but needs work):
Line player\x-25, player\y-25, player\x, player\y-50
E) You can even draw a dot where those beams overlap using the oval command inside
CheckXwingLaser
Oval x,y,width,height[,solid]
(passing 1 to solid means it will be solid)
Oval player\x, player\y-75, 5, 5, 1
 add after line cmds in Display
E) Challenge: go back and use the distance and collision functions from last week's lab (already
included at the bottom of the original StarWars2 file for this lab). Inside CheckXwingLaser after
drawing the laser call the collision function using the Tie fighter's x,y and the laser dot's x,y
If there is a collision, then return 1 else return 0. Then in the main loop, if CheckXwingLaser clear
the screen, display congratulations, wait for a key to be pressed, and then quit.
Part 4. Would you like stars instead?
We can borrow the code from demo GPFK5-03 to change the background from the death star to starry
space. You can read pages 124 – 128 for more info.
10. Save StarWars3 as a new version, StarWars4
11. In the same editor, open GPFK5-03.bb and run it. This generates a small image of random stars,
then tiles it to create a larger background (see p124 – 128)
5
12. In file GPFK5-03.bb, copy all the code from ;For each dot, draw… to
SetBuffer FrontBuffer()
and past it into a new function you create at the bottom of the
StarWars4 file, called MakeBackground( )
Function MakeBackground()
 create at bottom of file
;For each dot, draw a random dot at a random location
 copy from
For loop = 0 To DOTS ;For every star
 demo GPFK5-03.bb
;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 Function
THEN create another image handle after your existing image handles for the dot field image, and call
the function you just created:
AutoMidHandle True
Global tieimg=LoadImage("Tie4black.bmp")
Global xwingimg=LoadImage("Xwingblack.bmp")
Global dstarimg=LoadImage("DeathTrench.bmp")
Global dotfieldimage = CreateImage(LENGTH,HEIGHT)
 add
MakeBackground()
 add
13. In the Display function, comment out the line that draws the death star image, then add a line
immediately below it that displays the dotfieldimage using the TileImage command
Function Display()
; DrawImage dstarimg, 400,300
TileImage dotfieldimage
…
add comment symbol (;) at start
 add
(rest of function unchanged)
Finally, add the definition of new constants right after the ones you’ve already defined (top of file)
Const UPKEY=200, LEFTKEY=203, RIGHTKEY=205, DOWNKEY=208, SPACE=57
Const LENGTH = 100, HEIGHT = 100, DOTS = 100
 add
Now run the program, you should have a starry background. Change DOTS to have more or less
stars. If you want to switch back to Death Star background, simply remove the comment (;) from the
DrawImage dstarimg command and add one in front of the TileImage command.
6
Part 5. Smoothing motion with Page flipping
Motion is rather jerky. To smooth and speed up, you should switch to the standard game technique of
page flipping described in chapter 6. Only 4 steps are required:
1) right after Graphics 800,600 command (see top of file) add SetBuffer BackBuffer()
2) at the bottom of the MakeBackground function change SetBuffer FrontBuffer() to
SetBuffer BackBuffer()
3) in main loop comment out the
Delay 100
command
4) in main loop add a
Flip command on a line right before the
(see chapter 6 for full explanation)
( put ; in front of line)
Cls command
7