next »

[Titch]

Writing a level editor is a pain. Why do that when you could just use a tileset editor like Tilestudio or Mappy to lay out the level. Since Flixel uses a really standard text array input for tilesets, it's absolutely ideal for using a tile based mapping program to edit with. This is the meathod I've been using to work on my Flixel based game Level Up

To lay it out, this method uses FlxTilemap and you need to download a copy of Mappy and this script file + examples that plugs in to Mappy to output the map in a format that Flixel can understand.

First you need to prepare you tileset, if you haven't already. As far as I know all tiles in Flixel have to be square and laid out in strips. It's important to note that non-colliding tiles go at the START of a tilestrip. If you have to change the arrangement of tiles in the strip at a later point it will play absolute HAVOC with your map. Unless you are 100% CERTAIN, leave some space for later.


Here is an example set if you don't want to make your own just to try this out. Based on my previous advice this is crappy layout for the tiles, but I was trying to minimize the size of the file.

So the first job is to set up the script for use in Mappy. Once you've downloaded Mappy itself you need to extract the script file to the /luascr/ folder inside the directory with the mapwin.exe. You also need to edit MapWin.ini and add the extra script into the custom script menu, by scrolling down to where it says:

Code:

;
;    lua scripts
;    these are files in the luascr folder, they are textfiles that allow
;    custom functions to be written (see www.lua.org for language details)
;    to add them list them here preceded by lua01 to lua16, they appear
;    in the Custom menu. You can also drag and drop .lua scripts onto the editor
;

And add this at the bottom of the list

Code:

lua16=Export Flixel Tilemap.lua

(In my setup, I replaced the flash script with the Flixel one to put it at the top of the menu)

Now open up Mappy. Open the File menu, select that you want to make a New map. You have to input the dimensions of the tiles and the number of tiles in the map. If you are just testing the functionality you will probably want to downsize the map from 100x100 to something smaller. If you are using the example chipset, set your tile size to 16x16. Then hit File and then Import. Select the file you want to import and they should pop up in the right hand column.

Now draw your Map. Mappy has a ton of different functions that I don't really want to go into right now. This method doesn't support animated tiles. If you want to do layers they have to be exported seperately and then arranged to be added in order in the code. In the future I'm going to update the export script to better handle multiple layers (or someone else can to).

Once you map is drawn out. Go to the Custom menu and select Export Flixel Tilemap. It will ask you to provide a filename and set an amount to shift the tiles by (It's best to leave this at -1 unless you know what you are doing). You should then get a big long comma delimited textfile full of numbers that you can import using FlxTilemap.

Setting up the map in game is a simple as  

[Embed(source = "data/example_map.txt", mimeType = "application/octet-stream")] public static var data_map:Class;
[Embed(source = "data/example_chip.png", mimeType = "application/octet-stream")] public static var data_tiles:Class;

var myMap:FlxTilemap;
myMap= new FlxTilemap(new data_map, new data_tiles, 3, 1);
add(myMap);

Obviously you substitute example_map.txt for your own generated txt file from Mappy and example_chip.png for your own chipset when working on your own map. It's worth note that you can import multiple maps this way and layer them infront/behind the character. The main collision map is a good place to put other deco objects that appear in front of the player. I usually set up another map that is added before the player sprite as a background area.

OTHER NOTES AND STUFF:

I will update the Mappy export script to handle better layers nicely.
I will add some kind of compilable flash code to demonstrate this.
There are still some bugs with tiles not appearing correctly in Flixel. I will also adress these in the near future.
For some reason I still can't get Mappy to see transparncy on my tilesets. If anyone else has any luck with this please let me know.

Oh, and I'm sorry for being needlessly verbose >_>. This turned out to be really handy for me, so I hope it can help others.

[Adam Atomic]

F*cking radical my friend   Added to the general help thread

[ahref]

Thank you seems miles simpler than the other methods i have read. Which is good for me as a beginner.

I would love a compileable example though.

[allenp]

Perfect - thank you. This makes it sound so easy!

[Titch]

I'll get some more complete/compileable examples up in the next few days. I wrote this method as part of the project I'm busy working on, so when time permits I'll take a break from it and work on tutorializing this stuff better.

Since I posted this I wrote another version of the same script that compiles the entire tilemap to XML and can handle an entity list so you can populate your map with enemies/pickups whatever else. So I want to write an alternative version of the tutorial for that to...

[Mr Dumle]

Please do! 

[Titch]

Script is written. Tutorial is...not. I'm working on making a complilable example that is both elegent and readable. I'm hitting a ton of roadblocks to do with the fact mappy can't associate information with LAYERS it can only associate info with blocks. This makes it a pain to work out how to assign parallax/collision when importing into flash.

ZEE SCRIPT + SAMPLE XML OUTPUT

Basically you end up with an XML file with two lots of nodes. Layers and Objects. Once you've got the xml into flash you can simply write something along the lines of

Code:

for each (var layer:XML in xml_map_data)
{
add FlxTilemap(layer,tileset);
}

Simple. Only it isn't. Because you need a few bits of data when you bring the map in, like which layer is the collision layer or layers if you want to waste a bunch of processing power on arrays. Since you can't write this information in Mappy, the only other options are.
a) Add it into the XML manually. This will play hell with the fast pipeline this system was supposed to set up because re-export the map murders the custom tags
b) Hardcode it into the game. I did this in Level Up. So my layers are done like this

