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

0 Members and 1 Guest are viewing this topic.

Offline thydowulays

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 184
  • Rating: +12/-1
  • Don't gimme dat lip
    • View Profile
    • Thy Gaming Forum
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 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!
« 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




Offline annoyingcalc

  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1953
  • Rating: +140/-72
  • Found in Eclipse.exe
    • View Profile
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.

Offline thydowulays

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 184
  • Rating: +12/-1
  • Don't gimme dat lip
    • View Profile
    • Thy Gaming Forum
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..... :D
Current Projects:
-Sparta GUI Library: 25% - Alpha Stage
-Grapher - 75% - Beta Stage *on hiatus




Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55941
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
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. :)

Offline thydowulays

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 184
  • Rating: +12/-1
  • Don't gimme dat lip
    • View Profile
    • Thy Gaming Forum
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




Offline saintrunner

  • Custom Spriter: You ask it! I'll Make it!
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1787
  • Rating: +115/-11
  • Flogging Molly
    • View Profile
    • Jonny K Music
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 O.O I have an idea on how but I don't know it it will work here
My Sprites Thread   :Updated often :) for your viewing pleasure

GAMES:

Offline thydowulays

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 184
  • Rating: +12/-1
  • Don't gimme dat lip
    • View Profile
    • Thy Gaming Forum
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




Offline saintrunner

  • Custom Spriter: You ask it! I'll Make it!
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1787
  • Rating: +115/-11
  • Flogging Molly
    • View Profile
    • Jonny K Music
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 »
My Sprites Thread   :Updated often :) for your viewing pleasure

GAMES:

Offline parserp

  • Hero Extraordinaire
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1455
  • Rating: +88/-7
  • The King Has Returned
    • View Profile
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 ;)

Offline AngelFish

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

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


:) :) :) :) :) :) :) :)
:) :( :( :( :( :( :( :)
:)                         :)
:)                         :)
:)                         :)
:)                 :) :) :)
:)             :) :) :) :)
:) :) :) :) :) :) :) :)

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

Offline squidgetx

  • Food.
  • CoT Emeritus
  • LV10 31337 u53r (Next: 2000)
  • *
  • Posts: 1881
  • Rating: +503/-17
  • rawr.
    • View Profile
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 »

Offline thydowulays

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 184
  • Rating: +12/-1
  • Don't gimme dat lip
    • View Profile
    • Thy Gaming Forum
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




Offline squidgetx

  • Food.
  • CoT Emeritus
  • LV10 31337 u53r (Next: 2000)
  • *
  • Posts: 1881
  • Rating: +503/-17
  • rawr.
    • View Profile
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

Offline chattahippie

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 358
  • Rating: +27/-0
  • Super Member! :D
    • View Profile
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 T
T--
Pt-On()
End
to 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():)

Offline saintrunner

  • Custom Spriter: You ask it! I'll Make it!
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1787
  • Rating: +115/-11
  • Flogging Molly
    • View Profile
    • Jonny K Music
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?
My Sprites Thread   :Updated often :) for your viewing pleasure

GAMES: