The level editor - make ALL THE THINGS!

Map editors are the bread and butter of game development. Without a decent one you may drastically increase the amount of time that it’s going to take to build your levels. I’m not the most experienced in discussing what’s out there but I’m going to go ahead and re-iterate the lesson from the last post. If you can get away with it, don’t bother making your own level editor, use something that’s already out there. I didn’t listen to this advice at the time because I was a n00b, so I can at least share my creation with the internet.

As discussed in a previous post, I had just completed a bare-bones html5 game engine and was ready to start designing and populating my game world. Terrain data would be stored in a 2d array and entities would be stored [initially] in a 1d array. This was going to be a game that would move across both X and Y axises so there was no way I was going to hard-code every single level. I just needed a means of building the levels and outputting the JSON representation afterwards.

As I didn’t really plan for a level editor in my road map, I was reluctant to put much effor into it though; so here’s what it looked like -

The level editor used for the initial balloon game and the later Cosmic Badger

Adding tiles and entities

The editor initially only displayed the tile sheet to add terrain to the game, but it soon occured to me that I’d need to add the ability to add entities too. The whole thing was just a second canvas element. I could pick individual tiles to add to a grid co-ordinate, or select a group of adjacent tiles to drop in the world in one chunk. I could move around in the game world (i.e. the first canvas element) either by using the mouse controls or by using the keyboard up, down, left, right controls. Once I was happy with my world I could print the output to the web console and copy the JSON into the map using the “Entity map” or “Tile map” buttons. In retrospect I should have added functionality to auto-save the whole game world without copying and pasting the JSON but like I said, it was a rush job.

Adding boundaries

Then I would have to configure boundaries for each individual tile and entity. I had a debug button to display where the boundaries were (the red squares in the screenshot above) and I would have to manually change each boundary co-ordinates and dimensions until I was happy with them. Apart from making the actual levels, this was one of the most painstaking and monotonous tasks I had to do. I wish I had improved the editor to do this drag-and-drop style.

The task of adding boundaries to the game made me die inside a little

Displaying the grid

Nothing much to say about this, I just needed a means of knowing how much space I had between land masses for judging the game reaction time and therefore the difficulty.

Expanding the game world

This wasn’t really built for the purpose of the balloon game, but more so for later on when the game evolved into Cosmic Badger. When I would playtest levels and realised that there wasn’t enough distance between obstacles/terrain. I wanted an easy way to split the game world by 32px by adding a new vertical row of tiles to 2d terrain array.

Lessons learned

As much as I play down what’s there, the features actually came in really useful for debugging issues in the game. The editor and game logic was being run in real time with boundaries and normal controller input. I could effectively move to any part of the level (albeit slowly using the keyboard controls) and play test the area. I’m sure others have different opinions on this, so feel free to start a discussion in the comments section.

Now I had everything I needed to start building a game, time for the “fun” stuff.