- Tilemapping in Axe
- 24 Oct 2013 11:23:16 am
- Last edited by matrefeytontias on 24 Oct 2013 02:29:48 pm; edited 1 time in total
Let's explain here the basics of tilemapping in Axe. Note that this is not only applicable in Axe, since the concept can be explained without any code.
So, what is tilemapping ? It's a programming technique consisting in easily displaying a linear world all over the screen, while making it easily editable and interactive.
The basic format for sprites in Axe is 8*8 bit-encoded. The TI-8x+ screen is 96*64, so it's easy to divide it into subsets of 8*8 images, a tilemap (this tilemap will be 12*8, since 12*8 = 96 and 8*8 = 64. So you'll can put 12 tiles from left to right, and 8 tiles from top to bottom).
For now, let's write a loop to go all over the 12*8 cells of the screen :
Code:
Now that we know how to go all over the screen, let's fill it with black squares using this method :
Code:
Remember that one "tile" is a 8*8 image, so you have to multiply the X and Y coordinates of each tile by 8. Doing this, you just covered your screen with 8*8 black squares. You can also try something that looks better, for example some grass :
Code:
You know that the point of tilemapping is to easily display a world out of a map and some sprites. Let's write those, shall we ?
First of all, the dimensions of our map. For now, we will restrain ourselves to maps that have the exact dimension of the screen, thus 12*8. Before writing the map, we have to create the tiles, because maps are made out of tiles, and not the contrary. So let's say that we have a grass tile, and 4 tiles that together make a house.
Code:
Now, let's write our map. A map is a two dimensional array made of tile numbers. Seeing how we arranged and ordered our tiles above, grass is number 0, top-left house is number 1, and so on until number 4 (bottom-right house). Note that the house is made of 4 tiles, so we must put those tiles in the right order on the map.
Code:
Now, we must go through each tile of the map (each character, because we choose to represent our map with one half of a byte for each tile, a nibble). To interact with nibbles instead of bytes, we use the nib{ command [math][→][3] : since there are twice as many nibbles as bytes (since a nibble is half a byte), all values that you expect to be in bytes must be doubled . Again, we use two nested For loops :
Code:
And here's the result of such code, with the tiles and map written above :
Now, you can try to display maps bigger than the screen with the arrow keys : all you have to do is to go through all tiles of the screen, and display the correct images in it.
Hope it helped
EDIT : typo fixed in the last code sample
So, what is tilemapping ? It's a programming technique consisting in easily displaying a linear world all over the screen, while making it easily editable and interactive.
The basic format for sprites in Axe is 8*8 bit-encoded. The TI-8x+ screen is 96*64, so it's easy to divide it into subsets of 8*8 images, a tilemap (this tilemap will be 12*8, since 12*8 = 96 and 8*8 = 64. So you'll can put 12 tiles from left to right, and 8 tiles from top to bottom).
For now, let's write a loop to go all over the 12*8 cells of the screen :
Code:
:For(Y,0,7)
:For(X,0,11)
:.tilemapping here
:End
:End
Now that we know how to go all over the screen, let's fill it with black squares using this method :
Code:
:Repeat getKey(15)
:For(Y,0,7)
:For(X,0,11)
:Pt-On(X*8,Y*8,[FFFFFFFFFFFFFFFF])
:End
:End
:DispGraph
:End
Remember that one "tile" is a 8*8 image, so you have to multiply the X and Y coordinates of each tile by 8. Doing this, you just covered your screen with 8*8 black squares. You can also try something that looks better, for example some grass :
Code:
:Pt-On(X*8,Y*8,[0040202201110808])
You know that the point of tilemapping is to easily display a world out of a map and some sprites. Let's write those, shall we ?
First of all, the dimensions of our map. For now, we will restrain ourselves to maps that have the exact dimension of the screen, thus 12*8. Before writing the map, we have to create the tiles, because maps are made out of tiles, and not the contrary. So let's say that we have a grass tile, and 4 tiles that together make a house.
Code:
:[0040202201110808]→Pic1 // grass
:[0107196181818181] // top-left of a house
:[80E0988681818181] // top-right
:[818698E09E929692] // bottom-left
:[8161190771517101] // bottom-right
Now, let's write our map. A map is a two dimensional array made of tile numbers. Seeing how we arranged and ordered our tiles above, grass is number 0, top-left house is number 1, and so on until number 4 (bottom-right house). Note that the house is made of 4 tiles, so we must put those tiles in the right order on the map.
Code:
:[000000000000]→GDB1MAP
:[000000000000]
:[000000000000]
:[000001200000]
:[000003400000]
:[000000000000]
:[000000000000]
:[000000000000]
Now, we must go through each tile of the map (each character, because we choose to represent our map with one half of a byte for each tile, a nibble). To interact with nibbles instead of bytes, we use the nib{ command [math][→][3] : since there are twice as many nibbles as bytes (since a nibble is half a byte), all values that you expect to be in bytes must be doubled . Again, we use two nested For loops :
Code:
:For(Y,0,7)
:For(X,0,11)
:nib{Y*6+GDB1MAP*2+X}→Z // with this, we have the tile situated at (X, Y) in Z ; since the map is 12 nibbles long we have to multiply Y by 12 (6 then 2) to go to the next line.
:Pt-On(X*8,Y*8,Z*8+Pic1) // don't forget that a 8*8 bit-encoded image takes 8 bytes in memory
:End
:End
And here's the result of such code, with the tiles and map written above :
Now, you can try to display maps bigger than the screen with the arrow keys : all you have to do is to go through all tiles of the screen, and display the correct images in it.
Hope it helped
EDIT : typo fixed in the last code sample