Narrative UI Samples
Were-Manual: KILL, DEVOUR, CLEAN
This piece of UI served as tutorialization for the player to learn how to navigate the office of ‘The WereCleaner’ in their werewolf form. All of the tutorials in the game were purposefully designed to resemble informational pamphlets that the protagonist has held onto.
This piece of tutorialization UI was instrumental to introducing the player to one of the core loops of our game. Much care was put into using specific wording that was clear and concise for players. Take the “KILL” segment for instance: Two very vital pieces of information needed to be conveyed in this segment.
First, you will be driven to kill if someone else spots you, not if you spot someone. This helped ensure players understood what situations to avoid.
Second, it was important for us to specify to the player that the protagonist can’t control their own werewolf instincts. The protagonist is not choosing to kill on sight. Instead, it’s an unfortunate circumstance of his instincts. This small segment helped both teach game mechanics & the characterization of our protagonist.
This UI also helped with some of our world-building. In the corner, players can find that the Were-Manual was created by an organization called “Werewolf Society Integrated”. As far as the gameplay of The WereCleaner goes, the protagonist is the only werewolf who ever makes an appearance. But this pamphlet helps flesh out the fact that there is a larger society of werewolves who are trying to live their lives in-secret amongst human society too!
Semi-Diegetic Speech Bubbles
In ‘Where Are We Going’, initially speech bubbles for every character appeared at the bottom of the screen as a static piece of UI. Due to several factors, such as having no VO for the characters, it was difficult to keep track of who was talking unless you were immediately familiar with everyone’s name.
To help with this problem and give the player more of a reason to engage with the space of the car, speech bubbles were changed to animate above the head of the person who was speaking. Now dialogue had a proper source and a sense of space in the world.
The player was given an input that allowed them to lean so that they could read dialogue from the characters in the back seat of the vehicle.
While this method is far from perfect, it did solve the problem of knowing who was talking, as well as encouraging active reading from the player.
Level Select Narrative - Level 1: Monday
When selecting a night in ‘The WereCleaner’, you are taken to a menu that shows you many bits of info about the level including how fast you completed it, how many people you killed, and the ranking you got on the level.
The level select was also a good opportunity to include a bit more insight as to how the protagonist feels going into each night. Each level has a small blurb written from the POV of the protagonist, Kyle.
For level 1 in particular, it was important to me that players learn more as to why Kyle chooses to work as a janitor in a large corporate office. This blurb helps illustrate what Kyle prioritizes: living a life unnoticed, even if it means he’s just barely scraping by. His custodial job lets him do just that.
Additionally, Kyle is seen needing to put on a face during many points in the story in order to not get caught. These blurbs, especially in later levels, can help illustrate Kyle’s true thoughts over the course of the work week. Every blurb is kept short, but still provides some fun info about Kyle the player wouldn’t have learned otherwise.
Overall, these level select blurbs also serve as a nice way to remind players who replay levels about the events of the story and Kyle’s state of mind during each night.