Flash Punk Level Editor

Out of a desire to ease the creation of tilemaps in Flashpunk and a reluctance to use Ogmo or Dame (figured I would learn more this way) I wrote a script that automatically creates tilemaps by reading image data. Essentially it does this:

By inputting something like this:

override public function added() : void
{
	LevelEditor.DefineTileset( "test", testImage, tileChart, 48, 48 );			
	var newTM:Tilemap = LevelEditor.CreateTilemap( "test", testMap );			
	var newG:Grid = LevelEditor.CreateGrid( "test", testMap, collisionChart );		
	LevelEditor.PlaceEntities( "test", [ Player, Pickup ], entityChart, entityMap );
			
	graphic = newTM;
	mask = newG;
	type = "level";
}

This code was excerpted from the Level.as script of the example project, please forgive the sloppily assembled player collision if you try out the example.

Now I’ll go through the functions to explain what everything does/uses, or you can skip around with these links.

Defining a Tileset
Creating a Tilemap
Creating a Grid
Placing Entities
Miscellaneous Notes
Downloads

Defining a Tileset

This is defining a tileset to later be called by name.

LevelEditor.DefineTileset( "test", testImage, tileChart, 48, 48 );

Parameters
1   name   is just the name you want in a string value, it can be whatever you desire.

2   imageSource   is the image you wish to use as a tileset. It is the same as what you would input in Flashpunk’s Tilemap() function for the tileset.

3   tileChart   is where it starts to get a little different. The tile chart is something you must make that can either be an image or an array. As an image it is very similar to the tileset in parameter two, only every tile is represented by a single colour one pixel in size. Therefore a tileset like this:


Would have a tile chart that looks something like this (the actual chart would only be 7 pixels wide and 2 deep):

It doesn’t matter which colours you choose, just ensure that you do not reuse colours. This image will be used as reference later and to draw your maps so ensure that you pick colours that make sense to you.

As an array you may simply input all the colour values into an array. This array should be indexed in the same order as the tileset, so this particular tile chart as an array would look like:

[ 0xffffff, 0xbabaa1, 0xbebe7a, 0xff8080, 0xff0000, 0x8086ff, 0x000cff, 0x000000, 0x7c7c6a, 0x79794b, 0x9c4848, 0x980000, 0x4d519e, 0x00079b ]

It’s feels messy that way, but I figured I might as well include it for anybody who hates having those extra image files.

4   tileWidth   is the width of an individual tile for this tileset.
5   tileHeight   is the height of an individual tile for this tileset.

Creating a Tilemap

This is actually creating the tilemap and assigning it to a variable. I recommend assigning it to a variable so you can access all of Flashpunk’s default Tilemap variables and functions through it later if you want.

var newTM:Tilemap = LevelEditor.CreateTilemap( "test", testMap );

Parameters
1   tileSet   is the name of the tileset you wish to use. This will then be able to access everything you initialized for this tileset in the DefineTileset() function like its size, graphic, and tile chart.

2   mapSource   is where you get to use those colours you set up in the tile chart to draw a layout for your map that might look something like this:

Like the tile chart every tile is only one pixel in size, so the actual image passed into the function for this example would only be 10 by 10 pixels. You can make this image whatever size you want just keep in mind that every pixel will equal one tile, so in this case every pixel on the map image is equal to 48 pixels in the game.

3   initialX   will set the x position of your new tilemap
4   initialY   will set the y position of your new tilemap

Creating a Grid

This is creating the collision grid and assigning it to a variable. Once again I recommend assigning it to a variable so that you can access all of Flashpunk’s default Grid variables and functions later on.

var newG:Grid = LevelEditor.CreateGrid( "test", testMap, collisionChart );

Parameters
1   tileSet   is the name of the tileset you wish to use. For this function it will be used to access the tilewidth and tileheight attributes of that particular tileset.

2   mapSource   will likely be the same as what you used for CreateTilemap(). Only it will be using a different chart from the tile chart that is defined in the next parameter.

3   colliderChart   is just like the tile chart, so it can be passed as an image or an array. The difference is that it consists of all the colours that correspond to collidable tiles. For the example here the collider chart image would look like:

Since the only tile I did not want to collide with was the floor(white) I just changed the white pixel in the tile chart to black. Order isn’t really important for this chart as long as it consists of all the collidable tile’s colours.

Entered as an array it would look like this:

[ 0x000000, 0xbabaa1, 0xbebe7a, 0xff8080, 0xff0000, 0x8086ff, 0x000cff, 0x000000, 0x7c7c6a, 0x79794b, 0x9c4848, 0x980000, 0x4d519e, 0x00079b ]

4   initialX   will set the x position of your new grid
5   initialY   will set the y position of your new grid

Placing Entities

This function place entities by use of the charts and maps if you did not want to place them manually.

LevelEditor.PlaceEntities( "test", [ Player, Pickup ], entityChart, entityMap );

Parameters
1   tileSet   is the name of the tileset you wish to use. Like CreateGrid(), this function only uses it to access the tileWidth and tileHeight properties.

2   entities   is an array of the entities you wish to place. Since I am only placing the Player and Pickup entities in this example the array is [ Player, Pickup ].

3   entityChart   is like any other chart so far, it can be an image or array. You will want to create the image or array in the same order as the entities array. So for this example the image would look like:

And the array would look like:

[ 0x0000ff, 0xffff00 ]

So put simply that is blue for the Player and yellow for the Pickup.

4   mapSource   is much like the map used in CreateTilemap() only it should only show where entities are to be placed. The map image for this example would look like this:

5   world   is the world you wish to put these entities in to. This value will default to FP.world if you leave it null.

Miscellaneous Notes

graphic = newTM;
mask = newG;
type = "level";

This is simply setting the graphic of the Entity we are calling these function within to be the tilemap. Then it sets the collision mask to the grid we defined and the collision type to “level”. It is entirely up to you how to do this part, this is just the most straight forward way.

override public function added() : void

Since the PlaceEntities() function uses FP.world it is dangerous to call it from a start up function as FP.world is not assigned until the end of the frame. So if you are changing worlds and calling these functions on the same frame the entities will be added to the old world and not the new one. By overriding the added() function we can ensure that it calls the functions after the world has been changed over.

All of those steps put together give us a result that looks like this:

Downloads

Download Example Project
Download Level Editor Script

Let me know if anything goes horribly awry or if you have questions.

© 2016 Suffusion theme by Sayontan Sinha