Level Painter – fast level editor for grid-based 2D games

The personal project of this weekend was to create a smart and intuitive level editor using the artwork Helpful Strangers have created for a project over at unit9. This is what the result looks like:

We have created various assets that all have a common size and work on a 50×50 pixel grid. They are all seamless when placed side by side and can be combined in many ways to create interesting levels. But placing them one by one is no fun so why not try to make the computer do it for us. It was a fairly straightforward project with the only problem to solve being the ambiguity of the assets. We don’t have one asset for every case (that would be 2^8=256 assets for each world), but rather we have no assets for some cases and many assets for other cases. Many of the assets can work in different scenarios, for example having a neighbour to the top left or not having one.

So here’s my approach. I started with an app that draws a grid of 50×50 “cells” that can be turned on and off. Each cell has 8 neighbours (the map is repeating off the edges) and I give them IDs clockwise from 0 to 7, like this (C symbolises the cell):

012
7C3
654

Each of these neighbours can either be ON (1), OFF (0) or EITHER (X). So I name my assets accordingly using a string “xxxxxxxx” of 8 “bits” like (not really, since it has 3 states), each one of which symbolizes the state that particular neighbour should have. So an asset for a cell that is surrounded by active cells is named “earth-11111111.png” (“earth” is just a prefix of the family of assets, “1” means ON), an asset that must have an active cell above it but can have anything anywhere else around would be “earth-x1xxxxxx.png“, etc. By gathering all these names on an XML/plist file I have a hit table against which my editor can check a cell and find what asset it needs by looking at its neighbours.

first approach with the ON/OFF grid and incorrect numbering


after some thoughtful asset renaming