The Babysitter

Shane Berger
Game Design Fundamentals
16 min readDec 5, 2020

--

An interactive fiction game designed by Shane Berger, Jung Won, and Anastasiya Vitko

Promotional image designed for the game

Artist’s Statement

What would you do if there was an intruder in your home? At some point or another, many of us have played out this exact terror-inducing scenario in our heads. Fortunately, for many of us, this nightmarish situation begins and ends in the imagination. The Babysitter gives players the opportunity to see how they would respond to high-pressure, time-sensitive dilemmas that test their instincts and push their moral boundaries.

Our game is an interactive narrative, meaning you — the player — are in control of your own story. You will put yourself in the shoes of a freshly hired babysitter who must navigate a perilous home invasion. There is no winning or losing, so how you play is entirely up to you. Will you prioritize protecting yourself or the child you are babysitting? Will you flee the scene or stay to uncover the identity of the intruder? The choice is yours. Play once or over and over again to explore alternative storylines.

Formal Elements and Values

Players

The Babysitter is designed to be played by a single person. When a player accepts an invitation to play, they enter Huizinga’s “magic circle”, becoming the newest babysitting hire for the wealthy Baudelaire family. Bound by the rules of play, the player may perform actions they would likely never otherwise consider, including killing. Players are also given the opportunity to perform actions that they may deem themselves capable of but have never had the chance to face — courage in the face of untenable odds, sacrifice, and difficult decision-making. The rules of the game present challenging, and at times morally complex, situations to the player; however, when these rules are set in motion within the safety of the magic circle, there are many opportunities for exploration and play.

Objectives

When designing The Babysitter, we intentionally refrained from providing the player with any explicit objectives. Instead, we wanted to allow players to form their own objectives while they play. We expect most players to instinctively interact with The Babysitter as a rescue or escape game (i.e. since the player takes on the role of babysitter navigating a home invasion, they may form objectives like protecting the child they are babysitting or escaping the house unharmed). Once players have completed their initial objective, they may form new objectives to explore more of the game space. For example, suppose a player completed their initial goal of escaping the house unharmed; they may form a more self-destructive goal like dying at the hands of the intruder. On the surface, this may seem like an ill-formed objective. But, two of the core types of fun present in our game are narrative and discovery. The game is uncharted territory and the player sets objectives to explore the parts they find most interesting.

Procedures

The Babysitter can be characterized as an interactive fiction game that allows players to explore a branching narrative. The game is made up of interactive passages. Most of these passages include a dilemma where the player chooses how to proceed. Directly based on the player’s response to a given dilemma, they are shown a new interactive passage — this is where the branching comes in. Eventually, the player reaches a passage where there are no more dilemmas presented, effectively putting an end to the branching nature of the narrative (these passages typically directly follow a climactic passage). When the player reaches one of these passages, they have reached the denouement of a storyline where loose ends are tied up. We refer to these remaining passages as a resolution sequence.

At its core, we can outline the game’s procedure as follows:

  • Starting action: Player selects the “Start” button to initiate the game.
  • Progression of action: The player is given a passage that contains context and a dilemma. The context explains the relevant setting, plot developments, and character POV. The player can use this context to inform their response to the dilemma. The dilemma is the interactive component of the passage where the player begins to control the storyline. They are given a finite number of options of ways to advance the narrative. The player is then given a new passage that is directly based on their decision. This is the “core loop” of the game.
  • Special actions: Some dilemmas are time-sensitive, that is, the player must respond to the dilemma within the duration of a countdown clock. If the player fails to select an action in the allotted time, the game automatically terminates.
  • Resolving actions: The game ends after a player reaches a resolution sequence.
Core Loop (left) and Full Procedure (right)

The Babysitter uses multifaceted system procedures that work behind the scenes, responding to situations and player actions. We developed the game using Twine, which allowed us to create a seamless experience for the player. When the player responds to a dilemma, they are instantaneously shown a new passage. Most of these transitions are deterministic, but some of them involve randomness, which introduces more variability into the game. For example, there is a passage where the player can choose to threaten the intruder with a knife. Half of the time, the intruder heeds the warning and flees the house. The other half of the time, the intruder ignores the threat and attacks the player. This procedure is abstracted away from the player, but it still enhances the experience if the player plays the game more than once.

