Saturday, August 6, 2011

The Map Editor Version 2

Let me point out that at the time of writing this I am actually 3 or 4 blog posts ahead of myself so I am sort of back tracking to talk about the current version of the map editor.

The tilesheets (top) each have their own
frame in a tile mc.  That mc is masked.
The first version of the map editor worked, but I opted to expand it a little more before beginning to program my game client.  I knew that I could not make more than a tiny area using the 'click to circulate through tiles' method and I needed an easier way to navigate my tiles.  Also I had a ton of tiles that I wanted to use (most which I found on google images), but no way to import them into flash without going through each one and removing each tile from the tile sheet one at a time and creating a new movieclip for that tile (or actually a new frame within one movieclip).  Then using gotoAndStop(frame), the tile was selected.  Now, the tilesheet is selected in the same way, and then the tilesheet is masked so that only one of many tiles on it can be seen.

Some of many tile sheets.  Some had to be
resized so their tiles were 32x32 pixels
This is a questionable way to code a tile system, at best.  But it is a good way to quickly program such a game.  Ideally however, the tilesheets would be split apart using a 3rd party program, uploaded to the internet, and then reorganized together into the map editor.  Then when the game client is loading it gets a list of the tiles used in each zone and while that zone loads it loads in each individual tile.  Instead of using one mc that contains all the tiles, each tile would be loaded separately.  It would help a lot with lag and just be smarter programming, and I did use this system with my Online Mario World game, as seen on  However, it took me a lot of time to program this and now it is so large that after looking at it I decided against adapting the system for this game.  Instead I am starting fresh with this simple masking system, and if in the future lag becomes a problem because of too many of these performance heavy tiles, or if I want to make larger maps with more tiles, then I will adopt a better tile system.  Sometimes short cuts have to be used when you don't have a lot of time to program.  

The mc is relocated so that the tile we
want falls under the 32x32 px mask.
The 'correct' way of doing it took me 5 or so AS3 classes, a 3rd party program, and a couple php scripts.  The simple masking system I am using for this game takes only a few lines of code, as seen in the picture to the right.  So if you read my last post about the 3D grid, you might find it interesting that each element of the 3D grid now has 3 variables:  the tilesheet, and the x & y location on that tilesheet where our tile is located.

Another modification I quickly realized I needed was to add another shortcut (I used M) to switch between two modes.  One mode where dragging the mouse while holding the mouse button drags the map (so you can create zones bigger than the small screensize)  The other where dragging the mouse while holding the mouse button fills in any tiles you move over.  That way you do not have to click each tile just to place grass, etc.  It saved a lot of time and headache.

So right now I have a nifty map editor with 3 layers, 5 or so tilesheets, and many key shortcuts:  I, E, S, M, T.  You can test this version out here:

It uses a different zone specially for this test version, so it does save correctly.  The map editor is not meant for players to use though, so there are bugs that I ignore since it is just for my use right now.


No comments:

Post a Comment