When I first thought of the idea for Unicorn Rush, I envisioned it mainly as an endless running game. The more I thought about it though, the more I felt it should also have hand-crafted levels, which I call Gauntlets in the game, that provided more of a challenge than a randomly generated game could offer.
The problem was that in order to create those custom Gauntlets I would either need to hand code a bunch of text-based Gauntlets files in XML or JSON, or I would need to write a Gauntlet editor. Both of these options seemed like they would take far too much time though, so I shelved the idea of custom Gauntlets early on in the development phase.
When I was contemplating the decision to move from a paid to freemium model, however, it became clear that one good way to do that would be with custom Gauntlets using the freemium model I discussed in my last blog post. This once again raised the need to either hand code the Gauntlet files or write an editor.
I decided that hand coding Gauntlet files was just going to be too much of a headache, but writing a totally new editor application also seemed like a lot of work, and I was getting anxious to release the game.
I needed to think of a way to make the editor as simple as possible and to require as little coding as possible. Clearly the solution was to reuse the work that had already been done for the game itself.
The iPad Editor Cometh
Editing Gauntlets effectively requires a reasonable amount of screen space, so using the iPhone or iPod touch was obviously going to be limiting. The iPad, however, is perfect for what we needed. It has enough space to show the islands at a decent size and to show the editing controls on screen all the time.
The iPhone and iPod touch could be used as well, but some sacrifices would need to be made. Since the first version of the editor was for our internal use only, we focused on providing a good editing experience on iPad only. If and when we release the editor for user-created Gauntlets, then we will put in the work to make editing on iPhone and iPod touch work well too, but the iPad will always be a more pleasant place to create Gauntlets.
Building a Gaunlet
When you first open the editor, you are shown a screen like the following. The first island is always the same and you cannot delete it. This has a few simplifying benefits, such as not having to code for the case when there are zero islands, and always knowing what a good initial placement for the unicorn will be (other islands have different sizes and shapes).
Starting a New Gauntlet
At this point, you can touch one of the island buttons along the bottom to insert a new island. The new island is initially placed at the same height as the previous island and a fixed distance to the right of it, and the camera shifts to show the new island. You can quickly insert all the islands for a Gauntlet one after the other just by tapping the corresponding island buttons one after another. The following screen shows a Gauntlet with several islands already added. It took about 3 seconds to create.
Zoomed Out View of a Gauntlet
Obviously the above Gauntlet is rather boring and flat. We need to move the islands around to give it some shape and challenge. One very useful feature we added is that when you move an island around, all the islands after it maintain their positions relative to the island you are moving. This lets you tweak the gap between the current island and the previous island without having to go through the rest of the Gauntlet and move everything over.
The following image shows the same Gauntlet after I moved island #2 down, and then moved island #8 up. You can see that the other islands maintained their relative positions.
Gauntlet After Moving Islands 2 and then 8
After moving islands around some more, I ended up with this shape.
A More Interesting Gauntlet
After adding more than about 14 islands to a Gauntlet, it no longer fits on screen at the lowest zoom level, so you need to scroll back and forth with swiping actions on the background. You can also zoom in and out using the + and – buttons. The zoom will eventually be done by pinching if we release this for our fans to use, but for now the buttons work just fine.
Adding Obstacles & Powerups
Once the overall shape has been defined, you can start adding obstacles and powerups. Well, technically you can add them any time you like, but so far I mainly layout the general shape, then start adding obstacles and powerups and tweaking positions.
To add obstacles, you just select an island by tapping it. Once you’ve tapped it, a set of attachment points appears. These are the places on the island where obstacles and powerups can be attached to the island.
We could have made it so that items could be attached anywhere, but that creates various problems related to checking if two items are too close to each other, or if they penetrate into the side of an island wall, and also requires calculating the proper angle relative to the ground below. Having multiple fixed locations for the items made the coding easier for both the game itself and the editor.
In the image below you can see circles and squares. Originally there were going to be places that you could put only obstacles and places you could put only powerups. This restriction was not really necessary and has been removed, but the different shapes have not yet been changed.
A Selected Island and its Attachment Points for Obstacles & Powerups
To place an obstacle or powerup, you simply tap the corresponding attachment point (the circles and squares) to highlight it, and then tap a rock, crystal or mushroom. Tapping another item while the same attachment point is selected will replace the current item with the new item.
Here is an island with three items added to it.
Island with a Crystal, Green Mushroom and Rock Attached to it
The Finish Line
Every Gauntlet is basically a race course and race courses need finish lines; Gauntlets are no different. On the last island in the Gauntlet, you need to place a finish line flag marker, which you can see an example of below (although it is still using my own placeholder art here for now).
Eventually the editor will enforce the finish line flag requirement, although right now it does not.
Saving & Loading Gauntlets
Once you are happy with your design you’ll want to save it. Just tap the Save icon and the following dialog appears. You can give your Gauntlet a filename and just tap Save if you want to continue editing, or you can tap Save & Play if you want to instantly test your new creation in the game.
Gauntlet Save Dialog
Later when you want to return to edit the Gauntlet, just use the Load icon and type in the filename (it will remember the last filename you loaded or saved, so usually you can just tap Load). This area will obviously need some improvement before it would be suitable for use by our players, but it’s more than enough for our purposes.
Miscellaneous Items of Interest
- Double-tapping an island flips it around horizontally to create a bit more variety in the shapes.
- There is currently no way to delete an island once it’s been added! This will be fixed soon.
- There is a “signpost” item being added that will let us insert checkpoints for the tutorial Gauntlet. When the unicorn passes a signpost, the game will pause, display some text associated with the signpost, and wait for the user to tap to continue.
- The file format used is .plist format (XML) and is generated using the standard NSCoding mechanism. Using an existing serialization format was yet another way we saved time on the editor.
- You can run the editor on the iPad and then connect it to iTunes and pull the Gauntlet files from the Unicorn Rush document directory.
- You can also run the editor in the simulator and get the files directly from the simulator documents folder.
Lessons Learned
Even though we made the decision to add the editor late in the development of Unicorn Rush, fortunately none of the work that we did before was wasted. In fact, having that solid code base made the decision to add the editor fairly easy.
The ease of crafting Gauntlets now with our editor really drives home the value that creating your own tools brings. It is definitely worth the effort, but keep the following points in mind:
- Keep the design as simple as possible
- Don’t implement all the bells and whistles at first, just the minimum required to get a functional tool
- Add other features that you find necessary as development proceeds
- Use existing file formats, encoders/decoders, and libraries wherever it makes sense
- Considering using the iPad as your editor rather than your Mac
So when you start your next project, be sure to spend some time considering what tools you can create that will help speed up development, and the ways to keep the effort to create those tools as low as possible.