Twine passage that includes random logic
Random outcomes from Twine passage above

Rules

The Babysitter has only a few rules, which are primarily used to define allowable actions by the player. The game, like many fellow digital games, does not explain the rules manually; rather, the rules are implicit in the program itself.

Rules Restricting Actions
In The Babysitter, the player is given a series of passages, each comprised of:

  • a prompt that provides the player with context of the current game state
  • a decision with a few interactive choices

The prompt is displayed in white text and the interactive choices are displayed in blue text that illuminates upon hovering.

Player interacting with the dilemma in a passage

The blue accent color and hover functionality provide affordances to the player to let them know these are choices they are supposed to interact with. Simultaneously, we are restricting the actions that the player can take (e.g. we don’t want them clicking on just any random word on the screen).

Rules Determining Effects
The Babysitter simulates a home invasion, a scenario that would require many critical, time-sensitive decisions in real life. To create the most immersive environment possible, we knew we had to augment that time pressure. As a result, we included a countdown deadline on several decisions we deemed to be “time-sensitive”.

Passage with a countdown timer

If the player fails to make a decision in the allotted time, they lose control and are immediately transferred to a resolution sequence. Time is an inherently dramatic force when used as a resource, and in the case of The Babysitter, it even adds an emotional aspect.

Onboarding
The Babysitter consists of two main mechanics: clickable texts and a timer. These two elements play an integral part in the story, so we made sure to introduce these mechanics early on in the story in an integrated, non-consequential setting. For instance, in the very first story slide, the player is placed at the front door of the house and they have either the option to “knock” or “ring the doorbell”. With either option, the player is taken to the same next story slide, making it an unmeaningful decision yet an effective onboarding for the clickable text mechanic.

The player is able to click on blue text.

Similarly, we seamlessly introduced the timer mechanic to the player early on. On the third story slide, Bella asks the player for a bedtime extension. Depicting Bella as an impatient child, we translated her short temperament into a 7 second timer, during which the player must quickly make a decision to either “watch Netflix with Bella” or “put Bella to bed”. If the player is unable to decide within that time frame, their indecision is not punished with fatality (which happens with subsequent timers). Instead, we have Bella complain to the player and then reset the timer for the player to have more time to make a decision. This gives the player the opportunity to fail and learn while the stakes are still low.

The first time the countdown timer is introduced, the player is given harmless feedback if the timer runs out.

Conflict

The main conflict in The Babysitter comes in the form of dilemmas. The player must make dilemma-based choices that have a range of consequences. The choices that the player makes at the beginning of the game are seemingly inconsequential; however, as the game progresses, players must make decisions that increasingly put their instincts and intuition to the test. Several of these dilemmas test the player’s fight or flight response. Some even introduce compelling moral decisions. For example, am I willing to kill the intruder to protect myself?

Types of Fun

Narrative

The main premise of our game is to tell a compelling story that the player can interact with. There are the general constants in any iteration of the story such as the player’s role as the babysitter or Bella being the child to be looked after. Nevertheless, depending on the player’s decisions, a new, unique narrative is constructed each time resulting in a different ending. With any storyline, we strived to make the decisions and outcomes engaging while also having the dialogue and events induce terror and suspense within the player.

Discovery

Furthermore, the multitude of decisions and resulting paths compels the player to play the game over multiple times in order to discover previously hidden storylines. For instance, in one storyline, the player may choose to leave the house and look for help in the face of danger which results in the player never discovering the true identity of the intruder. On the other hand, if the player chooses to try and save the child themselves, they will be taken down a path where the identity of the intruder will eventually be revealed.

Sensation

The engaging narrative is supplemented by an appeal to the senses. In the main storyline, we invoke feelings of suspense and terror through the slow fade-in transitions of the white text on the black background. These gradual transitions are complemented with a short timer for making crucial life-or-death decisions in the story. Whether it is the short 5 seconds allotted or the bright red, trembling style of the countdown, all of these elements induce a sense of urgency and stress within the player.

In our deliverables, we also showcased the game’s potential to be audibly immersive to further induce terror and suspense within the player. Our choice background music and sound effects bring life to the words on the screen and truly immerses the player, allowing them to become lost within the game.

