Okay, so you've seen them everywhere. Mario, Pacman, and tons of others all use a method for displaying a "map" on the screen, and easy and custom collisions with it. Although there are many out there, this Axe tilemapping tutorial will hopefully boost your knowledge of tilemapping to a pretty decent level. Enough of me blabbering, let's get started!
Okay, so the first part of the tilemap is the map itself. Most maps are 12 wide, and 8 tiles high.
Tiles are 8x8 sprites that are used in a tilemap, that can be collided with, drawn, or changed dynamically. You will learn how to do all this later on in the lesson.
NOTE: This lesson only covers non-scrolling tilemaps.When drawing a map, you have to pay attention to the number that the tile is. This will always be two digits in length, and the numbers in it correspond to the sprites that you put in the tile. For example - tile 00 is blank, while tile 01 would hold a sprite value.
Here is an example of a map:
[010101010101010101010101]->GDB1 // You will learn why this is on top later
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000000001]
[010000000000000000010101]
[010000000000000001010101]
[010101010101010101010101]
The reason we put the GDB1 at the top, is because that ensures that our map compiles like it should, without doing that will only display one row of the map.
That map is 12x8, because there are 24 numbers in each row (remember that one tile is two digits) and there are 8 columns.
The map would look like this drawn:
XXXXXXXX
X X
X X
X X
X X
X XXXX
X XXXXX
XXXXXXXX
However, we haven't even defined what 01 is yet! This is what we will be doing now:
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, [0F0F0F0F0F0F0F0F] will show up there.
You got that down? I think you need a visual. Say that 01 was a smiley face, and 02 was a frowny face. This is what the example up there would do:
Kudos for Qwerty.55 for fixing my smiley map
Thats all for defining tilemaps, now we need to draw them. I like to use a simple, yet flexible routine for this. Here it is (don't be intimidated, it's not that confusing)
<Insert tilemap here>
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)=1How 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!
