Blitz2D Newbies: Creating A Platform Game by Sam Schoenholz

Creating A Platformer Game

Preface

This tutorial will take you through all of the steps needed to create your own platformer game. This tutorial also assumes a basic knoledge of blitz, to the extent of arrays, a basic knoledge of types and a good grasp of 2D graphics. If you do not know the above you will still be able to follow the tutorial however it may take more time and effort. For those of you reading this who are reletively advanced in blitz i will mark in italics the parts that are for newer users. Overall it took me 1 and a half hours to write the code for the tutorial and another 30 minuits to make the demo level that comes along with it. If their is anything you dont understand either post it in the boards or e-mail me at schoenhs at yahoo dot com. Finaly, this is my first tutorial so if theirs anything i should change or do better for next time please tell me :D.

The Features of the Game

The game that you will make will not be extremely complex but it will be easily expandible and have a couple of cool features, these are:
Loadable Levels
Scrolling(The Level can be bigger than the screen)
Full Collision Detection
One Simple Enemy
Two Layers

Throughout this tutorial i wil go through the code incrementaly showing you how each bit works etc...

The File Format

This section of the tutorial is going to cover the file format that i will be using to make the game, this file format has sort of evolved out of necesitty but it works quite well and can handle anything i would need in this example.
the file format is as follows
the first two variables will contain the size of the level, after this all of the variables are the tiles that the level will use. for example: if the number is a 5 then the program will draw whichever tile corrosponds to a five. there are some exceptions to this rule however, there will be the escape codes -1 -2 -3 -4 -5, -1 indicates the end of a line, -2 indicates the end of a section, -3 indicates the starting point for the player, -4 indicates the ending point for the player and -5 indicates the creation point of an enemy.
here is an example level:

I would seriously suggest making a level editor... it is very difficult to create levels, i may release another tutorial on how to make a level editor for this game but regardless you should.

The Game

The Main Game

Finally... here is the actual code for the game :)
The initialization for the game is relatively simple, it just defines some global variables to use sets up the graphics etc..

Graphics 640,480,32,1
SetBuffer BackBuffer() ; Turn Back Buffering On

Const EFAIL = 0 ;Our Escape Code when things did not go correctly
Const SOK = 1 ;Our Escape Code if everything worked

Type Enemy ;Our Enemy
	Field hEnemy;The handle to our enemies image
	Field x,y;Our enemies position
	Field dir;Our enemies direction
End Type

Global Gravity# = 0.2;Gravity To Make the Player Go Down
Global MapGFX = LoadAnimImage("land_tiles.tga",32,32,0,50);Land Tiles
Global PlayerGFX = LoadAnimImage("Player.bmp",32,32,0,7);PlayerTiles
Global MapSizeX = 0;Our Maps Width in Tiles
Global MapSizeY = 0;Our Maps Height in Tiles
Global ScreenRezX = 640;Our Screen Resolution X
Global ScreenRezY = 480;Our Screen Resolution Y
Global OffsetX = 0;Our XOffset
Global NewOffsetX = 0;Our Offset so that we can have a smooth transition
Global PlayerX = 0;Our Players Y Position
Global PlayerY = 0;Our Players Y Position
Global PlayerYVel# = 0;Our Players Y Velocity
Global PlayerAnimation = 5;Player Frame
Global PlayerSides = False ;Player Collision on the left and right
Global PlayerUp = False ;PlayerCollision on the Top
Global PlayerDown = False ;PlayerCollsions on the bottom
Global EndGFX = LoadImage("End.bmp")
Global EndX = 0 ;the levels end position
Global EndY = 0 ;the levels end position

MaskImage MapGFX,255,0,255;Make the part that is meant to be transparent transparent
Dim Map(2,0,0);Our Map, the reason for the size of the array is because we want to have two layers, one scenery and one Solid one
LoadLevel("test.lvl")

