In-game Level Editor Update

Today I worked exclusively on the in-game editor for Escape Goat.  There is no external editor–no Windows program or special version of the game I use to make levels.  Everything I use to create the built-in game will be included with the product!

My goal is to give first-time game designers a toolset for making something.  This means making things more user-friendly than I normally would.  Usually I just build my editors for stability and speed, but this one’s got to be pretty (enough) and totally straightforward.

 The editor as it existed this morning looked like this:

This version of the editor has been working great so far.  I have single button presses for every action, so there’s no need to use a menu for anything.  This lets me crank out levels and prototype them rapidly.  Though it may be really fast for me to use, I built it and have spent plenty of time with it.  I can’t expect someone new to jump into this and understand it.

Just looking at this screenshot, we have several immediate problems:

  1. There’s text bleeding off the edge in the properties editor, because it’s using the large, in-game font.   Speaking of this font, it’s not going to be very good at conveying button names.  Can you tell that’s [RT] at the bottom?
  2. There’s a lot of wasted space at the bottom with the Thing Selector (the big orange box).
  3. There’s no way to know what each window is at a glance.
  4. The windows are out of alignment, and the Thing Selector doesn’t even have a proper border.
  5. Placeholder text for header and footer needs to be replaced with something useful.
To come up with an improved layout, I started with a screenshot and loaded it into GraphicsGale.  Its built-in grid and alignment made it easy to move and resize the windows along the 8×8 pixel grid.  Not only that, but I could pick a good font size and get exact screen coordinates for all my editor windows.
Did I mention GraphicsGale is the most awesome spriting program ever?  Well it’s also good for mocking up screen layouts.
(Several hours later…)
Here’s how the editor looks now:
Besides being easier on the eyes, it has many usability improvements:
  1. Smaller font can show more text without bleeding off the edge.
  2. Windows can have colored strips at the top for header text, which can be a simple label (Region Map) or a dynamic label, like the Thing Selector which shows the category name.
  3. Graphical icons for Xbox controller buttons.  This makes such a huge difference.
  4. Map dimensions changed from 11×4 to 9×5. Almost the same size in room count, and it fits better in the editor.
  5. Thing Selector shows 3 rows of 8 things at once, which is less overwhelming, and takes up less space.
  6. The “cheat sheet” on the right  is all dynamic depending on where you are in the editor, from the Map Editor to the Room Editor to editing a single gadget within the room.  Each strip shows a button, command name, data field, and graphical icon.
The behavior is almost the same, but it’s much cleaner and smoother now.  I still have to add some more icons for the cheat sheet, but that should be about it.  I’ll post a video soon demonstrating its use, and I hope everyone will find it approachable regardless of their experience designing games!

Behind-the-scenes: Soulcaster 2 Level Editor

This is what I’ve been working on in the last few weeks.  There are a few new features, including:

  1. Multiple background layers (sky layer which is drawn above characters, for high walls or canopy)
  2. Animated decorations (e.g. torches, waterfalls)
  3. Base layer tile with optional locked scrolling and autoscroll (quick and dirty parallax or simulated palette animation)
  4. Scripting engine allows floor and trench type gates, so there can be one-way doors, collapsing bridges, cage traps

See the video here and bear with my first attempt at a narrated video:

And part 2:

This may not be too exciting for the average Soulcaster player, but maybe other developers will be interested to see how I made an editor using Windows Forms and XNA.