BlitzCoder - Blitz Basic Game Development Resources

Blitz2D Newbies: 2D Tile Map editor - tutorial (including collision placement and a full scancode file) by Helios

Hey people, this is my first tutorial ... so don't be to eager.
I 'hope' to teach you how to create a map editor a example game(using the
level made in the level editor )a HUD and a scancodes file. The map editor
will have the following;

Scenery Layer
Collision Layer
multiple collision types
Saving
loading
grid view...etc

All media(gfx,sfx..etc) are (c) 2004 tim leonard All rights reserved

You can download the source here - Click Here

Right lets get started. Add this to a blank project.

Well that should set up the basic screen res and include the scancodes
file which will be made in a sec.

That should set up our arrays(the mapData one is redundent its only there
incase i make a second tut)

This should set up all the global variables, most are self-explanitory.
It also loads the images and masks them(makes them transparent)Which if
you don't download the source,you should replace.

This is all the main junk which ill explain in a minute.

fill()

; Main
While Not KeyHit(1)
Cls

sky()
update()
grid()
control()
info()

Flip
Wend

Function control()

If mode=1
    If KeyDown(k_left) = mapx Then mapx = mapx+1 : mapx1 = mapx1 +1
	If KeyHit(12) And mode=1 Then currenttile=currenttile-1
	If KeyHit(13) And mode=1 Then currenttile=currenttile+1

If KeyHit(34) 
	If gridon=True
	gridon=False
	Else
    gridon=True
	EndIf
	EndIf
	
	If currenttile<0 Then currenttile=9
	If currenttile>9 Then currenttile=0
    If KeyHit(46) Then mode=2	
    gx=MouseX()/32
    gy=MouseY()/32
	Color 256,0,0
	Line MouseX()-10,MouseY(),MouseX()+10,MouseY()
	Line MouseX(),MouseY()-10,MouseX(),MouseY()+10
	If MouseDown(1) And gx < 32 And gy < 24 Then map(gx,gy)=currenttile
	If MouseDown(2) And gx < 32 And gy < 24 Then map(gx,gy)=0
	
EndIf

If mode=2 
	If KeyHit(12) And mode=2 Then coltype=coltype-1
	If KeyHit(13) And mode=2 Then coltype=coltype+1
	If coltype<1 Then coltype=1
	If coltype>2 Then coltype=2
	
	Color 256,0,0
	Line MouseX()-10,MouseY(),MouseX()+10,MouseY()
	Line MouseX(),MouseY()-10,MouseX(),MouseY()+10
    gx=MouseX()/32
    gy=MouseY()/32
	If KeyHit(46) Then mode=1
	If MouseDown(1) And gx < 32 And gy < 24 And coltype=1 Then  mapcol(gx,gy)=1
	If MouseDown(1) And gx < 32 And gy < 24 And coltype=2 Then  mapcol(gx,gy)=2
	If MouseDown(2) And gx < 32 And gy < 24 Then mapcol(gx,gy)=0
EndIf

If KeyHit(59)
    save("lvl1.map")
	EndIf
	
	If KeyHit(60)
    load("lvl1.map")
	EndIf
	
	If KeyHit(203)
	mapview=mapview+1
	EndIf
	
	If KeyHit(208)
	
	EndIf
	
End Function

Function update()

If mode=1
For x=0 To mapx
	For Y=0 To mapy
    DrawImage tiles,x*32,y*32,map(x,y)	
	Next	
Next

Color 0,0,0
Rect 0,0,40,40,1
DrawImage tiles,3,3,currenttile
EndIf

If mode=2
For x=0 To mapx
	For Y=0 To mapy
	DrawImage tiles,x*32,y*32,map(x,y)	
	If mapcol(x,y)=1
	Color 0,0,0
    Rect x*32,y*32,32,32,0
    EndIf	
	If mapcol(x,y)=2
	Color 255,0,0
    Rect x*32,y*32,32,32,0
    EndIf	
	Next
	Color 0,0,0
    Rect 0,0,40,40,1
    If coltype=1 
	Color 0,0,0
	Rect 3,3,32,32,1
	EndIf
	If coltype=2
	Color 255,0,0 
	Rect 3,3,32,32,1
	EndIf
Next

EndIf

End Function

Function sky()

TileBlock sky,skypos,0

skypos=skypos+1

End Function

Function info()