The first two lines of code just turn on graphics and turn on backbuffering. the third and fourth line are Escape codes, they are not much use in this game however if you were to expand upon it, it is good programing practice to use them ;)
Next is our defanition of an enemy, Our enemy is very stupid and so all that he can do is move in a direction until he hits something and turns around. therefore in our type the field hEnemy stores the image of our enemy. The fields x and y store the position of our enemy and finaly the variable dir stores the direction he is traveling on the X Axis.
The variable MapGFX is the variable which holds all of our tiles for our map, this is one of the most important variables in the game. The variable PlayerGFX is all of our players animations etc... Most of the other variables are self explanitory however a few need a bit of clarification, the variable OffsetX and NewOffsetX, these variables are used to make the level scroll, the point of having to is so that we can make smooth scrolling between them as i will show you later on. Other variables of interest are PlayerSides, PlayerUp and PlayerDown; these variables are used for collision. The MaskImage command is used to change the mask color on our level tiles from black to pink the command Dim Map(2,0,0) creates enough space for our map, the 2 at the begining is so we have enough space to hold both layers and the other two are zero because we we redimensionalize them once we have the size of our level. Finaly the command LoadLevel("test.lvl") calls the custom function to load our level, il go over this more when we get to the function calls.

The next section of code is the actual main section, the place in which all the main stuff takes place, so here it is then, like before, il go through it with you.

The above code is the code to scroll, early on i had thought that it would be pritty cool if, while the sceen was scrolling everything else was still moving, however in practice it wasnt fun so i decided to make everything freeze during the scroll. OK so the first two lines say that if the players position is more that 610 on the screen or less than 30 on the screen then add or subtract 100 from NewOffsetX. The next section of code is where it actually scrolls it, i am only going to analyse the first while loop because they are both almoast exactly the same just for different directions. So the first while loop is basicly saying that while NewOffsetX is not equel OffsetX then add 2 to OffsetX, then it applies the code Origin -OffsetX,0 to Apply the scrolling, it then draws everything, flips the buffer and then loops. This loop is basicly just the main loop without the user input.
this next section is the rest of the main loop, it is very important and handles everything from movement to user input to collision, so, without further adue here it is,

If PlayerCollisions()= True ;Preform Collisions if player got to exit point put the finishing text to "you win" and end
		finish$ = "YOU WIN"
		Exit
	EndIf 
	If KeyDown(203) And PlayerSides = False;If LeftKey is down and no collisions
		PlayerX = PlayerX-2 ;Move the player left
		PlayerAnimation = PlayerAnimation-1 ;Change the players animation State
		If PlayerAnimation<0 Then PlayerAnimation = 3 ;loop the animation
	EndIf
	If KeyDown(205) And PlayerSides = False;If RightKey is down and no collisions
		PlayerX = PlayerX+2 ;Move the player left
		PlayerAnimation = PlayerAnimation+1 ;Change the players animation State
		If PlayerAnimation>6 Then PlayerAnimation = 5 ;loop the animation
	EndIf
	If PlayerDown = True And PlayerYVel >0;The Player Hit the ground
		PlayerYVel = 0 ;The player has no Y axis movement
	EndIf 
	If KeyDown(200) And PlayerDown = True;If Upkey is hit and the player is on the ground
		PlayerYVel = -6;make the player jump
	EndIf
	
	If PlayerDown = False Or PlayerYVel<0 ;there were no below our character collisions
		PlayerY = PlayerY + PlayerYVel;move the player
		PlayerYVel = PlayerYVel + Gravity;Apply Gravity
	EndIf
	If UpdateEnemies() = False 
		finish$ = "YOU LOSE :("
		Exit ;if the player hit the enemy then exit the loop
	EndIf
	
        DrawImage PlayerGFX,PlayerX,PlayerY,PlayerAnimation	
	DrawEnemies
	DrawLevel 
	Flip
Wend

