learn

Making Tron

Difficulty: Easy

Download Tron source code

Tron screenshot
Click to enlarge

Introduction

This tutorial will show you how to make the classic light bike racing game Tron. This game is very simple and features only line drawing routines and reading of the keyboard.

To get the best from this tutorial it is recommended that you've ran through at least the programming tutorial in the learning zone, so you understand the basics of programming.

Steps to Making Tron

  1. Create a project file
  2. Set the game up
  3. Read the players' input
  4. Move player 1 and check for collisions
  5. Move player 2 and check for collisions
  6. Increase the game speed
  7. Declare the winner
  8. The collision checking procedure

Create a project file

Launch Hieroglyph and select "New..." from the "File" menu. Name your file and save it.

You will now be presented with the info screen, enter "Tron" as the name of your program, you need not set the creator code for this project.

Set the game up

Goto the code section. The first thing we need to do is switch into graphics mode, this example will play tron at a 640x480 resolution. You can use a higher resolution if you want. Enter the following:

graphics mode 640,480
set pen colour white
frame rect 0,0 to 640,480
hide mouse

That switches res and frames the screen with a white border. Next we need to declare some variables used in the main loop:

' directions stored in the player direction variables
' 1 = up
' 2 = left
' 3 = down
' 4 = right
int    player1Dir=1,player2Dir=1
float  speed=1.0    ' this is the speed the bikes move at, up it for fun!
float  player1x=150,player1y=400,player2x=490,player2y=400   ' location of players
float  newx,newy,player1Speed,player2Speed
int    winner=0     ' player who has won - keep playing while this is 0!

The player1Dir and player2Dir variables are used to record which direction the players are currently headed in. As can be seen from the rem, each direction has been assigned a number. Both players initially start heading up the screen. Both players have variables defined for tracking their locations and speeds. The 'winner' variable is used to record which player has won. While it is 0 the game will keep playing.

Read the players' input

Now we enter into the main loop of the game. The main loop must read the players input, move the bikes, draw lines to show the bikes' paths and check if the lines have hit each other. The following code is used to read the keyboard and alter the player direction variables:

' main loop
repeat
   ' read player 1 input
   player1Speed=speed
   if pressed(13)       ' w = up
      if player1Dir <> 3 then player1Dir=1
   else if pressed (1)  ' s = down
      if player1Dir <> 1 then player1Dir=3
   else if pressed (0)  ' a = left
      if player1Dir <> 4 then player1Dir=2
   else if pressed (2)  ' d = right
      if player1Dir <> 2 then player1Dir=4
   else if pressed (56) ' left shift = turbo
      player1Speed=speed*2
   end if

   ' read player 2 input
   player2Speed=speed
   if pressed(35)       ' p = up
      if player2Dir <> 3 then player2Dir=1
   else if pressed (41) ' ; = down
      if player2Dir <> 1 then player2Dir=3
   else if pressed (37) ' l = left
      if player2Dir <> 4 then player2Dir=2
   else if pressed (39) ' ' = right
      if player2Dir <> 2 then player2Dir=4
   else if pressed (36) ' enter = turbo
      player2Speed=speed*2
   end if

The repeat statement is the start of the main game loop, it will be completed by a "until winner > 0" statement later on to form the main game loop. There are two section of code here, one to read player 1's input and one to read player 2's input. They are fairly similar. Each resets the player's speed and then tests each of the player's controls in turn. If the control is pressed then a new direction is assigned. The players are not permitted to turn back on themselves. If the player is holding down turbo then their speed is doubled.

The keys can be reconfigured by changing which keys are tested by the 'pressed()' functions. You can find a list of keycodes in TNT Basic's online help here.

Move player 1 and check for collisions

Now that the direction of travel has been set up for each player, we need to move the player in the appropriate direction, draw a line to their new location and then check if they've crashed. If they've crashed then it's game over.

Enter the following code:

' move player 1
if player1Dir=1      ' up
   newX=player1X
   newY=player1Y-player1Speed
else if player1Dir=2 ' left
   newX=player1X-player1Speed
   newY=player1Y
else if player1Dir=3 ' down
   newX=player1X
   newY=player1Y+player1Speed
