HaxeFlixel Tutorial – Loading Tile Map Data

If you’ve checked out the Tiled Editor sample or the Tilemap sample, you’d know that HaxeFlixel has convenient libraries to parse Tiled map data.

Unfortunately, I couldn’t find any guide that explain how to do that in HaxeFlixel unless you study it, so here’s a post dedicated to that.

Before we proceed, here are some links to other tutorials that mentions about loading Tiled data in HaxeFlixel:

Map Editors

Here is a quick list of possible editors you can use to create tile maps:

And here is a list of of sprite editors you can use to create tilesheet images:

I personally recommend Tiled Map Editor because it’s the most cross-platform, has lots of features, and it’s free.

My second choice is PyxelEdit; It works with Windows and OSX, it is a map editor that can also handle tiled creation and sprite animation. Unfortunately it’s not free, but you can try out its free Alpha version.

DAME Editor also looks like an interesting alternative but I have yet to experiment on it.

Load Map In HaxeFlixel

The easiest way to load tiled map data is from a text file, separated by commas or anything else — or otherwise known as CSV (character-separated values) files.

You can quickly create any simple CSV data file from Tiled Editor and proceed reading below. If you’re unsure of how, refer to the tutorial links above, like this one by StrandedSoft.

Let’s assume you’ve created a new HaxeFlixel template project. I’m going to use the template code from the cheat sheet for the MenuState.hx:

Now let’s add the following code:

In order to load the map data, we only need two things:  flixel.tile.FlxTilemap to handle the map creation logic, and openfl.Assets to load the .CSV data as string data.

Note: Make sure to put the .CSV file in the /data  folder, and the tilesheet image in the /images  folder, and the code above should work. You can check the API on how to use loadMap  function.

Note 2: If the map data couldn’t be loaded, make sure the end of the data in the .CSV file is NOT an empty line. It happened to me and I spent an hour troubleshooting. :(

You can also load more complex data in HaxeFlixel, such as the original TMX file (the Tiled Editor’s project data format), with the help of flixel.addons.editors.tiled  library. Unfortunately, the API page does not have much info on how to do that. I’ll try to cover that in a new post next time.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">