### Author Topic: thydowulays's Complete n00bs guide to Tilemapping in Axe  (Read 13400 times)

0 Members and 1 Guest are viewing this topic.

#### thydowulays

• LV4 Regular (Next: 200)
• Posts: 184
• Rating: +12/-1
• Don't gimme dat lip
##### thydowulays's Complete n00bs guide to Tilemapping in Axe
« on: January 25, 2012, 10:41:16 pm »
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 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 tilemapClrDrawEnd

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+Pic1EndEndEndDispGraphClrDrawEnd

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: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 )
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: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.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!
« Last Edit: January 26, 2012, 11:06:17 pm by thydowulays »
Current Projects:
-Sparta GUI Library: 25% - Alpha Stage
-Grapher - 75% - Beta Stage *on hiatus

#### annoyingcalc

• LV10 31337 u53r (Next: 2000)
• Posts: 1953
• Rating: +140/-72
• Found in Eclipse.exe
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #1 on: January 25, 2012, 10:49:32 pm »
Wow! This is awesome!
This used to contain a signature.

#### thydowulays

• LV4 Regular (Next: 200)
• Posts: 184
• Rating: +12/-1
• Don't gimme dat lip
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #2 on: January 25, 2012, 10:51:16 pm »
Thanks! I just felt as though there wasn't enough tilemapping tutorials to go around Omnimaga.....
Current Projects:
-Sparta GUI Library: 25% - Alpha Stage
-Grapher - 75% - Beta Stage *on hiatus

#### DJ Omnimaga

• Clacualters are teh gr33t
• CoT Emeritus
• LV15 Omnimagician (Next: --)
• Posts: 55939
• Rating: +3154/-232
• CodeWalrus founder & retired Omnimaga founder
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #3 on: January 25, 2012, 10:54:16 pm »
This is great. Could you put a copy of this tutorial (with a link to this thread) in the Omni tutorials section at http://www.omnimaga.org/index.php?action=articles;cat=11 too? It would be very great for when this topic go down in the huge Axe topic list.
Dream of Omnimaga

#### thydowulays

• LV4 Regular (Next: 200)
• Posts: 184
• Rating: +12/-1
• Don't gimme dat lip
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #4 on: January 25, 2012, 10:55:27 pm »
Sure thing DJ! Glad you liked it!
Current Projects:
-Sparta GUI Library: 25% - Alpha Stage
-Grapher - 75% - Beta Stage *on hiatus

#### saintrunner

• Custom Spriter: You ask it! I'll Make it!
• LV10 31337 u53r (Next: 2000)
• Posts: 1787
• Rating: +115/-11
• Flogging Molly
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #5 on: January 26, 2012, 03:38:30 pm »
Really nice job! It actually will really help me in future games! But one question! Can sidescrolling be implemented? And if so how I have an idea on how but I don't know it it will work here

GAMES:
Spoiler For Spoiler:

#### thydowulays

• LV4 Regular (Next: 200)
• Posts: 184
• Rating: +12/-1
• Don't gimme dat lip
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #6 on: January 26, 2012, 04:25:36 pm »
Sidescrolling can be implemented, but to be honest, I really don't know how.
Current Projects:
-Sparta GUI Library: 25% - Alpha Stage
-Grapher - 75% - Beta Stage *on hiatus

#### saintrunner

• Custom Spriter: You ask it! I'll Make it!
• LV10 31337 u53r (Next: 2000)
• Posts: 1787
• Rating: +115/-11
• Flogging Molly
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #7 on: January 26, 2012, 04:39:45 pm »
Hmmm, I'll mess around with it and if I figure it out with your code, I'll let you know

edit: and could you post a source code to be downloaded? rather then me having to type it all back into my calc?
« Last Edit: January 26, 2012, 04:50:11 pm by saintrunner »

GAMES:
Spoiler For Spoiler:

#### parserp

• Hero Extraordinaire
• LV10 31337 u53r (Next: 2000)
• Posts: 1455
• Rating: +88/-7
• The King Has Returned
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #8 on: January 26, 2012, 05:03:54 pm »
Pretty simple scrolling engine: http://ourl.ca/14831/280780

#### AngelFish

• Is this my custom title?
• LV12 Extreme Poster (Next: 5000)
• Posts: 3242
• Rating: +270/-27
• I'm a Fishbot
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #9 on: January 26, 2012, 05:17:38 pm »

Code: [Select]
:) :) :) :) :) :) :) :) :) :( :( :( :( :( :( :) :)                         :) :)                         :):)                         :):)                 :) :) :):)             :) :) :) :):) :) :) :) :) :) :) :)

∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

#### squidgetx

• Food.
• CoT Emeritus
• LV10 31337 u53r (Next: 2000)
• Posts: 1881
• Rating: +503/-17
• rawr.
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #10 on: January 26, 2012, 05:33:14 pm »
Added to the specific tutorials list.

Also one really easy optimization: instead of doing
Code: [Select]
!If something = 1 you can do
Code: [Select]
If something - 1
« Last Edit: January 26, 2012, 05:35:04 pm by squidgetx »

#### thydowulays

• LV4 Regular (Next: 200)
• Posts: 184
• Rating: +12/-1
• Don't gimme dat lip
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #11 on: January 26, 2012, 11:05:27 pm »
@parserpadwan Thanks for that! I'll check that out. @Qwerty.55 Yes! Thank you! I was going to do that but I didn't have enough time @squidgetx Thanks for the optimization! How does it work though?
Current Projects:
-Sparta GUI Library: 25% - Alpha Stage
-Grapher - 75% - Beta Stage *on hiatus

#### squidgetx

• Food.
• CoT Emeritus
• LV10 31337 u53r (Next: 2000)
• Posts: 1881
• Rating: +503/-17
• rawr.
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #12 on: January 29, 2012, 09:31:12 pm »
Hm well basically the way the If command works is it checks if the value is 0 or not, right? So if we say EXP-1 instead of EXP=1, it'll return 0 if it does equal one (which is why we use !If). -1 is the smallest, fastest way to do something in Axe (although I think =1 might be auto-opted, but I'm not sure). In general you can always use this trick even for checking values that aren't 1. However, if you're not testing 1,2,255,256,512, etc. you can save more by doing !If EXP xor value

#### chattahippie

• LV6 Super Member (Next: 500)
• Posts: 358
• Rating: +27/-0
• Super Member! :D
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #13 on: January 29, 2012, 10:01:42 pm »
I like this, it's very well explained
But to make it simpler,
When you use
Code: [Select]
If TT--Pt-On()Endto check if the space is not a zero, you could instead delete that loop and instead define Pic1 as
Code: [Select]
[0000000000000000]->Pic1[FFFFFFFFFFFFFFFF][F0F0F0F0F0F0F0F0]so it's just
Code: [Select]
Pt-On()

#### saintrunner

• Custom Spriter: You ask it! I'll Make it!
• LV10 31337 u53r (Next: 2000)
• Posts: 1787
• Rating: +115/-11
• Flogging Molly
##### Re: thydowulays's Complete n00bs guide to Tilemapping in Axe
« Reply #14 on: January 29, 2012, 10:19:23 pm »
could you attach a source code for this so I don't have to retype it into my calc?