else if player1Dir=4 ' right
   newX=player1X+player1Speed
   newY=player1Y
end if

This code works out what the new location of the player will be depending on the direction being travelled in. It stores the new locations in the variables 'newX' and 'newY'.

' see if player 1 has crashed, if so set the winner to player 2
CheckForCollisions(player1X,player1Y,newX,newY)
if result int then winner=2

This code calls a procedure to check if there is another line or a wall between where the player was and their new location. If there is then the procedure returns a value of true in the 'result int' function. If this is the case then the winner is set to the other player. The CheckForCollisions() procedure is declared later on.

Assuming the player has not crashed, the next task is to draw a line from where they were to their new location. This is accomplished with the following code.

' draw player 1
set pen colour red
line player1X,player1Y to newX,newY
player1x=newX
player1y=newy

Move player 2 and check for collisions

Exactly the same thing must now be done for the other player. Enter the following code:

' move player 2
if player2Dir=1		    ' up
   newX=player2X
   newY=player2Y-player2Speed
else if player2Dir=2 ' left
   newX=player2X-player2Speed
   newY=player2Y
else if player2Dir=3 ' down
   newX=player2X
   newY=player2Y+player2Speed
else if player2Dir=4 ' right
   newX=player2X+player2Speed
   newY=player2Y
end if

' see if player 2 has crashed, if so then set the winner to 1
CheckForCollisions(player2X,player2Y,newX,newY)
if result int then winner=1

' draw player 2
set pen colour blue
line player2X,player2Y to newX,newY
player2x=newX
player2y=newy

Increase the game speed

As the game progresses the arena will gradually fill up with lines, however we also want the game to speed up the longer they play. Increase the speed as so:

speed=speed+0.001	' add more than this to make the game speed up quicker!

Finally draw the frame to the screen and close the main loop:

   draw frame	
until winner>0

Declare the winner

The main loop terminates when the 'winner' variable becomes more than zero. Now we need to declare the winner by printing who won on the screen:

' print who won on the screen
if winner = 1
   set pen colour red
   draw text 270,100,"PLAYER 1 WINS!"
else
   set pen colour blue
   draw text 270,100,"PLAYER 2 WINS!"
end if

draw frame
wait mouse click

The Collision Checking Procedure

This procedure is used for checking for a collision between the player's current position and the position they're moving to. It checks the colour of every pixel between two points to see if they're all black. If they are all black then the path was clear and the procedure returns false. If one of them was not black then the player has crashed and it returns true.

The procedure takes four parameters: x1, y1, x2 and y2. These are the two coordinates that define the path that needs checking. x1 and y1 represent the player's current position, however we know that that point will not be black because it will have been coloured by the player already. So we can allow one pixel between the points to be non black (ie the player's start location) but no more. Enter the following code:

procedure CheckForCollisions(int x1,int y1,int x2,int y2)
   int		result=0	' num collisions
	
   ' we expect x1,y1 to be coloured already because its where the player is already. So
   ' if we count how many pixels are non-black between the two points we expect there to
   ' be no more than 1 (the player's current location). If there are more than one then
   ' the player has hit either a wall or a light trail.
   int		x,y,xstep=1,ystep=1
	
   ' the loops loop from x1 to x2 and y1 to y2. If y1 is more than y2 or x1 is more than
   ' x2 we need to run the loops backwards by having a step of -1
   if x1>x2 then xstep=-1
   if y1>y2 then ystep=-1
	
   for x=x1 to x2 step xstep
      for y=y1 to y2 step ystep
	         if pixel colour (x,y)
            result=result+1
            if result>1 then break 2
          end if
      next y
   next x	
end proc (result > 1)

The end proc statement may look a little odd. What it is doing is returning a value of true if and only if result is more than 1. Otherwise it will return false.

This completes this Game-In-60 tutorial, you've just written Tron in TNT Basic, congratulations!

Of course you needn't stop there, you can always go onto improve this version of Tron to have even more features. Some example improvements could be:

  • To start the game again after it finishes, and keep track of what the scores are between the players
  • To add scrolling and have larger arenas
  • To add networking and allow more than two players to join in

Good luck and have fun with TNT Basic!