Friday, 15 November 2013

My code - Javascript Map Editor

When I was going to participate in Ludum Dare, I knew I needed some sort of map editor, so I wouldn't be left having to create levels by editing values in lines and rows of some big matrix in the code. However, I desired an customized map editor that was highly adapted to my specific needs of fast level creation for the 48h Ludum Dare competition. Therefore I needed to create my own map editor.

I knew this would be rather difficult to make in C++, my favorite programming language, since I never took the time to learn any GUI library. I then decided to create it in HTML and Javascript, since HTML has built-in GUI elements, like buttons, text boxes and drop-down menus.

You can play with the Javascript map editor here. It's entirely contained in a single HTML file with 767 lines of code (!). Note however that it probably does not work in Chrome. It was tested, and works in, both Firefox and Opera. I don't know about IE. E se você for brasileiro olha o título da página pra ver se entende a piada.


Even though I programmed this map editor in HTML and Javascript to run it in Firefox 13.0, I didn't use HTML5 technologies like the canvas tag. This was a very curious decision, since canvas would be the obvious way of implementing the tiles field.

Instead, every tile is a single image inside div tags, with onclick pointing to a function inside the Javascript code that triggers actions into that tile according to the context. Each image has also colored borders, that indicate the block type for that tile.

This was a twofold decision. This avoids the need to keep track of scrolling, by example, because it's automatically created by scrollbars in the div tag. However, this means that every time you create a new map, HTML code for hundreds of img tags must be inserted, and every time a single tile changes, this code must be changed. The result is that this map editor is very slow and memory-hungry. Creating large maps is nearly impossible.

Another twofold decision was to not use any kind of map saving/loading format. Instead, the map editor creates C++ code representing the map to be included directly in your game. Here is a example of this generated code:


#ifndef MAP1_H
#define MAP1_H

// The following code was           
// automatically generated by       
// my javascript map editor.        
// It exports maps directly into    
// C code, voiding the need for     
// map loading functions.           
#ifndef MAPDATA                     
#define MAPDATA                     

#define VOID_BLOCK 0                
#define SOLID_BLOCK 1               
#define LADDER_BLOCK 2              

struct MapData                      
{                                   
      unsigned int width, height;   
      unsigned int tileSize;    
      unsigned int *tiles;          
      unsigned int *blocks;         
      char *tileSet;                
};                                  

#endif                              

unsigned int map1tiles[] =
{                                   
      6,
      6,
      6,
      6,
      6,
      6,
      6,
      6,
      6,
      6,
      [...]
      1,
      1,
      1,
      1,
      1,
      1,
      1,
};                                  

MapData map1 =           
{                                   
      200,       
      100,      
      16,       
      map1tiles,         
      map1blocks,        
      "tile1.bmp,tile2.bmp, [...] tile36.bmp,tile37.bmp;"
};

#endif


 As you can see, every tile occupies a single line. The actual file containing this map has breath-taking 40047 lines of code!

The catch with this directly exportation of the maps is: how to save the map for later edition? Map saving was done in the same fashion as exportation, but instead generating Javascript code, that when evaluated in the map editor page automatically sets all variables to the corresponding map.

However, the Javascript generated this way is so huge that it's nearly useless. Evaluating the code for a big map takes minutes and leaves the browser completely frozen.

Even with all those shortcomings, this map editor proved to be very useful, and I have already used it in 3 different projects, including both my Ludum Dare warmup and the actual game I would submit to the competition (that wasn't finished on time). Do not forget to check it out.

No comments:

Post a Comment