2D Map Editor

• Download MapEditor - 264 KB
• Download MapReader DLL - 3.77 KB

Introduction

This is a somewhat simple application to make and edit 2D maps for your games. It's not full of fancy features, but it does get the job done. You can place tiles from a tile set, and define if they are solid or not, change the size of each tile, and add/remove tile sets. Oh, and of course, it can save and load to your hard disk - it wouldn't be much use if you couldn't save your map. The application also includes some settings (available through the menu/F7) so that you can change the colour of the grid and other information, change the font used in the controls, etc.

Background

A while ago, I made a very quick, very unstable map editor for a project. It wasn't very good, but now that I have the time, I have completely rebuilt it from scratch. So, this time, it actually works without crashing, the UI is simpler, and the resulting file is much neater.

Building the Application

The program is made up of three main things:

• A way to select tiles
• Somewhere to put the tiles
• A way to save and load the data

So, there are two main controls, the TileSelect, and the TiledMap. The TileSelect control is made of a PictureBox to display the image, a ComboBox to change the image, and a NumericUpDown to change the TileSize. The OnPaint event of the PictureBox is used to draw a grid over it so we can see where each tile is. The TiledMap is similar, but we need to put tiles onto it. To store the tiles, we use a 2D array of the class Tile; each instance of the Tile class has a reference to the image it is using and the XY position of the tile in that image.

When we click the TiledMap, an event is fired with information on which tile was clicked. The main form uses this event, and gets the currently selected tile from the TileSelect and sends this tile to the TiledMap.

The TileSelect and TiledMap do not interact with each other directly, they each have events that are fired when their properties change or they are clicked etc. The main form listens for these events and passes information between the two controls.

Drawing the Map

So, you have a map, 40*25 tiles that fills your screen. In the OnPaint event, you'd have to draw 1000 tiles. If you're using Graphics.DrawImage(...), then this is very, very slow. So, we have to take a step backwards and use the good old BitBlt from GDI. When the Tile Select control loads a new tileset, it also creates a HBitmap and stores it. That way, when we come to render the map, we can use this HBitmap and BitBlt to quickly draw it onto the screen. The only problem with using BitBlt is that it doesn't support transparency, but its a small price to pay for the application to work.

Saving Your Map

The file format is like this:

//FILE FORMAT

string "MapEditorFile"
{
  float [version number]
 
  //Tilesets (including images)
  long [length of Tilesets data block]
  {
    //Tileset
    long [length of tileset data]
    {
      int [tilesize]
      long [length of text]
      string [name of tileset]
      long [length of image data]
      {
        //Image data
      }
    }
    ...
  }

  //Tiles
  long [length of Tiles data block]
  {
    int [width of map]
    int [height of map]

    //Tile
    {
      int [src xpos]
      int [src ypos]
      bool [solid]
      int [tileset index]
    }
    ...
  }

  //Aditional data can be added without affecting
  // earlier versions of the application
}

As you can see, the images are saved within the file; this way, we don't need to remember to copy the image files with the map, and the user of the map can't just go around swapping/deleting the images.

Using the Code

Once you've made the map and saved it, if you want to use it in some game or other application, I've included a DLL with the MapReader class and other necessary classes. If you use the DLL to load your map, you will get a List<> of type TileSet. Each TileSet contains the image and its tile size, as well as a 2D array of Tiles, which contains a reference to the tile set it uses, its state (solid or not), and the X and Y positions of the tile in the image.

Points of Interest

The source code contains a few classes you might find useful elsewhere:

• ColourPicker - A simple combobox colour picker
• ReusableMessageBox - More of a cheat so you don't need to reproduce the same message box over and over

OK, a couple of classes you might find useful. Also, did you know that if you set a shortcut key for a menu item, and the MenuStrip has focus, the shortcut doesn't work? I don't know if it was just me, but there it is.

Well, I hope somebody finds this useful, and I hope I didn't go over the top on events. Well, until next time.

History

• 18^th May - Article posted.