Playtesting and Iteration

1. Paper prototype of branching narrative

First draft of branching narrative

We initially created a paper prototype of our branching narrative story. Before adding any extra elements to the story, we wanted to make sure that we had the core structure and plot of the story near completion. Though we would go on to make several edits to the wording of certain story slides, the underlying branching narrative structure of our story has remained largely unchanged throughout the iterations.

We had our friend playtest this paper prototype one time. We wanted to ensure that the core plot was engaging sans any special effects and that the decisions provided felt logical and meaningful.

Though our friend found the different story branches interesting, they mentioned that the multiple endings with different ultimate truths was confusing. For instance, our story is predicated on an intruder breaking into the house, but in one ending the intruder is the past babysitter while in another ending the intruder is the parent playing a sick prank. Hence, they suggested that though there are multiple different endings, the identities and personalities of the main characters should stay consistent throughout all of them to avoid any confusion.

2. Translate story to Twine

Once we had the actual branching story to a point we were satisfied with, we transferred the story over to Twine. The biggest appeal with Twine is that it allows the player to actually click on certain pieces of text to make a consequential decision that leads them down a different path of the story. This small feature alone brought our story to life, making it feel much more immersive for the player.

We had 2 of our friends playtest the Twine version of the story. They enjoyed reading the story and clicking on texts to make decisions which made the story feel much more interactive than before. One critique was that given the relative short length of each story branch and the existence of multiple different endings, our playtesters wished there was an option to start the game over to try and discover new paths. Certainly a valid critique that we had been planning on addressing in our next iteration.

Branching narrative built out in Twine

3. Restarting the game after each ending

When creating our branching narrative with multiple different endings, we intentionally made some endings feel a bit more abrupt and unsatisfying while others were more detailed, giving more closure to the players. We hoped that these varying levels of closure for each ending would invite the user to play the game again, making different decisions and discovering new endings to gradually piece together the full story.

After each ending the players are taken to a different story slide encouraging them to play again. For instance, if the player discovers a happy ending, they are taken to a slide that says “Well that turned out well. Think you can be as fortunate again next time? Run it back.” On the other hand, if the player discovers a sadder ending, they are instead met with “Not quite the ending you were hoping for? See if you can do better next time. Run it back.” By clicking “Run it back”, the player is automatically taken back to the very beginning of the story to play again.

Our same friend from iteration 1 that playtested the paper prototype also playtested the new version of our game. Though our improvements to the game made it feel more engaging, our playtester mentioned that it felt more like a story than a game at this point. One of the biggest issues we noticed is that the player felt intimidated by certain story slides that had really long blocks of text appear at once. They were spending too much time reading lengthy texts which took away from their gaming experience. Despite its length, much of the text was crucial for telling the story we wanted. Hence, though we tried to make our wording more succinct all around, we more so focused on making the large blocks of text more digestible in our next iteration.

End sequence that allows player to restart the game

4. Make text blocks more digestible

In response to our previous critique that the large text blocks felt too intimidating for the player, we added fade transitions to our blocks of text. Hence, now when a player starts a story slide, instead of having the entire text appear at the same time, we had small chunks of text gradually appear one at a time in accordance with a general reading speed.

We asked our 3 previous playtesters to also play this new version. They all mentioned that this small added transition effect made the text feel a lot more digestible and approachable. Additionally, they noted that the gradual appearance of texts made the story feel a lot more suspenseful than before.

While we were able to address the issue of making the text feel more digestible, we felt that the playtesters were still just reading a story rather than playing an interactive, immersive game. For instance, there are several different scenes where the player is placed in a life-or-death situation and must make a highly consequential decision. However, when making such a decision, the playtesters did not seem to feel any sense of urgency. This lack of emotion in the face of such a dire situation in the story showed us that our game was still lacking proper immersion. We tried to address this issue head on in our next iteration.

Passage that introduces new text with staggered animation instead of all at once

5. Incorporate timed decisions

