Adding another Layer to Note Reassembly

January 11, 2019

One common puzzle that many mystery adventure games include involves finding some manner of ripped up paper or note. The pieces of this note are displayed in a close-up where the player clicks and drags them around in order to reassemble the original page. It’s a classic puzzle type and one that I wanted to include in Sleuthhounds: Cruise. However, simply because it is such a frequently done puzzle, I wanted to find a way to add a new wrinkle or dimension to it.

I’ve been a fan of the Marvel Cinematic Universe movies since they first started with Iron Man in 2008. In that film, Tony Stark is captured and imprisoned by a terrorist group who demand he make weapons for them. In order to escape, he instead designs and builds the first Iron Man suit. So that the terrorist’s don’t know what he’s doing he draws parts of the design on multiple pieces of paper. Looking at any one piece doesn’t reveal anything important but when all the pieces are layered on top of one another and a light is shone through from behind them, then the full design can be seen. It occurred to me that adding this idea of layering separate parts of a note on a light table such that each part becomes semi-transparent might be an interesting twist to the basic note reconstruction puzzle.

Work in progress semi-transparent peices.

Getting the basics down of moving pieces of paper around and having them “link” to one another when dropped in close enough proximity was simple enough. The interesting challenges with the puzzle emerged once I got that far and was able to play around with the pieces. In Iron Man the filmmakers only had to worry about making the lit overlapping papers look good for the camera. In Cruise I had to make that concept work from a gameplay perspective.

In Cruise instead of having the player piece a written or typed note back together, they have to assemble a plan that one of the suspects aboard the ship is plotting. I did a quick pencil and paper sketch of this plan, scanned it in, and then broke it into five pieces.

The first thing that I realized, in very short order, was that there needed to be at least one distinct element shared between overlapping pieces so the player, through careful observation, can figure out where the point of overlap is. While it’s doable figuring out where to put pieces that have completely distinct line work on them, I found it very challenging and I already knew what the final plan was supposed to look like. I reworked the first rough pieces to have points in common and the puzzle became eminently more solvable. Still challenging but no longer, I hope, frustrating.

Deeper pieces fade out as other peices are layered on top of them.

After alignment, the next issue I found I had to deal with was the semi-transparency. The whole point of the puzzle is that the different pieces are semi-transparent so that the player can see through them to figure out how to properly overlap them. My initial idea was that the pieces would just lay one on top of the other. When you clicked on a specific piece it would be pulled to the top of the stack. However, this had the effect of causing the farther down pieces to become harder and harder to discern as more semi-transparent layers were placed atop them.

Page backgrounds shuffle to the bottom to make the line work more readable.

What proved useful was to represent each piece as two separate objects: the opaque text and the semi-transparent page. When a piece is picked up its line work and semi-transparent page are still brought to the top, which helps distinguish them more from other when pieces when moving around. However, when released, the line work remains at the top but the page is shuffled down to be below the line work of all other pieces. This makes it much easier to view the line work to help decide which piece to move next but it introduced another issue.

Coloured line work helps to distinguish the pieces.

By having all the line work at the top when no pieces are being dragged around, it became much harder to tell which lines were on which pieces. After a bit of experimentation I found that by using a distinct line colour for each piece it became much clearer to tell which lines belonged with which pieces. Using colour as a visual affordance is always a tricky proposition due to various types of colourblindness. When I create the final visual assets I’m still planning to use the colour differentiation but will also be taking to care to use intensity differentiation so that those who can’t tell the colours apart can still perceive the appropriate differences in the pieces.

While working on making the pieces more distinct I also came to do a few experiments with the background of the scene. In the case of this prototype, I used a single flat colour for the background. However, for the final game the background will look like a light table and have some degree of variance to it. In experimenting with the background I discovered some important things that will doubtless influence the final look of the light table.

• When the pieces are layered on a light background, the line work becomes much easier to see. However, the borders of the semi-transparent pieces become harder to discern.
• Conversely, when the pieces are on a dark background the edges are easier to see but the writing becomes harder to discern.

I suspect in the final implementation that I’ll go for a somewhat lighter background and then will draw opaque outlines around the edges of the pieces. I may even tint the pieces to match the colour of the writing on them. Hopefully, this will help make both the writing and the edges of the pieces more easily distinguishable.

My final takeaway from developing the light table prototype concerns the presence of text. The pieces, when placed together, form a plan that a given suspect is formulating. While most of the plan is a rough schematic drawing of the cruise ship there are a few text callouts on it. I discovered that when I broke up the text so that no one piece had complete words on it that the puzzle became much more interesting. Piecing together the text feels like more concrete progress in putting the schematic together than just the picture itself. It’s not currently the case in the rough prototype, but I’ll be sure to break up all text across multiple pieces in the final version.

Although at this point I only have the rough version of the light table incorporated into the game I’m quite pleased with how it works. It was easy to implement and experiment with and makes for a good variation on the typical note reassembly puzzle. It should prove to be a nice change of pace from the typical inventory puzzles that the player will be solving leading up to the light table.

Previous:   |   Next: