Thursday, 3 November 2011

The Silliness of the Lambs - Level Editor

In the web based version of the game the levels were tile-maps and some additional objects (dog, sheep, bush...). Every level's data was inlined in the Processing source, the tile-maps were stored as arrays and the objects were added to the level instances. I designed the levels on paper, then based on the drawings I created the maps in a text editor and calculated the positions for every object - it was quite tedious.

In the Android version I use an image for the background, and objects for everything else. I did not want to create the levels manually, so I quickly put together a simple level editor. I have finished it in one day and I think this time will come back soon when I'll start producing the levels for the game. Since I develop the game in Java I chose it as the language for implementing the editor. I recalled my memories of creating GUIs in Swing, designed it on paper and then manually coded it (I prefer creating simple user interfaces manually rather than using an editor). When most of the widgets were in place I implemented the event handlers and listeners, the editor was functioning. Creating new levels is now a piece of cake :)

Using it is quite simple. After clicking the "New" button you can choose the background image from a file open dialog, and it is displayed in the editor. The logical dimensions of the level can be set in the text-boxes on the left. The dog, sheep and bushes can be added to the level by selecting them from the "palette" and clicking on the image. Walls (and generally every blocking areas) can be added by selecting the "Wall" tool and drawing a rectangle. Setting the fold is similar. This follows the logic of the game, since objects that could move have a circle shape, and blocking objects are represented by axis aligned boxes. The level can be saved as an XML file by clicking the "Save" button (surprisingly).

Screenshots (as you can see it's not a WYSIWYG editor):

Initial window

After loading the background picture

Adding the dog (black circle)

Adding a few sheep (grey circles)

Some bushes... (green circles)

Setting the fold walls (red rectangles)

Setting the fold area (blue rectangle) 

In-game screenshot of the level

No comments:

Post a Comment