Introduction

In this tutorial I will teach you on how to use the Flan multi-layer tilemap editor (Alpha 1).
This editor is used to make tilemaps for Flixel.
I will post updates on new features when implemented, tagged with the keyword "Flan", so consider subscribing to the rss feed.

EDIT: There are slight changes in Alpha 2 and an error in this tutorial addressed below. Remarks are in red.

We are going to make a 3 layer map in Flan and modify the version of the game Mode that ships with the flixel package.
Here's a sneak peak of how it will look after we finish.

First download the flixel package and the Flan Map Editor.
Create a project on your favourite IDE.
You can read how to configure your project to compile Mode on the following forum threads: FlashDevelop FlexBuilder MXMLC etc...

For example, I made a AS3 Project on FlashDevelop at the "G:\trying_flan" directory.
When you successfuly compile and run Mode, continue reading.

The editor

Now let's open up Flan so I tell you the basics.



In the screenshot you can see the main screen and two tool windows.

On the main window you'll "paint" your maps and save/load single-file ".flan" maps (using the File Menu).
Remember to save from time to time to avoid loosing your work! You can by pressing Ctrl+S, so there's no excuse.

Let's talk about the Properties window because it's where you're going to set all the configurations.

Map Tab
You should fill the Map tab fields with estimative values and a default tileset. When adding new layers they will default their options to this configuration.

• Make a 40 by 20 map, using the Mode tileset. Click browse button and search in flixel's source "data" directory for"tiles_all.png".
• Set the name to "Test" (Generated code will use this name).
• If you want, change the background to black, to be more similar to Mode's.
• Click on apply changes, this is important.

(The palette shouldn't show anything yet, as there are still no layers.)

Layers tab

In this tab you can add all layers you want. Let's add 3 layers called: Background, Main and Foreground.
I'll guide you on how to configure one and you do the rest.


Click on the add button on the Layers tab. Now go to the Layer options tab.
There you can configure each layer with specefic options.


Let's pause a little to go to the palette window. It's really straight forward.
Left click selects a tile type to paint with it on the main window.
Go on, try it, I know you're probably bored to tears right now :)
There's zooming in case the tiles are too small and you can't see anything.

Well, let's go back to the Layer options tab.
Here you should set the first collidable tile index and the first visible tile index.
If you don't know what is this all about, I recommend you to read some documentation on the FlxTilemap class constructor.
On Mode's tileset, as you can see, the first visible tile is on index 1 (index 0 is the first, as indexes start at zero), and the first collidable on index 3, so let's set it this way.
Let's name the layer "Main", and leave the "Main layer" checkbox on.
Don't forget to click on Apply changes!
If you resize it's dimensions to smaller values, the application will warn you that cropping could occur.

Add the three layers I mentioned before, and on the layers tab, order them like this:
Foreground
Main
Background

Now go to the main window and draw a map. Left click paints.
Use the palette to choose tile types or optionally use the right click as a "pipette".

You can select each layer just by clicking on them at the layers tab, and hide or show a layer for comodity while editting (or performance if it's running slow).

Next there is an example of a map I made (commented).


Exporting AS3 code and CSV tilemaps

This might be a drag, but it's only needed to be done once.

We will now export all the map data to code and comma separated values (CSV) tilemap text files, and fit it in our code.

Go to the Import/Export tab on the properties window.
Choose the directory where you want to put the maps (CSV) and the directory to generate the code to (AS3).
I use the same directory as the sources for the map code, and a "maps" directory inside of it for the tilemap CSV text files.

EDIT: In Alpha 2 there is an option to called Use base map class.
You can deactivate it in order for this tutorial to be more similar, although is better to leave it on.

Click on Export all. You can later use Export only CSVs if you keep the map format (i.e. layer count/names) or have modified the code yourself and don't want to loose the changes but want to update the map tiles.

Let's stop with the editor for a little while, and get to hack Mode's code.

In Mode.as, replace this
import com.adamatomic.Mode.MenuState;
and this
super(320,240,MenuState,2,0xff131c1b,true,0xff729954);

for this
import com.adamatomic.Mode.PlayStateTiles;
and this
super(320,240,PlayStateTiles,2,0xff131c1b,false,0xff729954);
respectively

This will make the game go directly to the gameplay, but not to the randomly generated map like game (Mode's default configuration), but an internal (old?) code that loads from a tileset.

In PlayStateTiles.as remove the following lines:
[Embed(source="../../../data/map.txt",mimeType="application/octet-stream")] private var TxtMap:Class;
[Embed(source="../../../data/map2.txt",mimeType="application/octet-stream")] private var TxtMap2:Class;
[Embed(source="../../../data/tiles_all.png")] private var ImgTiles:Class;

We won't need them anymore

Let's go back to Flan Map Editor for a second.
Click on the "Generate code for FlxState and copy to clipboard" button on the Import/Export tab.

Switch to the text editor again (PlayStateTile.as)
and paste the code.

it will be something like this:

\t\t//PUT THE FOLLOWING INSIDE YOUR DERIVED FlxState CLASS (i.e. under 'class MyState { ...')
\t\tprivate var _map:MapTest;

\t\t\t//PUT THE FOLLOWING INSIDE YOUR DERIVED FlxState CLASS' CONSTRUCTOR (i.e. inside function MyState()...)
\t\t\t_map = new MapTest;
\t\t\tthis.add(_map.layerBackground);
\t\t\tthis.add(_map.layerMain);
\t\t\tthis.add(_map.layerForeground);

You should replace the old "_tilemap" with our generated flan map:
replace this
private var _tilemap:FlxTilemap;
this
_tilemap = new FlxTilemap(new TxtMap,ImgTiles,3);
and this
this.add(_tilemap);

for this
private var _map:MapTest;
this
_map = new MapTest;
and this
this.add(_map.layerForeground);
respectively.

We just need to add only two more generated lines and we're set.
Because we want the main and background layers to be drawn before the player, we should add these two to the FlxState before the player:
this.add(_map.layerBackground);
this.add(_map.layerMain);
before this:
this.add(_player);

EDIT: We should add these layers even before, before the bullets added... or else the bullets will be drawn before the background and main layers!

Finally, as our main layer is the one that's going to be the only collidable one,
all references to "_tilemap" should be replaced by "_map.layerMain".

Compile and run, or see how it looks/works online clicking this link!

Download the project

You can download the FlashDevelop project here. It's already been hacked and it includes the ".flan" file so you can start using it directly.

Just in case, here's the Flan download link again.

Remember to give all feedback you like at the forums or drop a comment on this blog post!
Thanks!

-Martín