﻿ Omnimaga: The Coders Of Tomorrow - Articles - thydowulays's Complete n00bs guide to tilemapping in Axe
 thydowulays's Complete n00bs guide to tilemapping in Axe Submitted By: thydowulays Date: 26 January, 2012, 06:02:22 Views: 415 Summary: Teaches you about drawing, collision, and more with great explanation! 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]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 nowRepeat getKey(15) //Tilemap will show until user presses CLEARFor (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 mapFor (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 codeT--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.EndEndEndDispGraph //Displays the tilemapClrDrawEndI 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+Pic1EndEndEndDispGraphClrDrawEndYou can also store your tilemap in a second program. Such as thisPROGRAM: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:TILESRCRepeat 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+Pic1EndEndEndDispGraphClrDrawEndReturn //Always put a return statement before you include any subprogramsprgmTILEDATA //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:TILESRC48->X40->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+Pic1EndEndEndPt-On(X,Y,[FFFFFFFFFFFFFFFF]) //Displays a block sprite at position X,YDispGraphClrDrawIf getKey(4) //If the user presses the Up arrowY-8->Y //Move the player one tile upPause 500 //Make it a little slowerEndIf getKey(1) //If the user presses the Down arrowY+8->Y //Move the player one tile downPause 500 //Make it a little slowerEndIf getKey(2) //If the user presses the Left arrowX-8->X //Move the player one tile leftPause 500 //Make it a little slowerEndIf getKey(3) //If the user presses the Right arrowX+8->X //Move the player one tile rightPause 500 //Make it a little slowerEndEndReturn 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}ReturnBasically, 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:TILESRC48->X40->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+Pic1EndEndEndPt-On(X,Y,[FFFFFFFFFFFFFFFF]) DispGraphClrDrawIf 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->YPause 500 EndEndIf 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 EndEndIf 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 EndEndIf 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 EndEndEndReturn prgmTILEDATA ReturnLbl GT{r2/8*12+(r1/8)+GDB1} //Our routine for testing tiles.ReturnWhoo! 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! ```