HaxeFlixel Tutorial – Parsing CSV Map Data

In the previous post we loaded CSV data to display a tiled map in HaxeFlixel. But I forgot to talk about what to do after loading the data, so let’s run through a quick tutorial on how to parse the loaded map data.

Let’s assume you’ve created a template HaxeFlixel project, and this is how your MenuState.hx looks like:

If you test the game with lime test neko  now, you should get this:

2015-03-12-tiled-ss1

A lot of other tutorials would have mentioned this, but in case you didn’t know yet — To change the resolution of the screen, you just need to modify these variables in Main.hx:

… and now it should look like this:

2015-03-12-tiled-ss2

Even though the map is loaded, it’s just a static image. There’s no player code, or wall data, or anything else. So how do we code from here? Assuming that we’re using the layout above, here’s the CSV data (generated from Tiled, and using Derek Yu’s tilesheet):

If you examine the tilesheet image, the numbers above correspond with the tile index, as noted below:

2015-03-12-tiled-ss3

Let’s start with the player object first. We know that tile 20 is the red player tile, so how do we convert it into a game object?

You can check the FlxTilemap API for more information on the functions used above. If you test the game, it should still look the same. We replaced the player tile with an actual player object, but we can’t control the player yet. So let’s add the code into the update()  function, like this:

Great! Now if you test the game, you’ll be able to move the player and collide with the walls… but wait, you’re also colliding with the key, trap, and door. Why? Because all non-empty tiles (values other than -1) are automatically considered solid walls.

Since we already know how to replace the player tile with the player object, you can repeat the code for other objects. Let’s try to apply DRY (don’t repeat yourself) principle and modify our existing code, resulting in below:

Oops, I forgot about the door object, but you should get the rough idea by now. The code above isn’t complete, but it shows how we can parse the map objects manually, if you’re loading a single .CSV file.

There’s of course a better way to load map data, assuming you have multiple layers. Perhaps I’ll cover that in a separate tutorial next time.

In the meantime, you can check out HaxeFlixel’s official tutorial (Part 5), for a rundown on how to load OgmoEditor’s data file (which includes layers). StrandedSoft’s SHMUP tutorial (Part 2) also talks about loading TiledEditor’s TMX map data.

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.