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:
- HaxeFlixel RPG Tutorial : Part 2
- HaxeFlixel – A Beginner’s Guide (re: Part 3 – Moving Forward)
- HaxeFlixel Tutorial: Building your first 2D Shoot-em-up, Part 2
Map Editors
Here is a quick list of possible editors you can use to create tile maps:
- Tiled Map Editor – (Windows / OSX / Linux)
- OgmoEditor (Windows)
- PyxelEdit (Windows / OSX) – requires Adobe Air
- DAME Editor (Windows / OSX / Linux) – requires Adobe Air for OSX/Linux
And here is a list of of sprite editors you can use to create tilesheet images:
- Aseprite (Windows / OSX)
- PyxelEdit (Windows / OSX)
- GraphicsGale (Windows)
- Pickle (Windows / OSX) – requires Adobe Air
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
package; import flixel.FlxState; import flixel.FlxG; class MenuState extends FlxState { override public function create():Void { super.create(); } override public function update():Void { super.update(); } override public function destroy():Void { super.destroy(); } } |
Now let’s add the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
package; import flixel.FlxState; import flixel.FlxG; import flixel.tile.FlxTilemap; import openfl.Assets; class MenuState extends FlxState { override public function create():Void { super.create(); var tileMap:FlxTilemap = new FlxTilemap(); var mapData:String = Assets.getText("assets/data/my-map-data.csv"); var mapTilePath:String = "assets/images/my-map-tilesheet.png"; tileMap.loadMap(mapData, mapTilePath, 16, 16); add(tileMap); } ... } |
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.