Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
Ogmo Editor, by Matt Thorson, is an all-purpose, free, open source level editor that runs on Windows. It exports level data in XML format, meaning that it can be used with pretty much any gamedev platform. In this article, I'll show you why it's my favorite level editor, cover its features, and explain how to get started with it.
- Ogmo Editor 2.1.0 or later: http://www.ogmoeditor.com
- Project files: available here. The graphics are a slightly modified set from SpicyPixel.net.
What Is Ogmo Editor?
Ogmo Editor is a free, open source, tile-based level editor for Windows, and is my personal favorite. It's extremely powerful, it's easy to use, and it continues to receive occasional updates. Ogmo is an absolutely fantastic editor, and is sure to save you countless hours of work.
Creating and Configuring a New Project
The first thing you'll want to do when using Ogmo Editor is to create a new project. To do this, simply go to Project > New Project, as shown below:
Once you've selected the directory you wish to save your project files to (as an Ogmo Editor Project, or .oep), you'll be met with the Settings tab of your project configuration screen.
There's a lot of information here, and a bit of preparation to be done before you can start, but don't worry, I'll break it all down as we continue.
Naming The Project
First and foremost, go ahead and give your project a name, where it currently says "New Project". For the sake of this tutorial, I'll be naming my project "Example Project".
There are two reasons the name of our project matters: first, it'll be the name of the .oep file saved on your computer; second, Ogmo Editor keeps track of recent projects, and lets us quickly locate projects by name from the Start Page.
Configuring Editor Visuals
Next, you'll see "Background Color" and "Grid Color". Ogmo Editor allows us to change both of these values, and since you'll likely be creating and editing lots of levels in Ogmo from now on, it's great that you can change the visuals to whatever works best for you. I personally go with a very dark green background, and a light blue grid color, but you can use anything you'd like.
You can either type in a hex value manually, or click on the color shown to the right to bring up a color picker, then select a color from there. Be sure to notice the "Define Custom Colors" button near the bottom, which opens up a more complete color selection tool.
Below the background and grid color, you'll see the "Angle Export" drop-down menu. This is pretty self-explanatory, and simply changes how Ogmo exports angle related data. Set it to either Degrees or Radians, whichever your project calls for.
Most importantly, you have "Level Size" configuration. This is where you set the default, minimum, and maximum level sizes. Generally speaking, you'll set Default to your most common level size, Minimum to your lowest accepted level size (often the dimensions of your game, for single screen levels), and Maximum to the largest you'll accept, or a ridiculously large number to avoid having a maximum altogether.
The camera settings are an optional, more advanced feature, but still very neat, so I'll cover it quickly. If your game uses a camera of sorts, you can mimic the behavior of it within Ogmo. This will allow you to see how visual layering effects will look in your game, such as Parallax, within the editor.
To use the camera setting, simply check the "Enabled" box, and set the dimensions of your camera. If you'd like to create your camera in game based off of the level XML, you can check the "Export Camera Position" box, and have that data to work with as well. To move the camera around while in the editor, simply hold "C" and click and drag to set the camera position.
Another optional feature, that's very useful, is level values. Think of these as properties of your levels that can be set right within the editor.
A practical example of this is level difficulty. You could create a "difficulty" property, as an integer type, and set your default, min, and max. You could then assign each level you create a difficulty rating, which could then be used in game for sorting levels by difficulty, displaying the difficulty of a level, and so on. The possibilities are nearly endless here, and with a bit of creativity, this is a very powerful feature.
Now that we have a good understanding of the Settings tab, I'll move on to the next tab; go ahead and click on the Layers tab now. Layers are an absolutely essential part of Ogmo Editor, and they're handled beautifully. Ogmo uses three kinds of layer: Grid, Tiles, and Entities.
Grid is the most basic kind of layer in Ogmo. By default, new projects will contain only one layer, and that layer is of the Grid type. Grid layers are simple: either a tile is filled, or it's not. Due to this simple nature, the most common use for a Grid layer is to treat filled tiles as collision tiles in your game, though its uses are obviously not limited to this.
Tiles layers are a bit more advanced, but still quite simple. Generally speaking, these are used for visual purposes only (exceptions do exist, and use more advanced XML parsing, but we won't go over that here).
My projects always contain at least two or three Tiles layers: one for the background, one for the foreground, and, depending on the nature of the project, one for the middle ground. It's reasonable to have many Tiles layers, and doing so gives you more accuracy and power as to how well the editor image depicts your game image. This is because spaces in Tiles layers, much like in Grid layers, are either filled or not, meaning you cannot place multiple tiles in the same tile space, and must instead use multiple Tiles layers.
An example of this, is shown below, where I have a flower in front of a tree. With only one background Tiles layer, this would not be possible; however, I have more, and my flowers and tree are on separate layers.
Entity layers are quite powerful, yet still very easy to use. Simply put, an Entity layer is where all of your game objects are laid out, such as enemies, spawn positions, checkpoints, springs, ladders, spikes, doors, etc; if it's a not a visual-only object you'd place while designing levels, it goes here.
Entities gain their power and originality from their ability to contain properties. These properties can range a large span of datatypes (Boolean and Integers are just two examples), and can be assigned values, such as default, minimum, maximum, and sometimes more.
A simple example of how this could be useful can be observed with an enemy spawn point. If you wanted to determine the direction an enemy walks once spawned, within a level editor not supporting properties, you'd have to create two objects for the editor - one where the enemy moves left, and another where it moves right. With Ogmo's support for properties on entities, you can simply give the Enemy entity a "direction" property of the type Integer, and assign it to -1 or 1 within the editor. This allows you to have one object for the Enemy, yet control specific behavior for each Enemy you put in your level. You can then read the direction property from the XML, and handle the logic within your game code.
This is just one example of how properties simplify the editor experience, but there are many other uses.
You now know a bit about Tiles layers, but without a bit of configuration, Ogmo won't allow the use of them. Click on the Tilesets tab now, and I'll cover how to get a Tiles layer up and running.
By default, there are no Tilesets assigned to Ogmo, and you'll need one in order to create a layer of the Tiles type. To create one, simply press the Create button on the bottom left; also note that you can remove layers and rearrange their order with the other buttons found here.
Once a new Tileset has been created, you'll need to give it a name, let Ogmo know the size of each tile on the sheet, and define the spacing between tiles, if applicable. If you have more than one tileset, simply repeat the above steps for each.
In the work environment, you'll be able to see all tilesets available while a Tiles layer is selected, and can swap between sets with the help of a simple drop-down menu. While working with tilesets, you can either select a single tile to work with, or a group of tiles all at once. This allows you to paint entire groups of tiles, which can be used to place backgrounds quickly or to lay out larger objects composed of multiple tiles with a single click.
The final tab is the Entities tab. This is where you configure all of the entities that can be used on an Entities Layer. Entities are a little more complex than what we've worked with so far, but they're very flexible, and still easy to use.
Just as you did with Layers and Tilesets, go ahead and press Create to create a new Entity type. Like everything else in Ogmo, give the entity a name, and fill in its height and width. Note that while your main grid may be one size, entities and other objects in Ogmo can be larger. That being said, I suggest keeping everything divisible by a single tile, in order to keep things tidy.
As mentioned above, properties are where Entities, and Ogmo Editor itself, really shine. Many editors lack this feature, but from my perspective it's absolutely essential. You simply create a new property, then assign it a name and one of the following types: Integer, Boolean, Float, String, Enum, and Color.
Once you've given the property a name and type, you can set its default value, and (when applicable) its minimum and maximum permissable values. There's also a Show Slider checkbox, which allows you to adjust the values using a slider, rather than inputting the value, when editing objects in the development area.
The Development Area
Navigating the development area is easy. To move around, simply hold down the space bar, then click and drag to pan. Additionally, the scroll wheel will let you zoom in and out towards your mouse location. These two methods combined allow for a very quick and painless workflow when working on larger levels.
Another great feature of Ogmo, and one of my favorites, is the ability to drag each sub-window outside of the program. Layers, Entities, Tile Palette, Selection, and Tools can all be dragged wherever you'd like on your monitor(s), and fit to the size of your choice - an incredibly useful feature for those with a multi-monitor setup or larger tilesets.
Note that this re-sizing is almost essential for the Tile Palette, as each tile will appear far too small unless the window is enlarged.
Learn the Tools
Ogmo Editor has a number of tools for you to use while working on your project. Some tools appear throughout all layer types (Grid, Tiles, Entities), while others are layer type specific. Below is a breakdown of each tool.
- Pencil: Used for basic tile filling. Left click places a tile, right click removes it.
- Flood Fill: Your basic fill tool. Will fill all empty space within an enclosed area with left click, and remove a filled area with right click.
- Rectangle: Much like the Flood Fill tool, but simply fills a selected rectangular area. Left click to place, right click to remove.
- Line: Much like the pencil tool, but is used to create a line segment of fill from point A to point B. Left click to place, right click to remove.
- Select: Used to select objects, which can then be moved with WASD or the Move tool.
- Move Selection: Lets you move selected objects with the mouse.
Most of the tools are also used in Grid Layers, apart from:
- Eyedropper: Changes the currently selected tile to whichever tile is selected when the eyedropper is used.
Some of the tools are also used in Grid Layers, apart from:
- Resize: If applicable, allows you to alter the x and y scale of an Entity with a click and drag.
- Add Node: Adds a node for the selected entity. (See Nodes section for further detail).
- Insert Node: Allows the placement of nodes between already placed nodes. (See Nodes section for further detail).
Entities and Nodes
Nodes are another advanced feature of Ogmo Editor. Think of nodes as waypoints that belong to a specific Entity object. Once an entity is selected, you can then add nodes with the Add Node tool. These nodes will be stored in the XML under the entity object, and can be used as you please.
Nodes can be used for moving platforms, enemy pattern movement, and enemy firing positions. As always, the possibilities are endless, so be imaginative and put this excellent feature to use.
Ogmo Editor is ideal for any tile based game, be it a top-down Zelda-esque game, or a side-scrolling platformer. That being said, with a little out-of-the-box thinking, it can be used in many non-conventional ways, to do almost anything in your games.
As an example, imagine a simple vertical or horizontal shooter. Throughout the game, enemies fly at you in pre-made patterns. These patters are usually quite simple, and can be created strictly through code, but why not use a visual editor to speed up the process? With Ogmo, you could simply lay out the starting position of each enemy on an Entities layer, and give the "level" a property that's either a difficulty ranking for the wave, or a name, allowing your game to further sort your pre-made waves.
What may take a decent chunk of time to do in pure code, is now significantly easier, and more enjoyable, thanks to a slightly obscure usage of a tile based editor.
Matt Thorson has made Ogmo Editor open source, which means the community is free to add to and alter the editor in any way they see fit. If you're interested in customizing Ogmo, go ahead and check out the source, and be sure to share your contributions with the community!
As you can see, Ogmo Editor is an extremely robust and complex editor. It's an amazing addition to any game developer's arsenal of tools, and can save you countless hours.
Whether you're looking for the absolute basics in an editor, or something more advanced, such as the camera system or entity properties, Ogmo has you covered. I hope you're now feeling comfortable enough to use Ogmo Editor in your next project. Best of luck with your future level editing endeavors!