Basicly this code starts off with if PlayerCollisions() = True the PlayerCollisions is a function i made which checks for all possible collisions with the player, it will, as you will see later on will return true if the Player has reached the End point of the game if he has then it makes the string finish = to "you win". The next couple lines are quite simple, basicly if you press left or right and there are no collisions to either side of your player then it moves the player(right if you pressed the right key and left if you pressed the left key) it then increments the animation and if the animation has gone over the number of frames it loops it. The rest of the code is just jumping code, the first if statement is if the player has collided with the ground and the player was moving down, then it stops the player. The next if statement says that if the upkey has been clicked and the player is on the ground(prevents double jumps) then PlayerYVel = -6, and in concquence the player jumps. The Second from last if statement is basicly if the player is not on the ground or if the player is going up then it adds PlayerYVel to PlayerY(making him jump/fall) and finaly ading PlayerYVel + Gravity applying gravity to PlayerYVel. The final if statement is very simple, it calls a function called UpdateEnemies which returns false if your character hit an enemy otherwize it returns true, if the player has hit an enemy then it sets the variable finish$ to "You lose and exits the loop. The next couple lines just call functions to draw the world, the enemies and the player.

Here is Clean up phase, it is not very long and it is not very complicated so i will go over it quite quicly.

In three lines in this code it deletes the MapGFX, the PlayerGFX and the EndGFX. in the last four lines of code it loops through all of the enemies and deletes the image and then deletes the type itself.

The Functions

Here is the section where i show you how all of the functions work, this section is slightly more complex than the last one and if you did not understand it you should wait before continueing. Anyway, here is the first function and the longest it is the function that actually loads the level.

Function LoadLevel(filename$) ;Loads Our Level
	in = ReadFile(filename$);Open A File For Reading And Obtain a Handle to it
	If in = 0 Then Return EFAIL;if our file did not load then return a failure
	;Read Our MapX and MapY values
	MapSizeX = ReadInt(in) ;Get the X size of the map
	MapSizeY = ReadInt(in) ;Get the Y size of the map
	Dim Map(2,MapSizeX,MapSizeY);Re Dimensionalize our map with the size of the level
	
	;READ OUR SCENERY LEVEL
	r = 0;The FeedBack we get from our files
	x = 0
	y = 0 ;zero our position in the array
	While Not r = -2
		r = 0 ;ReZero our Feedback Variable
		While r>-1
			r = ReadInt(in)
			If r>=0 And r<=50 And x<MapSizeX And y<MapSizeY;if its within the range of our tiles
				Map(0,x,y) = r ;Assign the variable
			EndIf 
			x = x +1 ;increment our x position
		Wend
		x = 0;Zero our x position because we have just finished a line
		y = y +1;increment our y position
	Wend
	;READ OUR PHYSICAL LEVEL
	r = 0;The FeedBack we get from our files
	x = 0
	y = 0;zero our position in the array
	While Not r = -2
		r = 0 ;ReZero our Feedback Variable
		While r>-1
			r = ReadInt(in)
			If r>0 And r<=50 And x<MapSizeX And y<MapSizeY ;if its within the range of our tiles
				Map(1,x,y) = r ;Assign the variable
			EndIf 
			If r=-3 ;if we encounter a player creation code
				PlayerX = x*32;set player position
				PlayerY = y*32;set player position
				r = 0;reset the return variable so it doesnt exit the loop
			EndIf
			If r=-4 ;if we encounter an end point
				r = 0
				EndX = x*32
				EndY = y*32
			EndIf
			If r=-5 ;if we encounter an enemy creation point
				e.Enemy = New Enemy ;Create a new enemy
				e\hEnemy = LoadImage("Enemy.bmp") ;load his image
				e\x = x*32 ;set his x position
				e\y = y*32-10 ;set his y position
				e\dir = ReadInt(in) ;set his direction
				r= 0;reset the return variable so it doesnt exit the loop
			EndIf
			x = x +1 ;increment our x position
		Wend
		x = 0;Zero our x position because we have just finished a line
		y = y +1;increment our y position
	Wend
	
	CloseFile(in);we have finished with our file so we can close it
	Return SOK
End Function

