The Map Editor Version 1

The Code
The map editor is a stand-alone client apart from the main game client.  They will not be sharing any code.  I have broken the map editor down into 6 classes:  Main, Map, References, SaveMap, TileChooser, Ui.  Most of the interface happens on the Map class, and you can probably guess what the rest is for.  


Within the Map class is a 3D array called grid.  This array contains the visuals of all the layers of the map; it is essentially the data of the map...  So it will be what is uploaded to the games database and saved in the end of the day, and the only piece of the map editor that the real game client will ever see.  Since this is a tile-based game, each tile has its own element on the grid array.  grid[0][1][2] would be represent layer 0, x location 1, y location 2.  The value will be an integer based on what tile is chosen for that location on the grid.

This is pretty standard stuff and can be seen on most RPG making tutorials.  A similar 3D array holds the instances of each tile (the visual representation of each tile), which I call images.  It is important that the array is 3D, not 2D.  Obviously the game is 2D, but I want to have some layers on top of the players character and some behind.  I will probably be sticking with 4 layers:  Layer 0 will contain the basic background tiles (usually grass or cobblestone).  Layer 1 will contain objects like bushes, houses, and doodads like tree trunks.  Layer 2 will contain the player and interactive objects like NPCs or signs.  Layer 3 will contain foreground objects like the top of trees.  That way when the player walks behind a tree the tree stays in front of the player.


Using It
Clicking on the map goes through the tiles.  So if you click on a piece of grass, it turns into a barrel.  If you click on a barrel, it turns into a stone.  If you click on a stone, it turns into nothing.  If you click on nothing it turns into grass.  There are only these three tiles.  During my next expansion to the map editor, I will be adding more tiles and a new system for choosing your tile, because once there are 100+ tiles the map creator really will not want to click so many times just to find the single tile he wants.

This code takes the mapdata already retrieved from the
server and adjusts it  so that the grid is the correct size

Right now there is a small box labeled 'circulation'.  This is a temporary fix for the problem where I do not want to click through the tiles.  If circulation is empty, then all tiles can be clicked through.  If you fill it in with a number like '1', then only that corresponding tile will be in the circulation when you click a tile.  So entering '1' alone in the circulation box effectively makes any tile clicked into grass.  If you press I (for ID), whatever tile is being hovered over is added into circulation.  If you press E (for eyedropper), the circulation is cleared and the hovered tile is added to circulation (alone).  Other keys include T to toggle map editing (so that you can easily drag the map around and see different areas of the map without making accidental modifications), and S to save the map.


It is effective enough to make a small map, but I think I will be working on making it better before I start working on the game client.

This is version 2 of the map editor.  I don't
 have any screenshots of version 1 saved.

The maximum map size right now is 100x100 tiles.  I don't think it would be a problem to make that bigger, but I probably wont go over 200x200 because of lag.  200x200x4 layers could mean 160,000 tiles in one zone!  That is actually not very much compared to what is seen in some games, but because we are working with AS3, that is quite a bit.  AS3 is notorious for not being able to handle a lot of movieclip objects at once.  So instead the game will need to be broken down into zones, which is a good idea anyways, because I may want it to be that players can enter houses or dungeons in the future.  I included zones in my scripting, but right now the game always refers to the same zone: 'testzone2'.


We will see an example swf that you can actually play with in the next blog post.


Lss