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:

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:

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();
    }
}

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:

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);
    }

    ...
}

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.

2 thoughts on “HaxeFlixel Tutorial – Loading Tile Map Data”

hookup apps says:

Hookup Women Uses Free Matters? An Incredible Side to side Reward!

Free of charge hookup ladies hookup apps on the internet is the answer if you’re tired of gonna night clubs and
clubs only to be ignored, as well as a whole lot worse, laughed at.
I am aware what it’s like because I’ve been there. I found myself single and distressed in the time
— I needed a new partner — but I continued attempting because I had not
any other selection. If you’re a single gentleman who wishes to
hookup with attractive girls without planning to those locations where ladies are by itself, then this write-up may just alter your life.
It would describe why dating on the web is the ideal alternative if you’re a masculine
who is shy to technique a lovely woman inside a nightclub or membership.

June 8, 2021 at 10:14 AM
Christin says:

I saw a lot of website but I think this one has something extra in it.

August 16, 2020 at 6:54 PM

A Programming Devblog

Infrequent updates

Menu

Widgets

Search

HaxeFlixel Tutorial – Loading Tile Map Data

Map Editors

Load Map In HaxeFlixel

2 thoughts on “HaxeFlixel Tutorial – Loading Tile Map Data”

Leave a Reply Cancel reply