If mode=1
Text 100,0,"Press C to change to collision mode   leftclick = place tile   rightclick = remove tile   + and - change tiles"
Text 100,20,"F1 to save - F2 to load   Unfortunatly it only saves as (lvl1.lvl) SOZ"
Text 100,40," Press G for grid mode "

EndIf
If mode=2
Text 100,0,"Press C to change to scenery mode   leftclick = place collision   rightclick = remove collision"
EndIf

End Function

Function save(filename$)

f=WriteFile(filename$)

For y=0 To 24
		For x=0 To 32
			WriteInt f,map(x,y)
		Next
	Next
	
	For y=0 To 24
		For x=0 To 32
			WriteInt f,mapcol(x,y)
		Next
	Next

CloseFile f

End Function

Function load(filename$)

f=OpenFile(filename$)

For y=0 To 24
		For x=0 To 32
			i=ReadInt(f)
			map(x,y)=i
		Next ;x
	Next ;y
	
	For y=0 To 24
		For x=0 To 32
			i=ReadInt(f)
			mapcol(x,y)=i
		Next ;x
	Next ;y

CloseFile f

End Function

Function grid()

If gridon=True
For x=0 To mapx
	For y=o To mapy
	Rect x*32,y*32,32,32,0
	Next
Next
EndIf

End Function

Function fill()
For x=0 To mapx
	For y=0 To mapy
    map(x,y)=5
	Next
Next
End Function

all though this may look daugnuting its all very simple.
first it initiates the main loop, then it calls all the control functions.
the functions are quite self-explanitory but ill go throught them all the
same

The control function just checks for key presses and canges the map array
accordingly.

The update function draw the map array to the screen, or in case its in
mode2 it draws the collision boxs.

The sky function initiates and draws the scrolling background.

The info function just writes some instructions onto the screen.

The save and load functions are self explanitory.

The grid function draws a basic grid overlay onto the screen.

The fill function, which is called at the start just fills the map array
with a basic tile, in this case its a grass tile.

This editor basically has 2 modes one which allows the changing of tiles
and the other allowing collision boxes to be placed, There are to types of
collision in this editor, one is normal and the other can be customised, in
the example game its used to damage the player. Look at the example game to
get ideas on how to use it.(a level needs to be made for the example to run)

The next stop is the scancodes file, so save the editor and start a
blankfile called 'scancodes.bb'.
Just fill in this and save the fill its just the scancodes for all the
keys on the keyboard, so it dosen't need any explaining.

; ********************************************************************
;                            Key Codes
;
;            (C) 2004 Tim Leonard   All Rights Reserved
; ********************************************************************

Const K_Escape=1

; ************************** Number Codes ****************************

Const K_1=2
   Const K_2=3
   Const K_3=4
   Const K_4=5
   Const K_5=6
   Const K_6=7
   Const K_7=8
   Const K_8=9
   Const K_9=10
   Const K_0=11

; *************************** Alphabet keys ***************************

Const K_A=30
   Const K_B=48
   Const K_C=46
   Const K_D=32
   Const K_E=18
   Const K_F=33
   Const K_G=34
   Const K_H=35
   Const K_I=23
   Const K_J=36
   Const K_K=37
   Const K_L=38
   Const K_M=50
   Const K_N=49
   Const K_O=24
   Const K_P=25
   Const K_Q=16
   Const K_R=19
   Const K_S=31
   Const K_T=20
   Const K_U=22
   Const K_V=47
   Const K_W=17
   Const K_X=45
   Const K_Y=21
   Const K_Z=44

; ************************** Num-Pad Keys ****************************

Const K_Num_7=71
   Const K_Num_8=72
   Const K_Num_9=73
   Const K_Num_Sub=74
   Const K_Num_4=75
   Const K_Num_5=76
   Const K_Num_6=77
   Const K_Num_Add=78
   Const K_Num_1=79
   Const K_Num_2=80
   Const K_Num_3=81
   Const K_Num_Decimal=82
   Const K_Num_Equal=144
   Const K_Num_Enter=156
   Const K_Num_Comma=179 
   Const K_Num_Divide=181

; ************************** Arrows  Keys ****************************

Const K_Up=200
   Const K_Left=203
   Const K_Right=205
   Const K_Down=208

; ************************** Function  Keys **************************

Const K_F1=59
   Const K_F2=60
   Const K_F3=61
   Const K_F4=62
   Const K_F5=63
   Const K_F6=64
   Const K_F7=65
   Const K_F8=66
   Const K_F9=67
   Const K_F10=68
   Const K_F11=87
   Const K_F12=88

