Author Topic: Drawing Tilemaps for Flixel using Mappy.  (Read 27697 times)

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Drawing Tilemaps for Flixel using Mappy.
« on: Mon, Jul 27, 2009 »
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: [Select]
;
;    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: [Select]
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  

Quote
[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.
« Last Edit: Mon, Jul 27, 2009 by Titch »
Free cake whippings every day at #flixel on irc.freenode.net.

Adam Atomic

  • Founder
  • Key Contributor
  • *****
  • Posts: 852
  • Karma: +0/-0
  • new dad
    • View Profile
    • Adam Atomic
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #1 on: Mon, Jul 27, 2009 »
F*cking radical my friend :D  Added to the general help thread

ahref

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #2 on: Tue, Jul 28, 2009 »
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.

« Last Edit: Tue, Jul 28, 2009 by ahref »

allenp

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #3 on: Tue, Jul 28, 2009 »
Perfect - thank you. This makes it sound so easy!

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #4 on: Wed, Jul 29, 2009 »
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...
Free cake whippings every day at #flixel on irc.freenode.net.

Mr Dumle

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #5 on: Sat, Aug 1, 2009 »
Please do!  :D

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #6 on: Sat, Aug 1, 2009 »
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: [Select]
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: [Select]
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.
Free cake whippings every day at #flixel on irc.freenode.net.

Trufforce

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #7 on: Fri, Sep 11, 2009 »
Do you think it would be possible to have a layer to position the sprites, maybe using an array of FlxSprites?

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #8 on: Fri, Sep 11, 2009 »
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: [Select]
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: [Select]
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.
Free cake whippings every day at #flixel on irc.freenode.net.

Trufforce

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #9 on: Sat, Sep 12, 2009 »
ah ha, thanks  ;D

knugen

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #10 on: Thu, Sep 17, 2009 »
This is an awesome method for level creating, thanks for sharing :D

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: [Select]
...
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 ;D

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #11 on: Fri, Sep 18, 2009 »
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  ;) ).
Free cake whippings every day at #flixel on irc.freenode.net.

Rybar

  • Contributor
  • ****
  • Posts: 279
  • Karma: +0/-0
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #12 on: Wed, Oct 14, 2009 »
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

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #13 on: Thu, Oct 15, 2009 »
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.
Free cake whippings every day at #flixel on irc.freenode.net.

jordan_magnuson

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #14 on: Wed, Oct 21, 2009 »
Quote
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.

Polaris666

  • Member
  • **
  • Posts: 13
  • Karma: +0/-0
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #15 on: Sun, Nov 22, 2009 »
I'm testing this to see how it goes, and it's pretty cool, I ran into a problem though.

I made a .png of 32x16 with a couple of 16x16 tiles. I then did a map on Mappy,  exported it with the script and when I load it onto Flixel... I found that the very first tile type wasn't showing up.

So I go an check the .txt file and to my surprise the numbers that were supposed to be the first tile had only 0's on them, just like the black tile that Mappy adds by default to any tile strip imported. After seeing that I figured that the -1 was to compensate for that black tile.

What is the best way to handle this? Do I make my tile strip so that it includes a transparent tile at the beggining, and use that instead of the default used by Mappy? Or there is a better way, I sure hope so.

-------------------------------------------------------------------------------------------------

Update: My bad I just read again the Basic Tutorial and that last thing I wrote is pretty much the way to do it... Yeah I feel real dumb right now :P
« Last Edit: Sun, Nov 22, 2009 by Polaris666 »

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #16 on: Sun, Nov 22, 2009 »
I later discovered there is a way to stop Mappy stripping that tile out in the mappy settings. If you put
Code: [Select]
importskip=2
In MAPWIN.INI it stops stripping early tiles out. You might want to edit the defualt for the script to point at 0 if this works so you don't have to keep changing it.

I really should update this tutorial, but it's kind of split into two scripts now when I had to do a re-write so I'm not sure if I should keep the two versions running together or cut one out. The newest version I have only takes objects from the top layer so it can automatically strip the tile data out of the XML file and save a bit of space.

I've also been thinking about adding an alternate tile loading script so that you can easily 'refresh' a strip you already loaded rather than having to re-import it.
Free cake whippings every day at #flixel on irc.freenode.net.

Scrufalicious

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #17 on: Tue, Nov 24, 2009 »
Okay, so I'm VERY new at programming/making games, so it's quite possible this answer is fairly obvious and I'm just a buffoon, but using Mappy, can you make the non-tile portion of the map = 100% alpha (See through) so that you can put a LARGE image in the background opposed to just meticulously adding it AROUND platforms that are in the background image. Because the issue I have is this:

The top picture shows me putting the image in FRONT of the map.txt layer, which covers up all platforms, and the bottom picture shows me putting the image behind it, which is COMPLETELY covered up by the black background that exported with Mappy.

I'm not necessarily trying to 100% make a game yet, I'm just trying to see what I can/cannot do with Flixel and have been stuck on this issue all day...  :-[ Any help would be MUCH appreciated!

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #18 on: Tue, Nov 24, 2009 »
Try setting drawIndex on Tilemap to 1 so it skips drawing all 0 tiles so they don't block visibility. So when you add the tilemap to your stage just set the fourth parameter on new FlxTilemap to something greater than 0, and then make sure all your non-collision transparent tiles are lower than that.

function FlxTilemap (MapData : String, TileGraphic : Class, CollisionIndex : uint, DrawIndex : uint)

I'm pretty sure I've never had this problem before though. Would you mind posting your map.xml for me to have a look at?
Free cake whippings every day at #flixel on irc.freenode.net.

Scrufalicious

  • Guest
Re: Drawing Tilemaps for Flixel using Mappy.
« Reply #19 on: Tue, Nov 24, 2009 »
Dang! I was hoping that was going to fix it because it totally makes sense, but then I looked at my FlxTileMap.as and my DrawIndex uint is already = 1:



This is the map.txt file, is that what you mean for the .xml file? Because I feel like this is the only file related to it I have, if I'm supposed to have more, perhaps that's the problem?  :-\