This code is very well comented but i will go through it aswell. The begining of the code just Loading the file and if it failed return EFAIL, the next two lines read two integers from the file and assign them to MapSizeX and MapSizeY. The next part is very important, it loops until it encounters a -2 (the escape code remember) it then begins another loop looking for eithter -1 or -2, it then, reads from the file and if the returned numbers are within the number of tiles we have then it inserts it into map at the correct place. It then increments the x variable and ends the loop.
The Second Section is exactly the same as the first except it utilizes some of the escape codes, so if r=-3(our starting point escape code) then it sets the player position and then sets r back to 0 so that it does not exit the loop. the escape code -4 does the same thing but with the end position and finaly the -5 one creates a new enemy, loads the enemies image, sets his x and y position but then reads another integer to get his direction. once it is finished parcing the file it closes it and returns.

The next section is the drawing of the Map/Enemies, these are not very complex functions so i wont spend too long on them. Well here ya go.

The DrawLevel function simply loops through from 0 to the map's size drawing each tile with its correct frame(retrieved from Map) and thats about all it does, at the end of the function it draws the End graphic and its proper position. The DrawEnemies() function just loops through all of the enemies and draws them it to is not too complex a function...

The Next Section is more complex although not TOO complex, it deals with collisions between the Player and the World.

Function PlayerCollisions()
	;Reset the collisions variables
	PlayerUp = False
	PlayerSides = False
	PlayerDown = False
	;Start Collision Detection
	For x = 0 To MapSizeX
		For y = 0 To MapSizeY
			If Map(1,x,y)>0 ;if there is something occupying the current x,y position in the Map array
				If ImagesCollide(PlayerGFX,PlayerX+1,PlayerY,PlayerAnimation,MapGFX,x*32,y*32,Map(1,x,y)) Then PlayerSides = True ;IF the player collided with the current tile on his right
				If ImagesCollide(PlayerGFX,PlayerX-1,PlayerY,PlayerAnimation,MapGFX,x*32,y*32,Map(1,x,y)) Then PlayerSides = True ;IF the player collided with the current tile on his left
				If ImagesCollide(PlayerGFX,PlayerX,PlayerY+PlayerYVel,PlayerAnimation,MapGFX,x*32,y*32,Map(1,x,y)) Then PlayerDown = True;IF the player collided with the current tile below him
				If ImagesCollide(PlayerGFX,PlayerX,PlayerY-PlayerYVel,PlayerAnimation,MapGFX,x*32,y*32,Map(1,x,y)) Then PlayerUp = True;IF the player collided with the current tile Above Him
			EndIf
		Next
	Next
	If ImagesCollide(PlayerGFX,PlayerX,PlayerY,PlayerAnimation,EndGFX,EndX,EndY,0) Return True ;if the player collided with the ending point then return true
	Return False
End Function

At the begining of this function it resets all of the collisions from the previous frame, it then loops through each tile on the map and, if the tile is solid, it checks 4 image collides with it, one with the PlayerX+1 to see if there is anything to the right of it, then PlayerX-1 to see if there is anything on the left of it, then it does the same but up and down, PlayerY+1 for down and PlayerY-1 for up, during this time it sets the variables aproprietly. the end of this function checks the Player and the end position and if they collided it returns true but if they have not colided it returns false.

The final section to this part of the tutorial is are the collisions between the Enemy and the World and the Enemy and the Player.

This section of code opporates in much the same way as the last section, first it loops through all the tiles BUT then it loops through all of the enemies checking each one with the map. At the end of this function it checks each of the enemies against the player, if they have collided it returns false and if they havent it returns true.

Finally before the conclusion here is all of the Code in one place

;Graphics FROM http://home.cogeco.ca/~neilroy/free_gfx_1.html
Graphics 640,480,32,1
SetBuffer BackBuffer() ; Turn Back Buffering On

Const EFAIL = 0 ;Our Escape Code when things did not go correctly
Const SOK = 1 ;Our Escape Code if everything worked

Type Enemy ;Our Enemy
	Field hEnemy;The handle to our enemies image
	Field x,y;Our enemies position
	Field dir;Our enemies direction
End Type

