Tilebased games in Flash 5 – Part 9

Now something about editors, when I say editors, I really mean map-editors. Say you´re working on game and you´ve got the basic game-engine working the way you want it to, and now you wanna start making more maps, rooms, levels or whatever. It´s quite a drag to open up a text-editor and start making giant arrays, writing numbers/references for tiles…

So therefor it can be a good idea to create a editor where you can visually draw the tiles, like big pixels, and then when you´re ready, just generate the array and copy-paste it to whereever it should be.

There are of course many ways of doing this, depends on how you like to have it. This is how I like it… I´m not gonna go through any code since this is pretty basic stuff. I´ll just explain the different functions and what they do…

First I define how big the map should be(how many tiles wide and high), in this example I have some input-boxes so we can define that at runtime.

When we know that, we can set up an empty map-array, just as big as the maps width and height. If we also know the tiles width and height, we can draw an empty grid. And this is exactly what we do in the setUp-function.

Then we duplicate the different tiles which we are supposed to choose from.

Then we have draw-function, which basicly just checks if we have the mousedown on the grid, exactly what tile we are over. Then it attaches a tile-movieclip there, makes it jump to the correct frame, and updates the array we created in the setUp-function.

We also have a generate-function, which generates a string of how the current array looks like. Just loops through the array and builds the string.

Now when we have this string, we also have the map, copy-paste…

This is my example:

Download the fla.

Of course we shouldn´t have numbers on the tiles in a real editor, but instead the actual tile-graphics…

If we were to create maps for games like Super Mario, it would be a good idea to make horizontal scroller, since these maps are very wide and we can´t fit the entire map on one screen.
And if we were to make preffered angles for something like the the ai-cars in tutorial 6, maybe we would have 8 different angles and then just paste a screenshot of the map in the editor and draw the different angles on top of that.