Learning Three.js

or WebGL for Dummies

Let's Make a 3D Game: Map Editor

This is a new article of the “Let’s Make a 3D Game” series. In the previous one, we focused on keyboard. We will focus on map editor for this one. In most games, the player moves around a map, sometime they are called levels. Maps are a key part of a game. They describes the world the player lives in, its rules, its limits, its geography. Additionnaly when a player completes a map, he goes in another better/harder map. It gives a sense progression which is fun. Players like fun things :)

So let’s make a map editor

So i searched for a way to do map for our marble game. I wanted something very reusable and hackable, something you could easily use in your own games. I picked voxels. The illustration from wikipedia on the right, may help understanding. They are easy to code, simple to understand, yet efficient and flexible. On top of that, one of three.js examples is a voxel painter in WebGL. So most of the work was already done for us!

Only two features were missing to make it a map editor. First, we need to load and save those maps. Thus we can edit those maps, and tune them until to get a good gameplay. Second, the map must be composed of various type of cubes. Different type of cubes will have different purposes in the game. e.g. one cube may be wood or be water, one may make your explode on contact, one may make you teleport, anything you want. So i did those modifications and came up with this editor.

Now Let’s Use This Editor

The editor got an inline help on top. So it should be rather simple. Once you are done, you save the map, the editor will open a window containing a string describing the saved data. Just copy this data in a file. To load it back, you just have to drag/drop this file on the editor window. It is as simple as that.

How To Use Saved Maps

You load the file you saved into your javascript. Maps are stored in JSON. It is a data format which fits well with javascript. “Everything should be made as simple as possible, but no simpler” as a cool guy said. So following the occam razor, this format is just an Array with each element is one Object representing a voxel. The object properties are: x, y, zbeing the coordinates of this voxel, and t being its type.


Yesterday, i started coding early visuals for the game. Ok it takes some imaginations to see where it will goes. But it will improve i promise :)