Implementation: Realizing the Sleuthhounds Story Board

May 22, 2015

It’s been a couple, three weeks since I last wrote about the next Sleuthhounds game. A lot of progress has been accomplished in that time across the game in general and on the Sleuthhounds Story Board interface in particular. For those new to the party, the Story Board is a special interface for the lead character in this game that evolved out of analysis of traditional dialog trees I did previously. After much brainstorming a design idea emerged.

Taking any software design from a mere idea to reality is a lot of work, especially if it’s something new, something for which there is no real history to point at and say “well, it’s just like that…except different.” When developing something new you simply can’t afford to implement it once and then walk away, leaving it engraved in stone forever. Instead, you need to work with it for an extended period to learn how it works and what issues exist with it.

But I’m getting ahead of myself.

The basic idea with the Story Board interface, as I discussed last time, is that for a given suspect in the game the player needs to collect various “story points”. These are a handful of sentences that, once collected, the player needs to sort into the correct order to tell a logical story that indicates the guilt of the suspect at hand. From my brainstorming period I was left with the following sketch of the interface.

The Story Board rough draft.

A sketch is all well and good, but it’s hardly interactive. While you can certainly try to completely design an interface on paper, inevitably you hit a point of diminishing returns. Anything of sufficient complexity to warrant a design is also of sufficient complexity that it cannot be fully designed, not without firsthand experience of how all the “moving parts” work together. With that in mind, one of the first things I implemented in the game was my original take at the Story Board interface.

The Story Board - Take 1.

As the screenshot shows, the original take at the interface had…problems.

I knew that the player needed to not only be able to construct the story for the suspect but that they also needed a way to have a normal conversation with the suspect. It became apparent, once I had this version up and running, that that was a problem.

As you can see, one issue with this is that the dialog options fall off screen. You can’t fully read the last thought bubble, which is used as a dialog choice.

One thing I tried here was to change the thought bubbles to circle around the main characters head instead of being stacked vertically. This allowed the bubbles to all fit on screen, but produced a new problem. In this configuration the bubbles covered up part of the Story Board interface itself. It was problematic dragging story points around on the left side of the screen when you couldn’t completely see them. I debated moving the dialog options back to being stacked on the right side of the screen, but positioned higher so they wouldn’t fall off. However, I knew without even trying that such a solution would result in the second character (the green ghost fellow in this case) being covered by the options.

Armed, with some practical experience of how the interface worked and how it didn’t work, I returned to brainstorming and pencil and paper. It quickly occurred to me that the player didn’t really need to select dialog options and interact with the story points at the same time.

I considered giving the player a different way of initiating a normal dialog or of entering story mode with a suspect. However, that just seemed to be getting too complex, especially since the player could learn story points during normal dialog that they might want to switch to story mode to see or work with.

Switch to story mode? Ah ha!

My next design iteration also started off as a sketch and looked something like this.

The Story Board rough draft.

Here the player would be able to choose whether they were in “Interrogate” or “Accusation” mode. I didn’t really like these terms as can be seen in the sketch, but it was just a starting point. The idea was that the player would have a toggle to switch between being able to ask normal dialog options and being able to order the story.

With this new version in hand, I returned to the game code. With a few programming changes and a few new art assets I produced the final Story Board. Mostly.

The final Story Board(?)

When designing software, if you’re any sort of designer, it’s easy to get the big things right. This is because it’s usually painfully apparent when you get a big design decision wrong. What really makes an interface work is all the little things. The small details that are hard to think through in the design stage.

Case in point, consider the “Tell Story” button. In general, I don’t like to present controls that can’t be interacted with. They’re just one more bit of clutter that a person has to process and figure out how to use. The “Tell Story” button only becomes usable when you’ve arranged all the points in the story and are ready to tell it to the suspect.

At first the “Tell Story” button didn’t show until all the story points were put in place. It seemed like a good decision when I first made it. However, as I lived with the interface for a few days, I began to realize how different from other adventure games it was. I felt that players might need a little more prompting.

I changed the button so that it’s always there. Once you’ve arranged all the story points, the button lights up to a brighter color. However, if you click on the button before fully arranging the story points, the player character now gives a hint by thinking, “I need to order all of the points of the story before I try to tell it.” It’s a small thing but hopefully it provides some guidance on how to interact with the game. Just for the record, I’m still not sure if this is the right decision or not, but such is the world of creative design.

One of the other things I changed from the pencil sketch was the buttons for toggling between dialog mode and story mode. As I mentioned, I started with the terms “Interrogate” and “Accusation” but didn’t really like them. I couldn’t think of any terms that really fit so ultimately I abstracted the toggle buttons to be icons of what they represent: a speech bubble for talking to the character and a small version of the index card lines used to construct the suspect’s story. Again, I’m not sure if this is the right decision or not, but I’m going with it for now.

Other elements factor into the Story Board interface as well. Issues such as how to introduce the player to this game mechanic, how to let the player know they’ve discovered a story point and which suspect that story point is for, how to let the player review the points they have so far without having to talk to the necessary suspect, and so on and so forth. I could easily write a blog on any of these design items, but hopefully this one that you’re reading right now gives you a taste of the thinking, designing, implementing, and—most importantly—reworking of just one aspect of the game.

And so the game steamrolls towards completion and release. Keep checking the blog in the coming weeks for production updates as well as the announcement of the official name and release date. Ooh!

Previous: Benefit of Writing Comics: Pacey Dialog   |   Next: Magic and Public Speaking