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 constantsnear 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)  if KeyDown (UPKEY) etc.

(use KeyDown instead of KeyHit)

Because we will generate random numbers, add this line 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.

Part 2.Creating a Graphics Window and Handling Images

  1. Change text window to graphics by creating a graphics window:

Graphics 800, 600

color depth and mode—use default

  1. 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")  add (spell check!)

Global dstarimg=LoadImage("DeathTrench.bmp")  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

  1. 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 delete
End Type

…

…

player\shipstring = XWING$ delete

…

…

enemy\shipstring = TIE$ delete

  1. Modify Display function to Draw theImages

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

  1. 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

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)

  1. 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 black= 0,0,0

EndIf

End Function

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( )  add

Delay 100
…

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)

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.

  1. Save StarWars3 as a new version, StarWars4
  2. 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)

  1. 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

  1. 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 add comment symbol (;) at start

TileImage dotfieldimage  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.

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 ( put ; in front of line)

4) in main loop add a Flip command on a line right before the Cls command
(see chapter 6 for full explanation)

1