Dynamic comic-book composition

This blog post was originally published on the Heaven's Vault development blog. Heaven's Vault is an archaeolgical adventure game being made by inkle, the creators of 80 Days and the Sorcery! series.

For a while at inkle, we’ve been keen about the idea of making an interactive comic - from our very first projects, we wondered whether our approach and philosophy could be made more graphical.

It hasn’t been until Heaven’s Vault when we’ve started to put some of our ideas into practice. The game was initially conceived as a pure series of static frames - we would use the 3d background art purely to allow the scene to be viewed from any angle, but the camera would never actually move or rotate.

We’ve shifted pretty far from that vision - we don’t really consider the game to be an interactive comic, and we now have a fully dynamic camera that can spin around the protagonist when you’re exploring environments. However, much of the original concept remains in the game, and we do have sections with fixed camera angles that play out a bit like a dynamic comic book.

Comic book artists are used to designing the composition of each panel to allow enough space for the dialogue bubbles - it’s a core part of the craft. On Heaven’s Vault though, we are having to find ways of doing this automatically, as the interactive narrative takes unexpected twists and turns.

Enter the Bubbleographer, a component of the game that’s responsible for finding the best arrangement for the given set of visible dialogue bubbles. It’s happiest when it has a lot of space to play with, and when it doesn’t, it does the best it can.

The poor Bubbleographer has a lot more to contend with than the average comic book artist though. The camera can move around to look at different things on the whim of the player, so the composition of the screen can change very quickly, potentially leaving the dialogue bubbles in awkward positions. The player also has to be given the chance to read the text of the bubbles of course, so it tries to move them as little as possible, or it would be distracting.

And how does the Bubbleographer decide on the best place on screen for a particular bubble? It divides the screen into a grid and calculates a score for every position on that grid based on a number of things - would the bubble overlap anything it shouldn’t? Is it near the character that owns it? Is this bubble positioned nicely right below the previous one? Is it leaving enough space for the next bubbles? Finally, if it really can’t find a good enough position, it will tell the game to allow the existing bubbles to finish before allowing the new one to transition in.

The image at the top of this post is a picture of what’s going on in the Bubbleographer’s head - the debug view. It’s managed to position El’s bubble right above her head, but left space for the villager’s incoming bubble next to him. The numbers drawn underneath represent the constituent parts of how the positions have been scored.

This has been one of the hardest parts of code that we’ve had to write for Heaven’s Vault. As with many things in both code and design, if the Bubbleographer does its job perfectly, you shouldn’t notice it at all!

To learn more about Heaven's Vault, follow the game's progress on Tumblr, Twitter, or visit the official site.