Jump to content

Level Design in The Last of Us: Part One


Furyo

This is the first article in a three-part series. Part One / Part Two / Part Three

Intro Level
1U0A5079.jpg
1st scene

In typical movie fashion, the game starts with an exposition scene which establishes the bond between Joel and his daughter Sarah. Here the watch plays a type of backward MacGuffin (http://en.wikipedia.org/wiki/MacGuffin), which movie fans will be familiar with. A term made popular by Alfred Hitchcock, this initial narrative element will keep showing up in multiple scenes in the game to move the scenario forward and link back to the initial bond Joel had with his daughter. Many other items in this game, which we’ll see exposed in Sarah’s room play the same role. It’s important to note that this game doesn’t use forward MacGuffins, instead relying on the early experience players have with Joel in the intro levels to help them relate to Joel in the later parts of the game, when he faces adversity from the other main characters in the game. This type of catalyst is sometimes linked to gameplay in some games, but not here. For instance, in a quest, looking to get somewhere or obtain something but never managing to. In BioShock Infinite, Elizabeth keeps trying to go to Paris, but never quite goes there in the main game.

Gameplay

Sarah goes to bed, only to be woken up by her Uncle Tommy’s phone call. The initial frame of Sarah getting up is a textbook example of player exposition. Using the mirror on the wall, Naughty Dog adds depth to the room, and presents Sarah as a playable character from both front and back. The color of the lamp shade also leaves nothing to chance. Using a warm color near her beloved items reinforces the comfort of her nest (bed) and contrasts heavily with the cold blue of the night in the mirror. These items on the wall, much like the watch earlier, play a narrative role in the rest of the game as tools to drive the scenario forward between Ellie and Joel.

1U0A4250.jpg1U0A5082.jpg

Sound wise, Naughty Dog made a classic choice not to add any music and simply build tension with environment sounds in the background. It plays great and helps focus the attention on the initial reveals. In the room, the placement of the birthday card ties the opening scene with this scene the following morning and introduces the “triangle” button as the “hand interaction” one in the game (pick up item, open door, etc).

At this point in the game, the player still does not quite know what to do, despite having played for a few minutes already. This guidance is given very clearly in a single word, right outside Sarah’s bedroom, as she yells “Dad?”. Perfect example of narrative design coupled with level design, that tells the player his/her immediate goal, and invites him/her to check out every single door, increasing the chances for maximum exposition of every theme in this intro level.

1U0A4251.jpg 1U0A4252.jpg

With the goal now firmly established, the placement of the door straight ahead, too obvious, makes that room a natural space for continued exploration of the game’s themes, as opposed to a significant room. It comes as no surprise to find inside that room just one piece of content. The placement of the only light source in this room, obvious as it is, reminds us that lighting is one of the most straightforward tools to guide players.

Joel’s bedroom

After leaving this bathroom, players are naturally directed towards Joel’s bedroom thanks to the window, extra light placed in front of it, and the barely open bedroom door. The sound of the TV is an ideal guidance tool, suggested instead of shown. This bedroom also offers the chance to see the gameplay loop closed for the first time. The Last of Us’ gameplay loop is always a variant on four themes: Exploration, Tension, Challenge, Reward, Return to Exploration. With the initial exploration started in Sarah’s room and the tension of having to find her dad, this room introduces the simplest of challenges – opening the door and following the gameplay instructions (L3) – which ends with an immediate reward of seeing the explosion in the distance. Finally, Sarah’s “Daaad?” closes the loop and makes players return to their exploration phase. Gameplay loops can express themselves over varying lengths. Second to second, minute to minute, hour to hour.

1U0A4155.jpg 1U0A4156.jpg

Returning to the hallway, a few classic LD rules can be seen in the same frame. The placement of the door allows players to face the staircase in the right direction, and the placement of the lamp at the bottom automatically invites players to go down. Notice its actual placement. While most times placing a light source away from a player’s immediate field of view increases its attraction, this one is placed to the right in plain sight of the player.

1U0A5083.jpg

Once at the bottom of the stairs, the window introduces a new narrative element, in the form of police cars. Notice that the cars are driving in the same direction as the player needs to move. This is yet another good tool to guide players subconsciously. If the lamp at the bottom of the stairs had been placed to the left, and away from the player, he/she would have likely turned the camera towards it and away from the windows, negating the introduction of the police cars. That’s why this light source was better left in the player’s field of view.

1U0A4253.jpg

Players naturally progress and now face this door to the garden, this time with a light source hidden beyond the playable space which naturally increases the mystery and tension in the scene. Just like upstairs in Joel’s bedroom with the TV, the dog barking here increases tension and attracts players forward.

1U0A5085.jpg

Once players reach the window, Naughty Dog doesn’t fall for the cliché of having an infected appear in the garden, and plays with players expectations instead interrupting the sequence with Joel’s phone. Doing so, “L3” is introduced again this time on the player’s critical path to make sure this mechanic is understood by all players.

1U0A5086.jpg1U0A5087.jpg

The placement of the phone to the right of the door is also no accident. It makes players move further away and to the other side of the living room from the office, where players are now supposed to go. This forces players to go by the garden window a second time and the use of the phone has forced the player’s immediate attention of the window to be erased. This perfect set up was necessary to create an element of surprise for the second traversal of the living room.

Narrative scene and transition
1U0A4255.jpg

A sign of truly great narrative games is the justification of every single camera takeover by placing the played character in a situation that allows for a smooth transition. Here, that’s the only reason this half open door is placed here. Since it’s already half open, like Joel’s bedroom door, there is no “triangle” interaction required. The goal of this door is to justify the exact position of Sarah in her animated entrance into the room, therefore the position of the camera, to allow for a smooth take over for the rest of the cinematic and the entrance and reveal of Joel, the very first in the game.

While the entire scene could have played out inside Joel’s office, Naughty Dog chose to have Sarah and Joel leave the office half way through, so as to cut back the length of the walk to the exit door and outside to the car. This allowed them to shave off a few seconds of otherwise boring content and make the action denser. Uncle Tommy’s introduction is pretty hectic with the rapid movements and a lot of information handed to the player, so to reinforce his presentation, Naughty Dog chose to have him turn towards the player once inside the car.

1U0A5089.jpg1U0A5090.jpg

The Last of Us, as many narrative games, presents choices to the player. They come in two types, active and inactive. Active choices are generally self-explanatory and are not even presented as such in games. For instance, play style (stealth or action) influences the outcome of fights, but they can also come in the form of a single button press, which usually destroys immersion in a world, and breaks the fourth wall. Inactive choices on the other hand play with morals and psychology between players and the characters they play. Here we see the first glimpse of the troublesome relationship to come between Joel and Ellie, in the eyes of her daughter Sarah who wishes that the car had stopped to help the stranded survivors. This makes players ask themselves where they would stand, and take sides with the future protagonists.

The accident serves here as a transition and justifies leaving the car behind. The timing of that sequence is probably not purely by chance. First Naughty Dog had illustrated all the themes they could from inside the car, and second the attention span of test players was probably waning beyond that point. Notice however the subtle and progressive introduction of infected in the world. The first one, inside Joel’s office comes in when they may yet be taken for humans, and as an element of a cinematic, it offers no challenge to the player. The second, in this car sequence, attacked other survivors and when posing an immediate threat to Sarah, was stopped by Tommy driving away. The third, much closer view comes in as a direct consequence of the car crash. These three progressive introductions of the game’s main antagonist are a textbook example of exposition that allows players to fully grasp the concept of the infected before having to deal with them. Many games fail to present enemies that way, instead relying on one-shot cinematics with poorly explained antics and backstory. The fact these enemies can’t talk and explain themselves pushed Naughty Dog to work them this way into the game, to great effect.

1U0A5092.jpg
Combat Tutorial

First introduction of the « Square » button for combat. As a rule, tutorials are better introduced when players attention span can be solely directed at the mechanic in question. Here, the tension resulting from the car accident and the sight of the infected nearby focuses the player’s attention on the tutorial for maximum effectiveness. Instead of breaking the immersion of the scene, this tutorial actually flows inside it, and players never question it. Naughty Dog’s choice for minimal UI invasion on the screen really pays off here.

1U0A4170.jpg
Chase sequence

Introducing Joel for the first time as a playable character (and the main protagonist) in the middle of a stressful situation could have been a risky proposal, which Naughty Dog managed to make work by taking away all combat (automatic death if caught by infected and gun given away to Tommy). Sarah, who would have trailed behind and become a center of attention for players is reunited with her dad after getting hurt in the accident. All of these moves act as perfect justification to have players only ever care about their own character. The only action required of the player is to dodge pedestrians, which is exactly the best activity to learn to control a brand new character. The use of a car that crashes into the gas station is a bit of a cliché by now, but remains a very strong justification for sending the player to the right, and have a couple invisible walls across the other streets. It remains better than a simple static object across the street and infinitely better than nothing at all.

1U0A4261.jpg

The firemen truck across the street serves both as justification for the fire raging in the building next door, and as a way to direct the player to the car crash about to block the street off. This second instance however occurs much closer to the player, increasing tension further, and culminating with stopping in front of the theater beyond. This “three strikes” approach to game design is rampant through most games these days, and certainly The Last of Us, for instance during the combat tutorial (three square button presses to leave the car) and is a sort of golden number first generalized by Nintendo.

1U0A4262.jpg1U0A5094.jpg

The use of audio after the third street blockage is mandatory given the exit is not readily apparent within a 45 degree field of view on either side of the theater. In third person games, presenting exits within this 90 degree angle is generally considered a safe choice to have players flow, on consoles at least where the FOV is usually limited more than on PC games. For instance, this was the rule we followed when designing Prince of Persia in 2008.

1U0A4264.jpg

In the alley and through to the other side, great use if not subtle of lighting to direct players to the left, and first use of the yellow color on all directional and interactive hints, which we’ll see later in the first level. We’ll find the same use for the ambulance down below, which strong red lights contrast easily with the night, and even the wind indicating the sense of direction. The headlights serve as guidance too of course, much like the hurt survivor on the ground.

 
1U0A5100.jpg

This is the first article in a three-part series. Part One / Part Two / Part Three

Edited by Furyo




User Feedback

Recommended Comments

On 12/2/2014 at 3:20 PM, Furyo said:

Thanks guys, and thank you Thrik for posting this class.

@Furyo , plaese , May I translate your articles to russian or ukrainian languages?

Plaese, send my answer on email nazarbanira@gmail.com.

Edited by Nazar
Link to comment
Share on other sites



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Mapcore Discord

  • Mapcore Supporters

    Our incredible Patreon supporters keep Mapcore's lights on. If you'd like to donate, check out our Patreon announcement.

    Note: This is brand new! The format will be tweaked and rolled out to more pages soon.

  • Our picks

    • [CS:GO] Shore
      One of the projects I worked on after I made de_austria.

      Yeah, I know the timing is really bad (CS2!), but can't change it... 🙁

      In general a lot went wrong during this project. Had a lot of problems with the layout, but I think I found a good compromise in the end. Also learned many new things. Maybe I would even be ready to create a really good map now after all, but I think that it's gonna be the final one. I really like making maps, but it has become too time consuming over the years for just being a hobby. Unfortunately I never managed to get a job in the games industry. So that's it. I hope it's a worthy ending of 20 years of making maps for me. 🙂

      Shore is a bomb defusal map for CS:GO that takes place on Lofoten Islands, Norway. (Also have a Hostage version of this that works well imo)

      Workshop link: https://steamcommunity.com/sharedfiles/filedetails/?id=2955084102

      I took some inspiration from this place in Norway:


      Layout:


      Some pictures:
      • 18 replies
×
×
  • Create New...