[010101010101010101010101]->GDB1 // You will learn why this is on top later
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000010101]
[010000000000000001010101]
[010101010101010101010101]
NOTE: The tile number 00 will ALWAYS be an empty tile, any numbers after that YOU will have to define yourself.

To add a tile to a tile map, you simply define a certain sprite. We will be using Pic1 for this, as it is easy to understand.

Here is an example:

[010101010101010101010101]->GDB1 // Same tilemap as earlier
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000010101]
[010000000000000001010101]
[010101010101010101010101]

[FFFFFFFFFFFFFFFF]->Pic1 // A simple black block sprite. How does it know which picture variable to use? We will be learning that next.


Basically, that code makes every tile labeled "01" a block sprite. Every tile labeled "00" is an empty one.

How does it know which picture variable to use?

When you actually draw the tilemap using a routine I will give you, there is a line in the routine that is this: Pt-On(A*8,B*8,T*8+Pic1). Just replace the Pic1 with whatever picture variable you chose.

However, we will not be doing the routine until later. Right now I will focus on adding more than 1 tile sprite.

This is how it's done:


[010101010101010101010101]->GDB1 // Same tilemap as earlier
[010202020202020202020201] // Now just add 02 as the tile, and the second sprite will show up
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000010101]
[010000000000000001010101]
[010101010101010101010101]

[FFFFFFFFFFFFFFFF]->Pic1 // A simple black block sprite. How does it know which picture variable to use? We will be learning that next.
[0F0F0F0F0F0F0F0] // We only put the ->Pic1 on the first tile sprite, everywhere else it is not needed.


So now, the sprite [0F0F0F0F0F0F0F0F] can be treated as 02, so wherever you put 02 in your tilemap now


Repeat getKey(15) //Tilemap will show until user presses CLEAR
For (B,0,7) // This statement here will take care of drawing the tiles from top to bottom. The number at the end is always one less than the height of the map
For (A,0,11) // This statement takes care of drawing the left to right tiles. 
{B*12+A+GDB1}->T // This turns the actual tilemap data into the picture for the tilemap. NOTE: If your tilemap isn't 12x8, change the 12 in this to whatever it is.
If T //Don't mind this, but you must have it in your code
T--
Pt-On(A*8,B*8,T*8+Pic1 // This actually draws the tilemap. Replace Pic1 with whichever variable you defined your tile sprites with earlier.
End
End
End
DispGraph //Displays the tilemap
ClrDraw
End


I know that may seem a bit intimidating, but give it a try!

And now a finished (sort of) product:

[010101010101010101010101]->GDB1 
[010202020202020202020201]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000010101]
[010000000000000001010101]
[010101010101010101010101]

[FFFFFFFFFFFFFFFF]->Pic1
[0F0F0F0F0F0F0F0]

Repeat getKey(15) 
For (B,0,7)
For (A,0,11) 
{B*12+A+GDB1}->T 
If T 
T--
Pt-On(A*8,B*8,T*8+Pic1
End
End
End
DispGraph
ClrDraw
End


You can also store your tilemap in a second program. Such as this


PROGRAM:TILEDATA
[010101010101010101010101]->GDB1 
[010202020202020202020201]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000010101]
[010000000000000001010101]
[010101010101010101010101]

[FFFFFFFFFFFFFFFF]->Pic1
[0F0F0F0F0F0F0F0]

That would be called prgmTILEDATA, now all you have to do is put it in your main program. (We will be using prgmTILESRC)


PROGRAM:TILESRC
Repeat getKey(15) 
For (B,0,7)
For (A,0,11) 
{B*12+A+GDB1}->T 
If T 
T--
Pt-On(A*8,B*8,T*8+Pic1
End
End
End
DispGraph
ClrDraw
End
Return //Always put a return statement before you include any subprograms
prgmTILEDATA //Now it should work the same as before, just less crowded.


Anyways, that's all fine and dandy, but what if we wanted a player that would be able to walk through one tile, and not be able to walk through another?
It's actually pretty simple. 

PROGRAM:TILESRC
48->X
40->Y //Simple variables to store the position of the player that you can move.
Repeat getKey(15) 
For (B,0,7)
For (A,0,11) 
{B*12+A+GDB1}->T 
If T 
T--
Pt-On(A*8,B*8,T*8+Pic1
End
End
End
Pt-On(X,Y,[FFFFFFFFFFFFFFFF]) //Displays a block sprite at position X,Y
DispGraph
ClrDraw

If getKey(4) //If the user presses the Up arrow
Y-8->Y //Move the player one tile up
Pause 500 //Make it a little slower
End

If getKey(1) //If the user presses the Down arrow
Y+8->Y //Move the player one tile down
Pause 500 //Make it a little slower
End

If getKey(2) //If the user presses the Left arrow
X-8->X //Move the player one tile left
Pause 500 //Make it a little slower
End

If getKey(3) //If the user presses the Right arrow
X+8->X //Move the player one tile right
Pause 500 //Make it a little slower
End


End
Return 
prgmTILEDATA 


That adds basic movement for a block sprite. Now I will be showing you a simple, yet effective routine for getting individual tiles. (Thanks, leafy  )
Add this right after prgmTILEDATA:

Lbl GT
{r2/8*12+(r1/8)+GDB1}
Return

Basically, that routine tests to see if there is a tile at position X,Y. You can also test its number, like if it's a 01 tile or not.

Here's how you would add collision:


PROGRAM:TILESRC
48->X
40->Y 
Repeat getKey(15) 
For (B,0,7)
For (A,0,11) 
{B*12+A+GDB1}->T 
If T 
T--
Pt-On(A*8,B*8,T*8+Pic1
End
End
End
Pt-On(X,Y,[FFFFFFFFFFFFFFFF]) 
DispGraph
ClrDraw

If getKey(4) 
!If sub(GT,X,Y-8)=1 If there is NOT a tile with a number of 01 directly ABOVE the player, then move.
Y-8->Y
Pause 500 
End
End

If getKey(1) 
!If sub(GT,X,Y+8)=1 If there is NOT a tile with a number of 01 directly BELOW the player, then move.
Y+8->Y 
Pause 500 
End
End

If getKey(2)
!If sub(GT,X-8,Y)=1 If there is NOT a tile with a number of 01 directly to the LEFT of the player, then move.
X-8->X 
Pause 500 
End
End

If getKey(3) 
!If sub(GT,X+8,Y)=1 If there is NOT a tile with a number of 01 directly to the RIGHT of the player, then move.
X+8->X 
Pause 500 
End
End

End
Return 
prgmTILEDATA 
Return
Lbl GT
{r2/8*12+(r1/8)+GDB1} //Our routine for testing tiles.
Return


Whoo! That's a lot of code! But, If you did it correctly, you will notice that you can't move past the solid black tiles! Let's take a second to study this line:

!If sub(GT,X,Y-8)=1

How does that line work? Well, the ! tests to see if it is NOT there, and the If sub(GT,X,Y-8) tests to see if there is a tile directly above the player, and the =1 after that tests to see if the tile's number is 01. If it said =2, then it would test to see if the number was 02. Simple stuff. 

You can use this simple tilemapping frameworks for lots of games, including platformers (with a little modification) as it is easy and effective.

Thanks so much to Runer112, aeTIos and Leafiness0 for teaching me tilemapping, and your routines!

I hope you found this tutorial helpful, leave any questions or comments below.

I will be uploading some screenshots to go with this tutorial soon, but in the mean time, have fun with this!