In order to increase the player’s sense of urgency when making decisions, we decided to add a timer at the top of story slides that contained more time-sensitive, important decisions. The timer would say, “You have __ seconds left!”, with the number of seconds being displayed in a large, bright red font with a trembling effect. If the player was unable to make a decision within the designated time frame, then they were immediately taken to a different slide that signified “Game Over”. We anticipated the addition of a timer along with its stylistic features would increase the stress level of the player and convey the feelings of terror and suspense we hoped for.

We decided to have some fresh eyes playtest our new version, so we had two family members playtest our game. Though our playtesters certainly did feel an increased sense of urgency with the timer, they mentioned that their focus oftentimes immediately shifted over to the decisions rather than taking the time to read the preceding text that provided context for the decision. Essentially, the presence of the timer made the players feel like they did not have enough time to read the story and make a decision, so they prioritized making the decisions and skipped reading anything else.

This is an example of a timed passage. The context and dilemma appears all at once with a countdown timer.

6. Changed positioning of timer

With players feeling pressured to just make a decision without reading any of the accompanying story text, we decided to change when we introduced the timer. Instead of putting the timer at the top of screen and starting the countdown when the slide started, we decided to take advantage of our text transitions that we implemented earlier and introduce/start the timer when the decisions also appear on the screen. Hence, the player no longer feels a time pressure to read the initial story, they only feel a time pressure to make a decision which is ultimately what we wanted to accomplish. Also, given that players now only had to make a decision under time pressure, we standardized the timer to be 5 seconds for any decision.

Though the adjusted positioning of the timer allowed the player to feel more time pressure when making a decision, the timer itself was not immediately apparent to players when first introduced. When the playtesters saw the timer for the first time, they would oftentimes ask us “oh, is this a timer?” or spend time reading the default text accompanying the timer, during which the timer would have already ran out and the player would have died. We realized there was an absence of onboarding for the core mechanics of our game.

This is an example of a passage where the context appears before the timed dilemma.

7. Onboarding core mechanics

Though our game is relatively simple with only two main core mechanics (clickable texts, timer), we wanted to make sure that we were very thorough with our onboarding process for these mechanics. Our two initial slides introduce the mechanic of clicking a blue-highlighted text to move to another story slide. None of these initial decisions affect the outcome of the story so it allows the player to get familiar with these mechanics in a seamless, non-consequential manner. Similarly, in the third slide, we introduce the concept of the timer. We give the player 7 seconds to make a decision, and if they happen to run out of time, instead of ending the game, we simply reset the timer and give them more time to make a decision.

With these onboarding techniques introduced early in the game, our playtesters were no longer uncertain about how certain mechanics work and were able to enjoy the game more.

In the beginning passages, we acquaint players with the clickable text and timer mechanics.

8. Fine-tuning transition speeds

Through our multiple rounds of playtesting, one thing we noticed was that sometimes our texts appeared too quickly on screen while others appeared too slowly for our players. Understanding that everybody has different reading speeds, we attempted to adjust the timing of the text transitions to be comfortable for most players. For this particular iteration, we had 3 friends read through all the different passages in the story about 5 times each to give us feedback about how the transition speeds felt. We were sure to do multiple rounds of playtesting and pay meticulous attention to detail in order to make sure that the transitions always felt natural to the player.

Visual Identity

We set out to create a visual identity that was minimalistic and cohesive with our game. A huge mission in our game has been to give the player as much agency as possible. The player is in control of the narrative, and for that we believed they should be in control of how they visualize the story. For this reason, we intentionally strived for a minimalistic, black and white text interface. This dark color scheme fosters the serious tone that we wanted to create and the lack of visual distractions allows players to fully immerse themselves into the story.

Passage from The Babysitter
Style tile for The Babysitter

Next Steps

We envision The Babysitter evolving into an immersive audio experience. We created a slice that imagines what the audio might sound like for one possible storyline in the game. Check out this proof of concept in our demonstration of experience!

Note: In the demo linked above, the choices selected by the player are highlighted in pink.

The audio slice was developed using iMovie

Try it yourself

To play The Babysitter, click here and follow the instructions below.

Once you have followed the link above to the Google Drive folder where the game is hosted, download the HTML file.

Once you have the file downloaded, open it.

From here, you should be able to play The Babysitter for yourself!

This game was developed as a final project for Intro to Game Design (CS 247G) at Stanford University.

--

--