> | | | | | | | | > Shine On You Crazy Tile

Shine On You Crazy Tile

Posted on Tuesday, July 17, 2012 | 3 Comments

I love tile-based games.  I was fortunate enough to grow up playing many of the finest tile-based games ever crafted.  Final Fantasy, Dragon Warrior 1-4, The Legend of Zelda 1 & 2, Metroid, Mega Man 1-6, Wizards & Warriors 1-3, Castlevania 1-3, Blaster Master, Faxanadu, Crystallis, Star Tropics, Super Mario Bros. 1-3, and Contra, just to name a few and these are only from the NES era.  There are plenty of incredible tile-based games on the SNES as well, such as Final Fantasy 2 & 3, Earthbound, Chrono Trigger, Lufia 1 & 2, Super Mario World, Super Metroid, Mega Man X 1-3, The Legend of Zelda: A Link to the Past, Illusion of Gaia, Soul Blazer, and Terranigma, just to name a few more, so it should be pretty easy to see why I have a love of tile-based games.  There are also games that I've played on other systems both of and not of the same era that are great tile-based games, but I've already made my point.

Making a tile-based game, then, was the obvious path for me to take.  I have multiple game ideas that I've come up with which are all projects I want to complete at some point in my life, but the easiest starting point was picking up where I left off on my last project, Otto's Odyssey.  It's also very easy to work on this project since I enjoy this type of game so much and seeing my own version of the genre come to life is very exciting.  It is also very rewarding when you finally overcome a challenging programming problem, so the combination of overcoming those problems and at the same time bringing to life a game of one of my favorite genres is a big part of what keeps me going.

Now, as I was saying at the end of last post, there is an object in Flixel named FlxTilemap that does exactly what I want as far as displaying the game world is concerned.  When I was programming Otto's Odyssey in college for my capstone project, I had to write all the tilemap code myself because I was doing the entire thing from scratch.  I also had to write the collision code and the camera code, which took up quite a bit of time and it is still riddled with flaws.  Thankfully, I have now have Flixel and it works way better than my old code! (Although, cut me some slack... it was the first time I had programmed a platforming tile-based game like that, I was doing it from scratch, I only had a few months, and I had to basically learn a new programming language because Actionscript 3 is vastly different than Actionscript 2 and I spent close to half the time doing so.)

In the tutorial that was mentioned last post, the game's map is generated from an ugly array directly in the code window and instead of using an image for each tile, it draws the tiles on the fly.  So I had to figure out how to use image files instead of a generated image, which turns out to be pretty easy.  By looking a the documentation, I saw that the "loadMap" function of FlxTilemap has a parameter for loading graphics called "TileGraphic".

TileGraphic:Class — All the tiles you want to use, arranged in a strip
So this means that for your tiles, you make one image (preferably .png files) that has each of your tiles on it in order.  My tiles are 16x16, but it doesn't even need to be specified in the code because it auto-defaults the width and height to the height of the image if not specified.  I also used a blank tile for the first spot in my image, because it corresponds to "0" and in my map array that is a blank tile, i.e. no tile is present and the player can walk through freely.

When I make my maps, I use a program I found during my capstone project called Mappy.  Mappy is free to use and it can be found here.  It is pretty flexible and lets you do a lot of things, really it's an awesome program.  While working on a map, I plan out the size I want it to be, in screens, then translate that into number of tiles for width and height.  Then I import my tiles, which I have to cut out of the long single tile image and save separately.  I saved them in a folder I made in the Mappy folder for easier importing.  I seem to remember some sort of bug with only being able to import one tile total and I had to disable something in the configuration to fix it, so if you decide to try out Mappy please keep this in mind.  Also, make sure to import your tiles in the same exact order as they are in the conglomerate image of all your tiles!  If you don't, the numbers won't match up and your maps won't ever look in the game like they do in Mappy.

Also, I discovered something new about Mappy that I either didn't know about before or is a new feature.  It now has a custom button called "Export Flixel Tilemap" in the menu which makes it incredibly easy to make tile-based maps for your Flixel games.  However, instead of leaving this gigantic mess of an array in my code window, I figured out a way to import it from a text file.  This way, I only have a small line of code that contains all the data for the map.  Simply save the map as a text file using the Export Flixel Tilemap button in Mappy, then in your code for the variable you use for your level embed the text file information into it like this:

[Embed(source = "../lib/zoo.txt", mimeType = "application/octet-stream")]
private var Zoo:Class;

The mimeType tells what kind of file to look for, in this case "application/octet-stream" which used for text files.

So now I had a map with my own custom tile images, but it didn't follow the player around for levels that extended the boundaries of the screen.  I had to implement a camera, which thankfully is integrated into the Flixel framework, but still a bit puzzling to figure out!  Unfortunately, I am out of time for the moment, so I shall continue on with this riveting tale next time.



  1. a pitty that tile based games are kind of rare this days

    1. Agreed! Although, it is nice for developers like me since there isn't a lot of competition... but as a gamer it is sort of depressing.

  2. dammit a fixel fixtilemap? never imagine it...


Powered by Blogger.