LoadLevel("test.lvl")
While Not KeyDown(1)
	Cls
	 ;make sure that we can scroll the screen
	If PlayerX>OffsetX+610 Then NewOffsetX = NewOffsetX + 100 ;if our character comes near to the edge of the screen then scroll the environment
	If PlayerX<OffsetX+30 And OffsetX > 0 Then NewOffsetX = NewOffsetX - 100;if our character comes near to the edge of the screen then scroll the environment
	While NewOffsetX-OffsetX>0 ;While the newOffset is not equel to the old offset
		Cls
		OffsetX = OffsetX + 2;change the offset
		Origin -OffsetX,0;apply the changes
		DrawImage PlayerGFX,PlayerX,PlayerY,PlayerAnimation
		DrawEnemies
		DrawLevel
		Flip
	Wend
	;Preform Tweening
	While NewOffsetX-OffsetX<0 ;While the newOffset is not equel to the old offset 
		Cls 
		OffsetX = OffsetX - 2;change the offset
		Origin -OffsetX,0;apply the changes
		DrawImage PlayerGFX,PlayerX,PlayerY,PlayerAnimation;draw the player
		DrawEnemies
		DrawLevel;draw the player
		Flip
	Wend
	
	If PlayerCollisions()= True ;Preform Collisions if player got to exit point put the finishing text to "you win" and end
		finish$ = "YOU WIN"
		Exit
	EndIf 
	If KeyDown(203) And PlayerSides = False;If LeftKey is down and no collisions
		PlayerX = PlayerX-2 ;Move the player left
		PlayerAnimation = PlayerAnimation-1 ;Change the players animation State
		If PlayerAnimation<0 Then PlayerAnimation = 3 ;loop the animation
	EndIf
	If KeyDown(205) And PlayerSides = False;If RightKey is down and no collisions
		PlayerX = PlayerX+2 ;Move the player left
		PlayerAnimation = PlayerAnimation+1 ;Change the players animation State
		If PlayerAnimation>6 Then PlayerAnimation = 5 ;loop the animation
	EndIf
	If PlayerDown = True And PlayerYVel >0;The Player Hit the ground
		PlayerYVel = 0 ;The player has no Y axis movement
	EndIf 
	If KeyDown(200) And PlayerDown = True;If Upkey is hit and the player is on the ground
		PlayerYVel = -6;make the player jump
	EndIf
	Text 20,10,r + " " + PlayerYVel
	DrawImage PlayerGFX,PlayerX,PlayerY,PlayerAnimation
	If PlayerDown = False Or PlayerYVel<0 ;there were no below our character collisions
		PlayerY = PlayerY + PlayerYVel;move the player
		PlayerYVel = PlayerYVel + Gravity;Apply Gravity
	EndIf
	If UpdateEnemies() = False 
		finish$ = "YOU LOSE :("
		Exit ;if the player hit the enemy then exit the loop
	EndIf
		
	DrawEnemies
	DrawLevel 
	Flip
Wend

Text 320,240,finish$
Flip
Delay 100
WaitKey

;Clean Up all the memory we used
FreeImage MapGFX
FreeImage PlayerGFX
FreeImage EndGFX
For e.Enemy = Each Enemy;loop through all of the enemies
	FreeImage e\hEnemy;free the image
	Delete e;delete the type
Next

Function DrawEnemies();Function to Draw all of our Enemies
	For e.Enemy = Each Enemy ;Loop through all of our enemies
		DrawImage e\hEnemy,e\x,e\y ;Draw the enemy
	Next
End Function

Function UpdateEnemies();Updates all of our enemies
	For x = 0 To MapSizeX
		For y = 0 To MapSizeY
			If Map(1,x,y)>0 ;if there is something occupying the current x,y position in the Map array
				For e.Enemy = Each Enemy ;loop through all of our enemies
					If ImagesCollide(e\hEnemy,e\x+e\dir,e\y,0,MapGFX,x*32,y*32,Map(1,x,y)) Then e\dir=e\dir*-1 ;IF the enemy collided with the current tile change his direction				Next
				Next
			EndIf
		Next
	Next
	For e.Enemy = Each Enemy ;loop through all of our enemies again
		If ImagesCollide(e\hEnemy,e\x,e\y,0,PlayerGFX,PlayerX,PlayerY,PlayerAnimation) Then Return False ;if the player hit the enemy then return false
		e\x = e\x+e\dir ;apply direction		
	Next
	Return True
