Making an editor

Posted: August 25, 2019

Tags: LifeDanger Crew

I’ve been spending this weekend working on a new level editor for our next game. It got me reflecting about things that went well and didn’t go well with our previous content authoring experience for Danger Crew.

Danger Crew 1 had a pretty decent level editor. All of the game’s Overworld maps, quests, and storylines are created with this editor. I put some decent time into making it because I wanted to add content to the game very fluidly whenever ideas would spark.

Screenshot or it didn’t happen! Click on the image to see it in full screen.

Danger Crew Level Editor

It’s a React app, just like the game. It’s really just a glorified JSON editor. I make edits to the game’s maps and dialog with this tool, then hit the Save button to pipe the content as JSON data into the game. The game’s React components are hydrated by said JSON. This tool makes tasks like adding a character or changing dialog pretty quick.

It’s also cool because people other than me can get in there and edit the game without touching code. It opens the door to user generated content. We didn’t end up going that route, but I suppose it’s a possibility for the future.

Now that the game is done and out, I have way more clarity about the kinds of features that really save time in an editor like this. Here are some takeaways:

Don’t be too quick to sink time into a feature unless you know you’ll use it

I often fall in the trap of over engineering upfront, like building a rocket ship for a simple trip down the street. It’s easy to let the ol’ imagination go wild and greatly affect scope.

Our editor shown here had a bunch of assumptions and features that I thought would be helpful but basically went unused throughout the project. There was a whole screen for managing your character builds and team lineup, but I hardly ever used it. Other quick tweaks, while not very flashy, could have saved a ton of time. Live and learn, I guess.

I’m trying a more minimalistic approach next time and letting the tool grow as needed.

Make the UI decently nice

I sometimes find it tough to justify a bunch of dev time when it’s “just an internal tool”. I found that spending the extra time to make UI pretty nice will increase productivity down the road.

For example, taking the time to implement nuances like drag and drop was totally worth the effort. I was manually editing x/y coordinates with text inputs rather than clicking and dragging objects to new positions. Seems like no big deal in the moment, but the tiny bits of delay really add up over the course of the entire project. Drag and drop is one of those features that can be tricky to implement well, but it’s hard to live without it once you have it.

Drag and drop is a first class priority in the new editor. I’m using react-sortable-hoc and it has been awesome so far.

Even just busting out some quick styles to make the page look nice is a big deal. It needs to “feel good” when you’re working with it. It doesn’t have to be production-perfect, just enough polish to make you feel fluid, productive, creative.

Language and Localization

Don’t forget about this! One of my biggest woes of Danger Crew 1 was that I built it in a way that made it hard to translate. If you’re writing any English into the game, make sure there’s a way to provide the French (etc) version, too.


Thanks for reading! I’m hoping to continue sharing updates on the new version of our editor as we go.