Flashback Investigation

Febraury 8, 2019

I’ve been a fan of the long-running Canadian television series Murdoch Mysteries since it first aired. One of the effects that they used fairly frequently early on, and with less regularity as the series has progressed, is Murdoch Vision. Here the lead detective William Murdoch essentially imagines himself back to a crime to witness it with his mind’s eye. It’s a technique that’s not unique to {Murdoch Mysteries but that’s the series I associate it with. I really like the effect it gives and it seemed perfect for an adventure game that could actually drop players right into such a scene. It should come as no surprise then that I was looking for a way to incorporate such a scenario into Sleuthhounds: Cruise.

In developing the story for Cruise there came a moment where the plot takes a small time jump forward from the evening of one night to the morning of the next day. Here there was an opportunity to place Pureluck Homes into a situation within the time that was jumped across and to then have him flashback to that scene the following day. However, I wanted to add a little more visual punch to this flashback rather than simply cutting straight from one scene to another. I wanted players to be able to see the transition into the flashback.

Flashing back to the night before. A work in progress.

Although the above animation is rather crude, using obviously placeholder artwork, hopefully it puts the idea across. While the player is in the present the scene will be depicted normally. As the flashback begins the scene will crossfade into a sepia tinted version of itself. At the same time, various shadowy figures fade in – the idea of the scene being that Homes has to remember who each person was and what they were doing.

In order to pull off the transition effect a little graphical sleight of hand was needed. Fading in any one graphical element, such as the sepia version of the background or any one of the shadowy figures, is pretty straightforward. All that’s needed is to have the sepia version of the element and to change its degree of transparency from fully transparent to fully opaque. However, things become trickier when bringing in multiple overlapping graphical elements.

Avoiding the problem of multiple transparent items showing through each other.

Imagine having the sepia background and the various shadowy fingers each coloured on their own separate pieces of glass. If you were to layer all those pieces of glass, one on top of the other you would see, for example, the legs of a farther back character through the body of a closer character. That sort of ghosting effect was not what I wanted. Rather, I wanted all the shadowy characters to come in at the same time, meaning that parts of farther back characters would be covered up by closer characters.

While I could have made a version of the sepia scene that already had all the characters “baked” into it so that I could fade them in all as one piece, I really wanted to avoid that approach. The problem with it is that if I need to adjust the positioning of any of the characters I have to completely recreate that image.

However, there was the rudiments of an idea there. After a bit of head scratching I hit on the reverse idea. Instead of fading the sepia version and the shadowy characters in, I could fade the normal colour version out. There were still some issues with that as I wanted to have other sprites in the colour version and they’d exhibit the same sort of stained glass layering problems discussed above.

To complete the idea is where the technical sleight of hand comes in. Instead of having a pre baked image to use to cover the transition, I’ve tweaked my game engine to take a screenshot of the current scene at the start of the transition. The screenshot has all of the sprites burned into it. By rendering the screenshot over top of everything I can then turn off the sprites and coloured background I don’t need and display the sepia background and shadowy characters. This is all initially hidden behind the screenshot version.

Once everything’s in its proper place I’m then able to fade out the screenshot to create the transition. This causes everything from the screenshot to fade out as a unit, thereby revealing the flashback version of the scene complete with its characters. Since the screenshot is taken right at the moment the transition starts, it also means that I’m free to move any sprites around as I need to without having to manually recreate the transitioning image.

Ultimately, the transition from the present to the past, and later from the past back to the present, is all a visual trick. However, in a way that’s not important. Players won’t realize that a trick has been employed. Instead all they’ll see is the scene transitioning one way or the other. At the end of the day, what the player ultimately sees is what’s important.

Previous:   |   Next: