Tutorial: How to write games

Go to page << 1 2 3 4 5 6 7 8 9 10 11 >>

Drawing text on the screen

We've covered a fair bit of theory so far, and you may now be scratching your head and wondering how you're going to hold it all in. Again, don't worry! The best way to pick these things up is from examples, and we'll have plenty of those.

For now, let's move on to something a little more visual, where we can see what's going on.
We're going to draw a scene from a space invaders like game.
Just be a single snapshot for now as we will need to learn a few more things before we can turn it into something playable.

Here's the program:

color (255, 255, 255)
locate 0, 0: print "Score=1040"
locate 30, 0: print "Lives=3"
color (255, 50, 50)
locate 11, 12: print ">O<"
color (150, 150, 150)
locate 17, 23: print "<!>"
color (255, 255, 50)
locate 15, 17: print "!"

When you run this, you should see something that looks a bit like a scene from a space invaders type of game.
It has the score and lives displayed at the top, some sort of red space invader thing in the middle, the player's gun turret down the bottom in gray, and a yellow bullet presumably halfway through flying up the screen.
Okay, it's all just coloured text characters for now, but it will serve until we learn about sprites and other forms of animation.

We have used three different commands:

You can see that we've used the colon (:) to separate the locate command from the print command.
We must use a colon if we want to place more than one command on one line, so that Basic4GL knows where the first one stops, and the second one begins.

Adding animation

Believe it or not, we are going to turn the previous program into a full working game. So don't forget to save it before moving on.
First though, we are going to learn how animate.
The basic principles of computer animation are the same as those of cartoon animation. It can be broken down into steps:

  1. You display a picture.
  2. Leave it on the screen for a short amount of time
  3. Then replace it with another picture which has changed slightly from the first.
  4. Go back to step 2

The brain interprets the continually changing still images as movement, and we have animation.

Let's illustrate with an example:

Sleep (2000)
cls:locate 10, 12: print "->": Sleep (200)
cls:locate 11, 12: print "->": Sleep (200)
cls:locate 12, 12: print "->": Sleep (200)
cls:locate 13, 12: print "->": Sleep (200)
cls:locate 14, 12: print "->": Sleep (200)

This is a very short animation. It simply moves "->" along the screen a few times and stops.
The new commands are:

As you can see, we display a picture (the "->") on the screen, leave it for a short amout of time, then replace it with another picture (the "->" slightly to the right of where it was). We do this five times, each time changing the position of the "->" by changing the column number in the locate command. This gives us our very simple animation.

Note: I put the "Sleep (2000)" line at the top to add a 2 second delay to the program before it started. This gives the monitor time to switch resolutions and get setup before the animation starts.

Improving the animation

The biggest problem with that animation is that we had to write a line of code for each "frame" of the animation.
In this case, it wasn't so bad, as we only had 5 frames, and each frame is very simple. But if you consider that even a simple 2D computer game can display several thousand frames, with dozens of objects moving around in each, then it becomes clear that we need a better way of doing things than writing one line of code for each frame!

One better approach is to use an "animation loop".
We will demonstrate this by extending the animation to move the "->" all the way from the left hand side of the screen to the right hand side.

Here's the program:

Sleep (2000)
dim x
for x = 0 to 38
    cls
    locate x, 12
    print "->"
    Sleep (75)
next

As you can see, this program is a lot shorter than 39 lines, but it still displays 39 frames of animation!
Let's examine what it's doing:

We've introduced a variable x, which we are using to store the column of the "->"s position. Notice that we are now positioning the cursor with "locate x, 12". That is we are calling the locate command, and passing x as the first parameter (the column number) and 12 as the second (the row number).

Next, we've created a for..next "loop".
A "loop" is a set of commands that get run more than once. In our case, this is all the commands between the for line and the next line.
The for..next loop is a particular type of loop. It has a loop variable, which counts from one number to another number:

for x = 0 to 38

In this case, the loop variable is x. It will count from 0 to 38 (inclusive). And for each time, it will run the contents of the loop.

So the first time it is effectively running:

x = 0
cls
locate x, 12
print "->"
Sleep (75)

And the second time:

x = 1
cls
locate x, 12
print "->"
Sleep (75)

And so on, up until the last time, where it runs:

x = 38
cls
locate x, 12
print "->"
Sleep (75)

And then it's finished.
So each time it runs the locate command, the cursor will end up one to the right of where it was last time, and the arrow will be drawn in a slightly different place.

As you can see, the for..next loop is very useful, and makes what would otherwise have been a long repeditive program very small and compact.
Here's some more for..next examples:

dim i
for i = 1 to 10
    printr i
next

 

dim i 
for i = 0 to 9
    printr 10 - i
    Sleep (1000)
next
print "Blastoff!"

 

dim i
printr "12 times table"
for i = 1 to 12
    printr i + " x 12 = " + (i * 12)
next
Go to page << 1 2 3 4 5 6 7 8 9 10 11 >>