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 tabIn 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:
ForegroundMainBackgroundNow 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 tilemapsThis 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 thisimport 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 projectYou 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
Posts