End Function 
	
Function DrawLevel();Function to Draw our Level
	For x = 0 To MapSizeX ;loop from 0 to our map size
		For y = 0 To MapSizeY ;Loop from 0 to our maps y size
			DrawImage MapGFX,x*32,y*32,Map(0,x,y);Copy the apropriet frame onto the screen
			DrawImage MapGFX,x*32,y*32,Map(1,x,y);Copy the apropriet frame onto the screen
		Next
	Next
	DrawImage EndGFX,EndX,EndY ;Draw our ending graphics
End Function 
			
Function LoadLevel(filename$) ;Loads Our Level
	in = ReadFile(filename$);Open A File For Reading And Obtain a Handle to it
	If in = 0 Then Return EFAIL;if our file did not load then return a failure
	;Read Our MapX and MapY values
	MapSizeX = ReadInt(in) ;Get the X size of the map
	MapSizeY = ReadInt(in) ;Get the Y size of the map
	Dim Map(2,MapSizeX,MapSizeY);Re Dimensionalize our map with the size of the level
	
	;READ OUR SCENERY LEVEL
	r = 0;The FeedBack we get from our files
	x = 0
	y = 0 ;zero our position in the array
	While Not r = -2
		r = 0 ;ReZero our Feedback Variable
		While r>-1
			r = ReadInt(in)
			If r>=0 And r<=50 And x<MapSizeX And y<MapSizeY;if its within the range of our tiles
				Map(0,x,y) = r ;Assign the variable
			EndIf 
			x = x +1 ;increment our x position
		Wend
		x = 0;Zero our x position because we have just finished a line
		y = y +1;increment our y position
	Wend
	;READ OUR PHYSICAL LEVEL
	r = 0;The FeedBack we get from our files
	x = 0
	y = 0;zero our position in the array
	While Not r = -2
		r = 0 ;ReZero our Feedback Variable
		While r>-1
			r = ReadInt(in)
			If r>0 And r<=50 And x<MapSizeX And y<MapSizeY ;if its within the range of our tiles
				Map(1,x,y) = r ;Assign the variable
			EndIf 
			If r=-3 ;if we encounter a player creation code
				PlayerX = x*32;set player position
				PlayerY = y*32;set player position
				r = 0;reset the return variable so it doesnt exit the loop
			EndIf
			If r=-4 ;if we encounter an end point
				r = 0
				EndX = x*32
				EndY = y*32
			EndIf
			If r=-5 ;if we encounter an enemy creation point
				e.Enemy = New Enemy ;Create a new enemy
				e\hEnemy = LoadImage("Enemy.bmp") ;load his image
				e\x = x*32 ;set his x position
				e\y = y*32-10 ;set his y position
				e\dir = ReadInt(in) ;set his direction
				r= 0;reset the return variable so it doesnt exit the loop
			EndIf
			x = x +1 ;increment our x position
		Wend
		x = 0;Zero our x position because we have just finished a line
		y = y +1;increment our y position
	Wend
	
	CloseFile(in);we have finished with our file so we can close it
	Return SOK
End Function

Conclusion

I hope you have learnt something about how to make a platform game and i hope you have found this usefull in any way at all. All of the graphics for this game were either from blitz demos or from http://home.cogeco.ca/~neilroy/free_gfx_1.html Anyway, if people find this tutorial usefull then i will write a level editor for it and a tutorial for how to write a level editor otherwise i will just release the source of the level editor iv yet to write :P. Well Chao. P.S. if you want the zip file with all the gfx go to http://littleboy550.tripod.com/platfomer_tutorial.zip
Or to discuss this article go here:
http://www.blitzcoder.com/cgi-bin/ubb-cgi/postdisplay.cgi?forum=Forum7&topic=000065
Any Comments Appreciated

For a printable copy of this article, please click HERE.