; ************************** Misc  Keys **************************

Const K_At=145
   Const K_Colon=146  
   Const K_RControl=157
   Const K_RAlt=184
   Const K_Pause=197
   Const K_Minus=12
   Const K_Equals=13
   Const K_Backspace=14 
   Const K_Tab=15
   Const K_LeftBracket=26 
   Const K_RightBracket=27
   Const K_Enter=28
   Const K_LControl=29
   Const K_SemiColon=39
   Const K_Apos=40
   Const K_Grave=41
   Const K_LShift=42
   Const K_Backslash=43 
   Const K_Comma=51
   Const K_Period=52
   Const K_ForSlash=53
   Const K_RShift=54
   Const K_LAlt=56
   Const K_Space=57
   Const K_Caps=58
   Const K_NumLock=69 
   Const K_ScrollLock=70

Just run the editor and it should work (providing you've downloaded the
tiles or made your own, in which case you need to change the tiles loading
command)

Unfortunatly im going to have to continue this tutorial in a day or so..
but your editor should work now! The HUD and Example game are included on
the source code download. Sorry for the messy code!

Final Product

Include "scancodes.bb"

Graphics 1024,768,0,1
AppTitle "Platform editor v2.0"
SetBuffer BackBuffer()
AutoMidHandle False		;Images placed by their top left
TFormFilter 0
;32
Dim map(32,24)
Dim mapcol(32,24)
Dim mapData(32,24)

Global mapx = 32
Global mapy = 24
Global mapx1 = 0
Global skypos
Global gridon = False
Global mapview = 1024

Global tiles = LoadAnimImage("gfx/Ztileset.bmp",32,32,0,10)
Global sky = LoadImage("gfx\sky1.bmp")
MaskImage tiles,255,0,255
TileImage sky

Global cursorx,cursory
Global gx,gy
Global currenttile=1
Global rpik,rpik2
Global rcol,rcol1,rcol2
Global mode=1
Global coltype=1

Const erasetile = 0

fill()

; Main
While Not KeyHit(1)
Cls

sky()
update()
grid()
control()
info()

Flip
Wend

Function control()

If mode=1
    If KeyDown(k_left) = mapx Then mapx = mapx+1 : mapx1 = mapx1 +1
	If KeyHit(12) And mode=1 Then currenttile=currenttile-1
	If KeyHit(13) And mode=1 Then currenttile=currenttile+1

If KeyHit(59)
    save("lvl1.map")
	EndIf
	
	If KeyHit(60)
    load("lvl1.map")
	EndIf
	
	If KeyHit(203)
	mapview=mapview+1
	EndIf
	
	If KeyHit(208)
	
	EndIf
	
End Function

Function update()

If mode=1
For x=0 To mapx
	For Y=0 To mapy
    DrawImage tiles,x*32,y*32,map(x,y)	
	Next	
Next

Color 0,0,0
Rect 0,0,40,40,1
DrawImage tiles,3,3,currenttile
EndIf

EndIf

End Function

Function sky()

TileBlock sky,skypos,0

skypos=skypos+1

End Function

Function info()

EndIf
If mode=2
Text 100,0,"Press C to change to scenery mode   leftclick = place collision   rightclick = remove collision"
EndIf

End Function

Function save(filename$)

f=WriteFile(filename$)

For y=0 To 24
		For x=0 To 32
			WriteInt f,map(x,y)
		Next
	Next
	
	For y=0 To 24
		For x=0 To 32
			WriteInt f,mapcol(x,y)
		Next
	Next

CloseFile f

End Function

Function load(filename$)

f=OpenFile(filename$)

For y=0 To 24
		For x=0 To 32
			i=ReadInt(f)
			map(x,y)=i
		Next ;x
	Next ;y
	
	For y=0 To 24
		For x=0 To 32
			i=ReadInt(f)
			mapcol(x,y)=i
		Next ;x
	Next ;y

CloseFile f

End Function

Function grid()

If gridon=True
For x=0 To mapx
	For y=o To mapy
	Rect x*32,y*32,32,32,0
	Next
Next
EndIf

End Function

Function fill()
For x=0 To mapx
	For y=0 To mapy
    map(x,y)=5
	Next
Next
End Function

To load the level into a game just use these functions;

Ive left out multiple file saving in the editor, so that you can do
something yourself, its just a matter of using the input command ; )

THANKS!

Please send any comments to tpl@aol.com

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