Tiling Sprites With Flixel To Make A Map
So this week I have been working on something a little more closely related to Demon’s Hex. I want to get this done soon and feel that I needed to start working on some of the issues inherent in the original build posted on its page.
For 1, the game map is a static image with the nodes placed on top of it. This is not how I want the game to work. I want to be able to create a world via a tilemap, which Flixel has support for built right in. I wasn’t exactly sure how to go about doing this as all the demos and such on the Flixel site were for platformers. So I went searching for something that would work.
That is when I came across this tutorial for creating a top down RPG style game. That tutorial didn’t go into all the details of creating an RPG, but it did give me enough information to create the tilemap for my map. So I set about doing it. So I took the map image I originally had and I laid out a grid of 32×32 squares. Then I took a tally of what map components I had and then build a comma separated value list out of it.
So here is the map:
Looking at this map, I came up with the following CSV list:
0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 , 0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,5 ,5 ,5 ,2 ,0 ,0 ,0 ,0 ,0 , 0 ,0 ,0 ,0 ,1 ,5 ,5 ,5 ,5 ,5 ,5 ,2 ,0 ,0 ,7 ,19,19,19,10,5 ,2 ,0 ,0 ,0 , 0 ,0 ,0 ,0 ,7 ,19,19,19,19,19,19,10,13,5 ,9 ,19,19,19,19,19,8 ,0 ,0 ,0 , 0 ,0 ,0 ,0 ,7 ,19,19,19,19,19,19,19,14,19,19,19,19,19,19,12,4 ,0 ,0 ,0 , 0 ,0 ,1 ,5 ,9 ,19,19,19,19,19,19,19,14,19,19,19,19,19,19,8 ,0 ,0 ,0 ,0 , 0 ,0 ,7 ,19,19,19,19,19,19,19,19,19,14,19,19,19,19,19,19,8 ,0 ,0 ,0 ,0 , 0 ,0 ,7 ,19,19,19,19,19,19,16,15,15,17,19,19,19,19,19,19,8 ,0 ,0 ,0 ,0 , 0 ,0 ,7 ,19,19,19,19,19,19,14,19,19,19,19,19,19,19,19,19,8 ,0 ,0 ,0 ,0 , 0 ,0 ,7 ,19,19,19,19,19,19,14,19,19,19,19,19,19,19,19,19,8 ,0 ,0 ,0 ,0 , 0 ,0 ,7 ,19,19,19,19,19,19,18,19,19,19,19,19,19,19,19,19,8 ,0 ,0 ,0 ,0 , 0 ,0 ,7 ,19,19,19,19,19,19,19,19,19,19,19,12,6 ,6 ,6 ,6 ,4 ,0 ,0 ,0 ,0 , 0 ,0 ,3 ,11,19,19,19,19,19,19,19,19,19,19,8 ,0 ,1 ,5 ,5 ,2 ,0 ,0 ,0 ,0 , 0 ,0 ,0 ,3 ,11,12,6 ,6 ,6 ,6 ,11,19,19,12,4 ,0 ,7 ,19,19,10,5 ,2 ,0 ,0 , 0 ,0 ,0 ,0 ,3 ,4 ,0 ,0 ,0 ,0 ,3 ,6 ,6 ,4 ,0 ,0 ,7 ,19,19,19,19,8 ,0 ,0 , 0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,3 ,11,19,19,12,4 ,0 ,0 , 0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,3 ,6 ,6 ,4 ,0 ,0 ,0 , 0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,
You can see the shapings of the two islands in all that fairly well. If you want to know what all those numbers mean, well those are the placements of each tile in the sprite sheet the tile map uses. The first 32×32 square is zero and it goes from there.
The buildings were easy, for at least this. I may change the way I am doing this in the future, but for now, I am just loading them as sprites and adding them to the scene. However, the trees and mountains were the tricky ones.
I had thought about just doing another tile map like I did for the land and water. However, I soon learned that would not be possible. You see, the sprites for the trees and mountains are 64×64 and I tile them out on a grid of 32×32. So that each one overlaps the one before it. That is not supported in the default Flixel. So I would have to extend the tilemap class if I wanted to get it fully working. I may end up doing this in the future, but for now, I decided to do something a little different.
First off, I created and array of arrays that represented the trees and paths (mountains have mountains, paths and caves). This included the location of each sprite and what it was. I then looped through the array and added a sprite to the scene for each time. This got the trees to display properly. Here is the code to get this working for the trees.
var trees:Array = new Array(new Array('T',6,3),
new Array('T',7,3),
new Array('T',8,3),
new Array('P',9,3),
new Array('T',5,4),
new Array('T',6,4),
new Array('T',7,4),
new Array('T',8,4),
new Array('T',5,5),
new Array('T',6,5),
new Array('T',7,5),
new Array('T',8,5),
new Array('T',3,6),
new Array('T',4,6),
new Array('T',5,6),
new Array('T',6,6),
new Array('P',7,6));
for each(var tree:Array in trees)
{
if(tree[0] == 'P')
{
sprite = new FlxSprite(tree[1]*32,tree[2]*32,TreePath);
}
else
{
sprite = new FlxSprite(tree[1]*32,tree[2]*32,TreesImg);
}
add(sprite);
}
Not too complicated, and it works. Each array inside the array has an element that tells the program what kind of tree it is, where it is located on the X axis, and where it is located on the Y axis. Those last two values are the grid location based on 32×32 grid squares, that is why those values are multiplied by 32 in the for loop.
I have a lot more that I want to do with this especially for the game. For example, this is just one screen. I want to be able to have several interconnected screens that will load as you travel through the world. But this is a start and that will come soon.
But just so you don’t miss out, you can see the finished tilemap program here: Tile Map Demo