Code:

m_main_map = new FlxTilemap (map_data.layer[2],main_chipset,63,1);
m_parallax_map = new FlxTilemap (map_data.layer[0]);

I consider this solution LESS than awesome for a tutorial simply because it's so inflexible. Although it does make for nice and readable code.
c) Write some external text/xml file that Mappy can read and get parameters from. So when you make your map you also create a MapInfo.txt that you select when you run the script and it autogenerates the XML based off the parameters in the file. I am slightly dubious as to how achiveable this is, my experiance with Lua isn't amazing.

XML DOES have the nifty feature of an object list. Basically you place down a marker tile in Mappy. Set the tiles user value to X. The output will then add that tiles location to objects as:
<OBJX x="" y="">
Again you can easily read this off and use it to instantiate enemies/pick-ups or anything else that isn't a tilemap. In the near future I would like to add support to be able to associate object values with names. So instead of getting OBJX you would get "COIN" or whatever you write in for the tile string. I would also like to add support for more custom value. Since mappy tiles can carry up to 7 id's you could have 6 other unique bits of data like health, value, speed, whatever else.

Anyway, I've rambled on enough for 2am. Good luck and I'll be back in a few days with a real tutorial with code, pictures and lord knows what else.

[Trufforce]

Do you think it would be possible to have a layer to position the sprites, maybe using an array of FlxSprites?

[Titch]

I used marker tiles to position my sprites, because a whole layer of data is a bit excessive to record a handful of sprite positions. Plus I it allows me to record more information on the marker tiles to be included in the XML, like speed, health, value or whatever else.

So you double click on a tile to open it's block properties set it's user value 2 to the reference you want for that sprite in game and then place it on a separate layer that you aren't using (which is in essence your sprites layer, it's just you are going to junk the acctuall layer data in the XML cos you don't need it).


Like so.

Then to translate that into an array you just need a little snippet of code this this:

Code:

var list :XML = Library.level_data.objects[0];
var item:*
var o:XML
for each (o in list.OBJ6)
{
m_enemies.push(new LevSpiker (o.@x, o.@y));
}
for each (item in m_enemies)
{
m_layer_game.add(item);
}

Each .@x parameter specifies a bit of data in the xml entry for that object, so you could potential encode extra data on the marker tile and mod the script so that you could so something like

Code:

m_enemies.push(new LevCustomEnemy (o.@x, o.@y, o.@strength, o.@money))

Or whatever.

The two big caveats to this is one that the objects list is an unreadable mess. Which is a limitation of mappy, I can't work out how  easily associate strings with tiles. The other is that the XML will contain a layer of junk data or your sprites layer. Which needs to be deleted pre-release (theres no point in deleting it during development because the mappy XML output will just generate another one) which is also because there is no function in Mappy for checking the name of the layer. Although I am considering just having it omit the highest layer.

Given that Flan is out now, I think the whole Mappy solution is a little bit hacky and you might be better of directing your intrest at that.

[Trufforce]

ah ha, thanks 

[knugen]

This is an awesome method for level creating, thanks for sharing

I was playing around with my own camera movement on maps created with this, and while doing so I used the height and width properties of the FlxTilemap to determine the "camera bounds". Turned out though that height was exactly one tile bigger than it should be, and this was due to an extra, empty, line in the map text file.

It could of course be removed easily, but it would be a tedious thing to do each time you export a map so I took a look at the Lua script file (for the exporting): It adds a seemingly unnecessary new line just before finishing up, so I prevented that by commenting it out (the affected line is #50).

Code:

...
y = y + 1
end
-- outas:write ("\n") -- Unnecessary (?), so "removed"
outas:close ()
...

Of course it would be best if FlxTilemap removed empty lines before doing anything else, it's quite easy to do so I definitely think it should be in the next release. I could make a mod on my own, but for now I'm satisfied with just removing that line

[Titch]

Well I am going to do one more release of this before I port over to Flan for my mapping purposes, so kudos for spotting that and I'll make sure to adjust the script accordingly. The trailing /n is probably a remnant of when I was trying to make sure the XML formatted correctly (FlashDevelop doesn't nicely auto format XML and I don't like trying to read a mess  ).

[Rybar]

Mappy crashes on me when importing any PNG tile strip, even with the extra DLL's mentioned on the Mappy webpage.  If I re-save the images as bmps, it works. but I would like PNGs to work, for transparency.  Anyone else having this problem?

[Titch]

I had this problem initially, I think on my Vista computer.

I can't remember exactly how I solved it, I think I got the DLL from another source or had to move the file to a new location. Sorry I can't remember more specifically, it was a while ago when I set it up.

[jordan_magnuson]

Mappy crashes on me when importing any PNG tile strip, even with the extra DLL's mentioned on the Mappy webpage.  If I re-save the images as bmps, it works. but I would like PNGs to work, for transparency.  Anyone else having this problem?

Just in case anyone's still having this problem: I had to put the dll files from here in my windows/system32 directory to get png's to work on Windows XP.