Jump to content

Furyo

Moderators
  • Content Count

    2,072
  • Joined

  • Last visited


Reputation Activity

  1. Like
    Furyo got a reaction from blackdog for an article, Level Design in The Last of Us: Part Three   
    This is the third article in a three-part series. Part One / Part Two / Part Three
    Combat tutorial The entire space for this first combat against humans is built to be an action tutorial. With no elevation changes in the space, and the single red tone of textures, this is the simplest arena one could design, which foreshadows a quick and easy fight. Notice the number of crates and cover objects on the ground, and their geometrical position. Clear “camps” are established on either side. Both NPCs are scripted only to move left and right, never to flank Joel, which leaves players with plenty of time to assess the situation. This space is built to encourage players to flank these NPCS to the left (Tess crouches to the right of the player). Another visual cue used to great effect here are the electricity lines, that circle over the space. They make the space feel tighter, and add a loop that mirrors the path down below.
    One also finds all three distinctive signs of a fight being over in action games: Tess stands and starts walking again (her AI state changes from InCombat to Normal), she starts a conversation with Joel and the combat music ends. In terms of scripting, these three signs are tested against the state of all spawned enemies (in this case, whether they’re alive).
      At the end of the passage under the arch, another instance of the “boost and pull” move, once again the only gate short of an actual door that can be used in this game. Right after this, a typical example of an “S” shaped corridor. Historically found everywhere in FPS games a decade ago, they’re still used in today’s non open-world games as occluders and loading corridors between two heavy areas. And what occludes one way works in multiplayer too, you’ll find them in many MP FPS levels (Counter-Strike, Team Fortress 2, Left 4 Dead, etc.) to break lines of sight and separate large areas to obtain the highest frames per second.
    As a side note, and something you may have noticed all along these levels, the environment artist broke up the monotony of this flat wall by making an entrance to a courtyard, to the left of this corridor. You could for instance find this same addition of depth inside the transition building in part 2 where players first learn how to heal themselves.
    As a side note, one of very few bugs in The Last of Us can be seen here, as the shader for the gameplay helpers is rendered through walls (normal behavior) but also over Joel's head.
          After dropping through the hole in the fence – another typical Naughty Dog gating mechanism - a new cinematic starts as players enter the combat arena. Enemies are now scripted much more freely, with their back to the player to enforce a stealth approach. The shape of the combat space itself is built to allow NPCs to move in long straight ways. The left hand side’s purpose is actually solely for this NPC to go there and allow for more movement in stealth (added difficulty) over the initial takedown against the infected in part 2. Tess continues to help kill two of the four enemies, as long as players play by the rules of this tutorial. Both signs above the doors to the building are once again not placed here by chance; the green one indicating the ideal path inside, and the red one a sure way to get spotted. And with both signs having these warm colors, the rest of the building wears a very cold blue to make the signs much more noticeable.
      This second combat also introduces dialogues between characters. Beyond their initial role as threat identification and background information, these conversations also serve as cues that NPCs are likely to change their patrol path once done. It’s therefore important to design these dialogues so they are not ambiguous when they stop.
       As with the gate to the previous occluding corridor, this space also features a strong light to indicate the exit. We’ll see the same light used in all four of these combat tutorials each time to direct the player to the exit of the arena. While this doesn’t seem too necessary in these instances, players’ orientation is often confused when leaving nonlinear spaces in which they were dedicating their attention to the action rather than the environment. These help players getting their bearings again. And now that doors are used in combat spaces - wide open not to collide with players or NPCs fighting - , they’re also textured in strong warm colors to be seen better. Doors in exploration spaces in this game never bear these colors.
      For this third and final tutorial combat (once again, magical game design number 3 shows up), Tess stops helping in any way other than shooting if the combat gets to that but a new mechanic is presented that offsets Tess. Joel can now pick up objects to create a diversion, essentially what Tess was doing before although she can’t be seen by NPCs. That’s a great way to progressively increase difficulty while not changing enemy type (all humans). The distance between the safe area players start in and the first threat is made longer to increase difficulty too and the same background info is given by NPCs to locate them with the help of the conveniently placed window. The orientation of the starting piece of cover also indicates the sense of direction of the upcoming fight, and where the exit will be located.
    A sign of a space specifically designed for a fight is to open up multiple entry points to each zone. Here this staircase lost its railings to allow players to go over to the second floor. A simpler exploration area would most likely not have this, and in some cases would have been worse for it if it did as player exposition requires certain camera shots. Here the game moves away from being purely about exploration and makes players evolve on a two-floor loop, gated to a coop move with Tess. Many fights in this game are optional, but this isn’t one of them and the space reflects it.
    As a final reward to completing all combat tutorials, Joel is rewarded with finding his very first shiv, while still inside the combat space. The shiv, much like the first aid kit tutorial (see part 2) is forced to the player as its effect is as straightforward as its game mechanics are complex (upgrades, use). Here the elevation, on top of increasing the difficulty of the fight, also serves to create side exploration spaces. Notice the color of the handrails that add a lot of depth to this scene and help players focus on one of the purposes of this tutorial: elevation.
          The final combat is the fourth human encounter, second unassisted combat, and first active choice on the part of the player between “stealth” and “action”. This choice is actually shown on screen and justified by Tess’s dialogue. This fight is simply a summary, taken to the next scale, of every theme explored in combat tutorials seen this far: navigation, object interaction, enemies visibility cone, player noise and elevation (or lack thereof in this case). The choice of color palette reinforces these options, with the cold colors used on the left for a stealthier approach, and the warm yellow tones used with the sun on the right hand side to show danger and action. The right hand side approach also contains more immediate rewards (weapons) for having been bolder.
          Robert being another human, there was no reason to turn him into a boss. But as Naughty Dog also needed to carry the scenario forward, it made sense to turn this fight into a chase sequence. For the same reason as Joel and Sarah move away from Joel’s office in the prologue, here the chase sequence allows to introduce Marlene much more dynamically and not have her simply appear in the middle of the previous combat space. That latter solution can usually be seen with less important characters, usually from the same faction, as waves of reinforcement.
    The calm before the storm This marks the end of the tutorial section of the intro levels. A few more mechanics will be introduced all along the game (enemies, weapons, upgrades) but the vast majority of the systems has already been presented by now. The bigger the challenge, the bigger the spoils: right after the cinematic ends, Joel is presented with both bandings and blades – the resources needed to create shivs - in two distinct locations separated by the first vista in the game, itself to be considered a narrative reward for having completed the first chapter, as well as an introduction of the destination ahead.
        As Joel progresses through to Ellie, and the tutorials are now all gone, combat spaces become larger, with much longer lines of sight, introducing the many challenges ahead and giving the game its true scale. The next "co-op" take down between Joel and Marlene pushes this type of gameplay another step further by hiding one of the two enemies to kill inside the building, which shows that the gameplay itself will also take place over longer distances, not just the locations.
        Another sign of the hands free design for the rest of the game, the first puzzle players encounter shows no hints at all. After another dialogue corridor designed to present Joel and Ellie’s early relationship, Tess joins them again and the adventure starts. Have fun with the rest of the game!
          Thank you for reading this detailed level design analysis of the intro section of The Last of Us. For any additional question, or to discuss this further, feel free to contact me through LinkedIn.
    This is the third article in a three-part series. Part One / Part Two / Part Three
  2. Like
    Furyo got a reaction from mkandersson for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  3. Like
    Furyo got a reaction from Benmx for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  4. Like
    Furyo got a reaction from Deathy for an article, Level Design in The Last of Us: Part Three   
    This is the third article in a three-part series. Part One / Part Two / Part Three
    Combat tutorial The entire space for this first combat against humans is built to be an action tutorial. With no elevation changes in the space, and the single red tone of textures, this is the simplest arena one could design, which foreshadows a quick and easy fight. Notice the number of crates and cover objects on the ground, and their geometrical position. Clear “camps” are established on either side. Both NPCs are scripted only to move left and right, never to flank Joel, which leaves players with plenty of time to assess the situation. This space is built to encourage players to flank these NPCS to the left (Tess crouches to the right of the player). Another visual cue used to great effect here are the electricity lines, that circle over the space. They make the space feel tighter, and add a loop that mirrors the path down below.
    One also finds all three distinctive signs of a fight being over in action games: Tess stands and starts walking again (her AI state changes from InCombat to Normal), she starts a conversation with Joel and the combat music ends. In terms of scripting, these three signs are tested against the state of all spawned enemies (in this case, whether they’re alive).
      At the end of the passage under the arch, another instance of the “boost and pull” move, once again the only gate short of an actual door that can be used in this game. Right after this, a typical example of an “S” shaped corridor. Historically found everywhere in FPS games a decade ago, they’re still used in today’s non open-world games as occluders and loading corridors between two heavy areas. And what occludes one way works in multiplayer too, you’ll find them in many MP FPS levels (Counter-Strike, Team Fortress 2, Left 4 Dead, etc.) to break lines of sight and separate large areas to obtain the highest frames per second.
    As a side note, and something you may have noticed all along these levels, the environment artist broke up the monotony of this flat wall by making an entrance to a courtyard, to the left of this corridor. You could for instance find this same addition of depth inside the transition building in part 2 where players first learn how to heal themselves.
    As a side note, one of very few bugs in The Last of Us can be seen here, as the shader for the gameplay helpers is rendered through walls (normal behavior) but also over Joel's head.
          After dropping through the hole in the fence – another typical Naughty Dog gating mechanism - a new cinematic starts as players enter the combat arena. Enemies are now scripted much more freely, with their back to the player to enforce a stealth approach. The shape of the combat space itself is built to allow NPCs to move in long straight ways. The left hand side’s purpose is actually solely for this NPC to go there and allow for more movement in stealth (added difficulty) over the initial takedown against the infected in part 2. Tess continues to help kill two of the four enemies, as long as players play by the rules of this tutorial. Both signs above the doors to the building are once again not placed here by chance; the green one indicating the ideal path inside, and the red one a sure way to get spotted. And with both signs having these warm colors, the rest of the building wears a very cold blue to make the signs much more noticeable.
      This second combat also introduces dialogues between characters. Beyond their initial role as threat identification and background information, these conversations also serve as cues that NPCs are likely to change their patrol path once done. It’s therefore important to design these dialogues so they are not ambiguous when they stop.
       As with the gate to the previous occluding corridor, this space also features a strong light to indicate the exit. We’ll see the same light used in all four of these combat tutorials each time to direct the player to the exit of the arena. While this doesn’t seem too necessary in these instances, players’ orientation is often confused when leaving nonlinear spaces in which they were dedicating their attention to the action rather than the environment. These help players getting their bearings again. And now that doors are used in combat spaces - wide open not to collide with players or NPCs fighting - , they’re also textured in strong warm colors to be seen better. Doors in exploration spaces in this game never bear these colors.
      For this third and final tutorial combat (once again, magical game design number 3 shows up), Tess stops helping in any way other than shooting if the combat gets to that but a new mechanic is presented that offsets Tess. Joel can now pick up objects to create a diversion, essentially what Tess was doing before although she can’t be seen by NPCs. That’s a great way to progressively increase difficulty while not changing enemy type (all humans). The distance between the safe area players start in and the first threat is made longer to increase difficulty too and the same background info is given by NPCs to locate them with the help of the conveniently placed window. The orientation of the starting piece of cover also indicates the sense of direction of the upcoming fight, and where the exit will be located.
    A sign of a space specifically designed for a fight is to open up multiple entry points to each zone. Here this staircase lost its railings to allow players to go over to the second floor. A simpler exploration area would most likely not have this, and in some cases would have been worse for it if it did as player exposition requires certain camera shots. Here the game moves away from being purely about exploration and makes players evolve on a two-floor loop, gated to a coop move with Tess. Many fights in this game are optional, but this isn’t one of them and the space reflects it.
    As a final reward to completing all combat tutorials, Joel is rewarded with finding his very first shiv, while still inside the combat space. The shiv, much like the first aid kit tutorial (see part 2) is forced to the player as its effect is as straightforward as its game mechanics are complex (upgrades, use). Here the elevation, on top of increasing the difficulty of the fight, also serves to create side exploration spaces. Notice the color of the handrails that add a lot of depth to this scene and help players focus on one of the purposes of this tutorial: elevation.
          The final combat is the fourth human encounter, second unassisted combat, and first active choice on the part of the player between “stealth” and “action”. This choice is actually shown on screen and justified by Tess’s dialogue. This fight is simply a summary, taken to the next scale, of every theme explored in combat tutorials seen this far: navigation, object interaction, enemies visibility cone, player noise and elevation (or lack thereof in this case). The choice of color palette reinforces these options, with the cold colors used on the left for a stealthier approach, and the warm yellow tones used with the sun on the right hand side to show danger and action. The right hand side approach also contains more immediate rewards (weapons) for having been bolder.
          Robert being another human, there was no reason to turn him into a boss. But as Naughty Dog also needed to carry the scenario forward, it made sense to turn this fight into a chase sequence. For the same reason as Joel and Sarah move away from Joel’s office in the prologue, here the chase sequence allows to introduce Marlene much more dynamically and not have her simply appear in the middle of the previous combat space. That latter solution can usually be seen with less important characters, usually from the same faction, as waves of reinforcement.
    The calm before the storm This marks the end of the tutorial section of the intro levels. A few more mechanics will be introduced all along the game (enemies, weapons, upgrades) but the vast majority of the systems has already been presented by now. The bigger the challenge, the bigger the spoils: right after the cinematic ends, Joel is presented with both bandings and blades – the resources needed to create shivs - in two distinct locations separated by the first vista in the game, itself to be considered a narrative reward for having completed the first chapter, as well as an introduction of the destination ahead.
        As Joel progresses through to Ellie, and the tutorials are now all gone, combat spaces become larger, with much longer lines of sight, introducing the many challenges ahead and giving the game its true scale. The next "co-op" take down between Joel and Marlene pushes this type of gameplay another step further by hiding one of the two enemies to kill inside the building, which shows that the gameplay itself will also take place over longer distances, not just the locations.
        Another sign of the hands free design for the rest of the game, the first puzzle players encounter shows no hints at all. After another dialogue corridor designed to present Joel and Ellie’s early relationship, Tess joins them again and the adventure starts. Have fun with the rest of the game!
          Thank you for reading this detailed level design analysis of the intro section of The Last of Us. For any additional question, or to discuss this further, feel free to contact me through LinkedIn.
    This is the third article in a three-part series. Part One / Part Two / Part Three
  5. Like
    Furyo got a reaction from Vaya for an article, Level Design in The Last of Us: Part Three   
    This is the third article in a three-part series. Part One / Part Two / Part Three
    Combat tutorial The entire space for this first combat against humans is built to be an action tutorial. With no elevation changes in the space, and the single red tone of textures, this is the simplest arena one could design, which foreshadows a quick and easy fight. Notice the number of crates and cover objects on the ground, and their geometrical position. Clear “camps” are established on either side. Both NPCs are scripted only to move left and right, never to flank Joel, which leaves players with plenty of time to assess the situation. This space is built to encourage players to flank these NPCS to the left (Tess crouches to the right of the player). Another visual cue used to great effect here are the electricity lines, that circle over the space. They make the space feel tighter, and add a loop that mirrors the path down below.
    One also finds all three distinctive signs of a fight being over in action games: Tess stands and starts walking again (her AI state changes from InCombat to Normal), she starts a conversation with Joel and the combat music ends. In terms of scripting, these three signs are tested against the state of all spawned enemies (in this case, whether they’re alive).
      At the end of the passage under the arch, another instance of the “boost and pull” move, once again the only gate short of an actual door that can be used in this game. Right after this, a typical example of an “S” shaped corridor. Historically found everywhere in FPS games a decade ago, they’re still used in today’s non open-world games as occluders and loading corridors between two heavy areas. And what occludes one way works in multiplayer too, you’ll find them in many MP FPS levels (Counter-Strike, Team Fortress 2, Left 4 Dead, etc.) to break lines of sight and separate large areas to obtain the highest frames per second.
    As a side note, and something you may have noticed all along these levels, the environment artist broke up the monotony of this flat wall by making an entrance to a courtyard, to the left of this corridor. You could for instance find this same addition of depth inside the transition building in part 2 where players first learn how to heal themselves.
    As a side note, one of very few bugs in The Last of Us can be seen here, as the shader for the gameplay helpers is rendered through walls (normal behavior) but also over Joel's head.
          After dropping through the hole in the fence – another typical Naughty Dog gating mechanism - a new cinematic starts as players enter the combat arena. Enemies are now scripted much more freely, with their back to the player to enforce a stealth approach. The shape of the combat space itself is built to allow NPCs to move in long straight ways. The left hand side’s purpose is actually solely for this NPC to go there and allow for more movement in stealth (added difficulty) over the initial takedown against the infected in part 2. Tess continues to help kill two of the four enemies, as long as players play by the rules of this tutorial. Both signs above the doors to the building are once again not placed here by chance; the green one indicating the ideal path inside, and the red one a sure way to get spotted. And with both signs having these warm colors, the rest of the building wears a very cold blue to make the signs much more noticeable.
      This second combat also introduces dialogues between characters. Beyond their initial role as threat identification and background information, these conversations also serve as cues that NPCs are likely to change their patrol path once done. It’s therefore important to design these dialogues so they are not ambiguous when they stop.
       As with the gate to the previous occluding corridor, this space also features a strong light to indicate the exit. We’ll see the same light used in all four of these combat tutorials each time to direct the player to the exit of the arena. While this doesn’t seem too necessary in these instances, players’ orientation is often confused when leaving nonlinear spaces in which they were dedicating their attention to the action rather than the environment. These help players getting their bearings again. And now that doors are used in combat spaces - wide open not to collide with players or NPCs fighting - , they’re also textured in strong warm colors to be seen better. Doors in exploration spaces in this game never bear these colors.
      For this third and final tutorial combat (once again, magical game design number 3 shows up), Tess stops helping in any way other than shooting if the combat gets to that but a new mechanic is presented that offsets Tess. Joel can now pick up objects to create a diversion, essentially what Tess was doing before although she can’t be seen by NPCs. That’s a great way to progressively increase difficulty while not changing enemy type (all humans). The distance between the safe area players start in and the first threat is made longer to increase difficulty too and the same background info is given by NPCs to locate them with the help of the conveniently placed window. The orientation of the starting piece of cover also indicates the sense of direction of the upcoming fight, and where the exit will be located.
    A sign of a space specifically designed for a fight is to open up multiple entry points to each zone. Here this staircase lost its railings to allow players to go over to the second floor. A simpler exploration area would most likely not have this, and in some cases would have been worse for it if it did as player exposition requires certain camera shots. Here the game moves away from being purely about exploration and makes players evolve on a two-floor loop, gated to a coop move with Tess. Many fights in this game are optional, but this isn’t one of them and the space reflects it.
    As a final reward to completing all combat tutorials, Joel is rewarded with finding his very first shiv, while still inside the combat space. The shiv, much like the first aid kit tutorial (see part 2) is forced to the player as its effect is as straightforward as its game mechanics are complex (upgrades, use). Here the elevation, on top of increasing the difficulty of the fight, also serves to create side exploration spaces. Notice the color of the handrails that add a lot of depth to this scene and help players focus on one of the purposes of this tutorial: elevation.
          The final combat is the fourth human encounter, second unassisted combat, and first active choice on the part of the player between “stealth” and “action”. This choice is actually shown on screen and justified by Tess’s dialogue. This fight is simply a summary, taken to the next scale, of every theme explored in combat tutorials seen this far: navigation, object interaction, enemies visibility cone, player noise and elevation (or lack thereof in this case). The choice of color palette reinforces these options, with the cold colors used on the left for a stealthier approach, and the warm yellow tones used with the sun on the right hand side to show danger and action. The right hand side approach also contains more immediate rewards (weapons) for having been bolder.
          Robert being another human, there was no reason to turn him into a boss. But as Naughty Dog also needed to carry the scenario forward, it made sense to turn this fight into a chase sequence. For the same reason as Joel and Sarah move away from Joel’s office in the prologue, here the chase sequence allows to introduce Marlene much more dynamically and not have her simply appear in the middle of the previous combat space. That latter solution can usually be seen with less important characters, usually from the same faction, as waves of reinforcement.
    The calm before the storm This marks the end of the tutorial section of the intro levels. A few more mechanics will be introduced all along the game (enemies, weapons, upgrades) but the vast majority of the systems has already been presented by now. The bigger the challenge, the bigger the spoils: right after the cinematic ends, Joel is presented with both bandings and blades – the resources needed to create shivs - in two distinct locations separated by the first vista in the game, itself to be considered a narrative reward for having completed the first chapter, as well as an introduction of the destination ahead.
        As Joel progresses through to Ellie, and the tutorials are now all gone, combat spaces become larger, with much longer lines of sight, introducing the many challenges ahead and giving the game its true scale. The next "co-op" take down between Joel and Marlene pushes this type of gameplay another step further by hiding one of the two enemies to kill inside the building, which shows that the gameplay itself will also take place over longer distances, not just the locations.
        Another sign of the hands free design for the rest of the game, the first puzzle players encounter shows no hints at all. After another dialogue corridor designed to present Joel and Ellie’s early relationship, Tess joins them again and the adventure starts. Have fun with the rest of the game!
          Thank you for reading this detailed level design analysis of the intro section of The Last of Us. For any additional question, or to discuss this further, feel free to contact me through LinkedIn.
    This is the third article in a three-part series. Part One / Part Two / Part Three
  6. Like
    Furyo got a reaction from Sprony for an article, Level Design in The Last of Us: Part Three   
    This is the third article in a three-part series. Part One / Part Two / Part Three
    Combat tutorial The entire space for this first combat against humans is built to be an action tutorial. With no elevation changes in the space, and the single red tone of textures, this is the simplest arena one could design, which foreshadows a quick and easy fight. Notice the number of crates and cover objects on the ground, and their geometrical position. Clear “camps” are established on either side. Both NPCs are scripted only to move left and right, never to flank Joel, which leaves players with plenty of time to assess the situation. This space is built to encourage players to flank these NPCS to the left (Tess crouches to the right of the player). Another visual cue used to great effect here are the electricity lines, that circle over the space. They make the space feel tighter, and add a loop that mirrors the path down below.
    One also finds all three distinctive signs of a fight being over in action games: Tess stands and starts walking again (her AI state changes from InCombat to Normal), she starts a conversation with Joel and the combat music ends. In terms of scripting, these three signs are tested against the state of all spawned enemies (in this case, whether they’re alive).
      At the end of the passage under the arch, another instance of the “boost and pull” move, once again the only gate short of an actual door that can be used in this game. Right after this, a typical example of an “S” shaped corridor. Historically found everywhere in FPS games a decade ago, they’re still used in today’s non open-world games as occluders and loading corridors between two heavy areas. And what occludes one way works in multiplayer too, you’ll find them in many MP FPS levels (Counter-Strike, Team Fortress 2, Left 4 Dead, etc.) to break lines of sight and separate large areas to obtain the highest frames per second.
    As a side note, and something you may have noticed all along these levels, the environment artist broke up the monotony of this flat wall by making an entrance to a courtyard, to the left of this corridor. You could for instance find this same addition of depth inside the transition building in part 2 where players first learn how to heal themselves.
    As a side note, one of very few bugs in The Last of Us can be seen here, as the shader for the gameplay helpers is rendered through walls (normal behavior) but also over Joel's head.
          After dropping through the hole in the fence – another typical Naughty Dog gating mechanism - a new cinematic starts as players enter the combat arena. Enemies are now scripted much more freely, with their back to the player to enforce a stealth approach. The shape of the combat space itself is built to allow NPCs to move in long straight ways. The left hand side’s purpose is actually solely for this NPC to go there and allow for more movement in stealth (added difficulty) over the initial takedown against the infected in part 2. Tess continues to help kill two of the four enemies, as long as players play by the rules of this tutorial. Both signs above the doors to the building are once again not placed here by chance; the green one indicating the ideal path inside, and the red one a sure way to get spotted. And with both signs having these warm colors, the rest of the building wears a very cold blue to make the signs much more noticeable.
      This second combat also introduces dialogues between characters. Beyond their initial role as threat identification and background information, these conversations also serve as cues that NPCs are likely to change their patrol path once done. It’s therefore important to design these dialogues so they are not ambiguous when they stop.
       As with the gate to the previous occluding corridor, this space also features a strong light to indicate the exit. We’ll see the same light used in all four of these combat tutorials each time to direct the player to the exit of the arena. While this doesn’t seem too necessary in these instances, players’ orientation is often confused when leaving nonlinear spaces in which they were dedicating their attention to the action rather than the environment. These help players getting their bearings again. And now that doors are used in combat spaces - wide open not to collide with players or NPCs fighting - , they’re also textured in strong warm colors to be seen better. Doors in exploration spaces in this game never bear these colors.
      For this third and final tutorial combat (once again, magical game design number 3 shows up), Tess stops helping in any way other than shooting if the combat gets to that but a new mechanic is presented that offsets Tess. Joel can now pick up objects to create a diversion, essentially what Tess was doing before although she can’t be seen by NPCs. That’s a great way to progressively increase difficulty while not changing enemy type (all humans). The distance between the safe area players start in and the first threat is made longer to increase difficulty too and the same background info is given by NPCs to locate them with the help of the conveniently placed window. The orientation of the starting piece of cover also indicates the sense of direction of the upcoming fight, and where the exit will be located.
    A sign of a space specifically designed for a fight is to open up multiple entry points to each zone. Here this staircase lost its railings to allow players to go over to the second floor. A simpler exploration area would most likely not have this, and in some cases would have been worse for it if it did as player exposition requires certain camera shots. Here the game moves away from being purely about exploration and makes players evolve on a two-floor loop, gated to a coop move with Tess. Many fights in this game are optional, but this isn’t one of them and the space reflects it.
    As a final reward to completing all combat tutorials, Joel is rewarded with finding his very first shiv, while still inside the combat space. The shiv, much like the first aid kit tutorial (see part 2) is forced to the player as its effect is as straightforward as its game mechanics are complex (upgrades, use). Here the elevation, on top of increasing the difficulty of the fight, also serves to create side exploration spaces. Notice the color of the handrails that add a lot of depth to this scene and help players focus on one of the purposes of this tutorial: elevation.
          The final combat is the fourth human encounter, second unassisted combat, and first active choice on the part of the player between “stealth” and “action”. This choice is actually shown on screen and justified by Tess’s dialogue. This fight is simply a summary, taken to the next scale, of every theme explored in combat tutorials seen this far: navigation, object interaction, enemies visibility cone, player noise and elevation (or lack thereof in this case). The choice of color palette reinforces these options, with the cold colors used on the left for a stealthier approach, and the warm yellow tones used with the sun on the right hand side to show danger and action. The right hand side approach also contains more immediate rewards (weapons) for having been bolder.
          Robert being another human, there was no reason to turn him into a boss. But as Naughty Dog also needed to carry the scenario forward, it made sense to turn this fight into a chase sequence. For the same reason as Joel and Sarah move away from Joel’s office in the prologue, here the chase sequence allows to introduce Marlene much more dynamically and not have her simply appear in the middle of the previous combat space. That latter solution can usually be seen with less important characters, usually from the same faction, as waves of reinforcement.
    The calm before the storm This marks the end of the tutorial section of the intro levels. A few more mechanics will be introduced all along the game (enemies, weapons, upgrades) but the vast majority of the systems has already been presented by now. The bigger the challenge, the bigger the spoils: right after the cinematic ends, Joel is presented with both bandings and blades – the resources needed to create shivs - in two distinct locations separated by the first vista in the game, itself to be considered a narrative reward for having completed the first chapter, as well as an introduction of the destination ahead.
        As Joel progresses through to Ellie, and the tutorials are now all gone, combat spaces become larger, with much longer lines of sight, introducing the many challenges ahead and giving the game its true scale. The next "co-op" take down between Joel and Marlene pushes this type of gameplay another step further by hiding one of the two enemies to kill inside the building, which shows that the gameplay itself will also take place over longer distances, not just the locations.
        Another sign of the hands free design for the rest of the game, the first puzzle players encounter shows no hints at all. After another dialogue corridor designed to present Joel and Ellie’s early relationship, Tess joins them again and the adventure starts. Have fun with the rest of the game!
          Thank you for reading this detailed level design analysis of the intro section of The Last of Us. For any additional question, or to discuss this further, feel free to contact me through LinkedIn.
    This is the third article in a three-part series. Part One / Part Two / Part Three
  7. Like
    Furyo got a reaction from LATTEH for an article, Level Design in The Last of Us: Part Three   
    This is the third article in a three-part series. Part One / Part Two / Part Three
    Combat tutorial The entire space for this first combat against humans is built to be an action tutorial. With no elevation changes in the space, and the single red tone of textures, this is the simplest arena one could design, which foreshadows a quick and easy fight. Notice the number of crates and cover objects on the ground, and their geometrical position. Clear “camps” are established on either side. Both NPCs are scripted only to move left and right, never to flank Joel, which leaves players with plenty of time to assess the situation. This space is built to encourage players to flank these NPCS to the left (Tess crouches to the right of the player). Another visual cue used to great effect here are the electricity lines, that circle over the space. They make the space feel tighter, and add a loop that mirrors the path down below.
    One also finds all three distinctive signs of a fight being over in action games: Tess stands and starts walking again (her AI state changes from InCombat to Normal), she starts a conversation with Joel and the combat music ends. In terms of scripting, these three signs are tested against the state of all spawned enemies (in this case, whether they’re alive).
      At the end of the passage under the arch, another instance of the “boost and pull” move, once again the only gate short of an actual door that can be used in this game. Right after this, a typical example of an “S” shaped corridor. Historically found everywhere in FPS games a decade ago, they’re still used in today’s non open-world games as occluders and loading corridors between two heavy areas. And what occludes one way works in multiplayer too, you’ll find them in many MP FPS levels (Counter-Strike, Team Fortress 2, Left 4 Dead, etc.) to break lines of sight and separate large areas to obtain the highest frames per second.
    As a side note, and something you may have noticed all along these levels, the environment artist broke up the monotony of this flat wall by making an entrance to a courtyard, to the left of this corridor. You could for instance find this same addition of depth inside the transition building in part 2 where players first learn how to heal themselves.
    As a side note, one of very few bugs in The Last of Us can be seen here, as the shader for the gameplay helpers is rendered through walls (normal behavior) but also over Joel's head.
          After dropping through the hole in the fence – another typical Naughty Dog gating mechanism - a new cinematic starts as players enter the combat arena. Enemies are now scripted much more freely, with their back to the player to enforce a stealth approach. The shape of the combat space itself is built to allow NPCs to move in long straight ways. The left hand side’s purpose is actually solely for this NPC to go there and allow for more movement in stealth (added difficulty) over the initial takedown against the infected in part 2. Tess continues to help kill two of the four enemies, as long as players play by the rules of this tutorial. Both signs above the doors to the building are once again not placed here by chance; the green one indicating the ideal path inside, and the red one a sure way to get spotted. And with both signs having these warm colors, the rest of the building wears a very cold blue to make the signs much more noticeable.
      This second combat also introduces dialogues between characters. Beyond their initial role as threat identification and background information, these conversations also serve as cues that NPCs are likely to change their patrol path once done. It’s therefore important to design these dialogues so they are not ambiguous when they stop.
       As with the gate to the previous occluding corridor, this space also features a strong light to indicate the exit. We’ll see the same light used in all four of these combat tutorials each time to direct the player to the exit of the arena. While this doesn’t seem too necessary in these instances, players’ orientation is often confused when leaving nonlinear spaces in which they were dedicating their attention to the action rather than the environment. These help players getting their bearings again. And now that doors are used in combat spaces - wide open not to collide with players or NPCs fighting - , they’re also textured in strong warm colors to be seen better. Doors in exploration spaces in this game never bear these colors.
      For this third and final tutorial combat (once again, magical game design number 3 shows up), Tess stops helping in any way other than shooting if the combat gets to that but a new mechanic is presented that offsets Tess. Joel can now pick up objects to create a diversion, essentially what Tess was doing before although she can’t be seen by NPCs. That’s a great way to progressively increase difficulty while not changing enemy type (all humans). The distance between the safe area players start in and the first threat is made longer to increase difficulty too and the same background info is given by NPCs to locate them with the help of the conveniently placed window. The orientation of the starting piece of cover also indicates the sense of direction of the upcoming fight, and where the exit will be located.
    A sign of a space specifically designed for a fight is to open up multiple entry points to each zone. Here this staircase lost its railings to allow players to go over to the second floor. A simpler exploration area would most likely not have this, and in some cases would have been worse for it if it did as player exposition requires certain camera shots. Here the game moves away from being purely about exploration and makes players evolve on a two-floor loop, gated to a coop move with Tess. Many fights in this game are optional, but this isn’t one of them and the space reflects it.
    As a final reward to completing all combat tutorials, Joel is rewarded with finding his very first shiv, while still inside the combat space. The shiv, much like the first aid kit tutorial (see part 2) is forced to the player as its effect is as straightforward as its game mechanics are complex (upgrades, use). Here the elevation, on top of increasing the difficulty of the fight, also serves to create side exploration spaces. Notice the color of the handrails that add a lot of depth to this scene and help players focus on one of the purposes of this tutorial: elevation.
          The final combat is the fourth human encounter, second unassisted combat, and first active choice on the part of the player between “stealth” and “action”. This choice is actually shown on screen and justified by Tess’s dialogue. This fight is simply a summary, taken to the next scale, of every theme explored in combat tutorials seen this far: navigation, object interaction, enemies visibility cone, player noise and elevation (or lack thereof in this case). The choice of color palette reinforces these options, with the cold colors used on the left for a stealthier approach, and the warm yellow tones used with the sun on the right hand side to show danger and action. The right hand side approach also contains more immediate rewards (weapons) for having been bolder.
          Robert being another human, there was no reason to turn him into a boss. But as Naughty Dog also needed to carry the scenario forward, it made sense to turn this fight into a chase sequence. For the same reason as Joel and Sarah move away from Joel’s office in the prologue, here the chase sequence allows to introduce Marlene much more dynamically and not have her simply appear in the middle of the previous combat space. That latter solution can usually be seen with less important characters, usually from the same faction, as waves of reinforcement.
    The calm before the storm This marks the end of the tutorial section of the intro levels. A few more mechanics will be introduced all along the game (enemies, weapons, upgrades) but the vast majority of the systems has already been presented by now. The bigger the challenge, the bigger the spoils: right after the cinematic ends, Joel is presented with both bandings and blades – the resources needed to create shivs - in two distinct locations separated by the first vista in the game, itself to be considered a narrative reward for having completed the first chapter, as well as an introduction of the destination ahead.
        As Joel progresses through to Ellie, and the tutorials are now all gone, combat spaces become larger, with much longer lines of sight, introducing the many challenges ahead and giving the game its true scale. The next "co-op" take down between Joel and Marlene pushes this type of gameplay another step further by hiding one of the two enemies to kill inside the building, which shows that the gameplay itself will also take place over longer distances, not just the locations.
        Another sign of the hands free design for the rest of the game, the first puzzle players encounter shows no hints at all. After another dialogue corridor designed to present Joel and Ellie’s early relationship, Tess joins them again and the adventure starts. Have fun with the rest of the game!
          Thank you for reading this detailed level design analysis of the intro section of The Last of Us. For any additional question, or to discuss this further, feel free to contact me through LinkedIn.
    This is the third article in a three-part series. Part One / Part Two / Part Three
  8. Like
    Furyo got a reaction from TheOnlyDoubleF for an article, Level Design in The Last of Us: Part Three   
    This is the third article in a three-part series. Part One / Part Two / Part Three
    Combat tutorial The entire space for this first combat against humans is built to be an action tutorial. With no elevation changes in the space, and the single red tone of textures, this is the simplest arena one could design, which foreshadows a quick and easy fight. Notice the number of crates and cover objects on the ground, and their geometrical position. Clear “camps” are established on either side. Both NPCs are scripted only to move left and right, never to flank Joel, which leaves players with plenty of time to assess the situation. This space is built to encourage players to flank these NPCS to the left (Tess crouches to the right of the player). Another visual cue used to great effect here are the electricity lines, that circle over the space. They make the space feel tighter, and add a loop that mirrors the path down below.
    One also finds all three distinctive signs of a fight being over in action games: Tess stands and starts walking again (her AI state changes from InCombat to Normal), she starts a conversation with Joel and the combat music ends. In terms of scripting, these three signs are tested against the state of all spawned enemies (in this case, whether they’re alive).
      At the end of the passage under the arch, another instance of the “boost and pull” move, once again the only gate short of an actual door that can be used in this game. Right after this, a typical example of an “S” shaped corridor. Historically found everywhere in FPS games a decade ago, they’re still used in today’s non open-world games as occluders and loading corridors between two heavy areas. And what occludes one way works in multiplayer too, you’ll find them in many MP FPS levels (Counter-Strike, Team Fortress 2, Left 4 Dead, etc.) to break lines of sight and separate large areas to obtain the highest frames per second.
    As a side note, and something you may have noticed all along these levels, the environment artist broke up the monotony of this flat wall by making an entrance to a courtyard, to the left of this corridor. You could for instance find this same addition of depth inside the transition building in part 2 where players first learn how to heal themselves.
    As a side note, one of very few bugs in The Last of Us can be seen here, as the shader for the gameplay helpers is rendered through walls (normal behavior) but also over Joel's head.
          After dropping through the hole in the fence – another typical Naughty Dog gating mechanism - a new cinematic starts as players enter the combat arena. Enemies are now scripted much more freely, with their back to the player to enforce a stealth approach. The shape of the combat space itself is built to allow NPCs to move in long straight ways. The left hand side’s purpose is actually solely for this NPC to go there and allow for more movement in stealth (added difficulty) over the initial takedown against the infected in part 2. Tess continues to help kill two of the four enemies, as long as players play by the rules of this tutorial. Both signs above the doors to the building are once again not placed here by chance; the green one indicating the ideal path inside, and the red one a sure way to get spotted. And with both signs having these warm colors, the rest of the building wears a very cold blue to make the signs much more noticeable.
      This second combat also introduces dialogues between characters. Beyond their initial role as threat identification and background information, these conversations also serve as cues that NPCs are likely to change their patrol path once done. It’s therefore important to design these dialogues so they are not ambiguous when they stop.
       As with the gate to the previous occluding corridor, this space also features a strong light to indicate the exit. We’ll see the same light used in all four of these combat tutorials each time to direct the player to the exit of the arena. While this doesn’t seem too necessary in these instances, players’ orientation is often confused when leaving nonlinear spaces in which they were dedicating their attention to the action rather than the environment. These help players getting their bearings again. And now that doors are used in combat spaces - wide open not to collide with players or NPCs fighting - , they’re also textured in strong warm colors to be seen better. Doors in exploration spaces in this game never bear these colors.
      For this third and final tutorial combat (once again, magical game design number 3 shows up), Tess stops helping in any way other than shooting if the combat gets to that but a new mechanic is presented that offsets Tess. Joel can now pick up objects to create a diversion, essentially what Tess was doing before although she can’t be seen by NPCs. That’s a great way to progressively increase difficulty while not changing enemy type (all humans). The distance between the safe area players start in and the first threat is made longer to increase difficulty too and the same background info is given by NPCs to locate them with the help of the conveniently placed window. The orientation of the starting piece of cover also indicates the sense of direction of the upcoming fight, and where the exit will be located.
    A sign of a space specifically designed for a fight is to open up multiple entry points to each zone. Here this staircase lost its railings to allow players to go over to the second floor. A simpler exploration area would most likely not have this, and in some cases would have been worse for it if it did as player exposition requires certain camera shots. Here the game moves away from being purely about exploration and makes players evolve on a two-floor loop, gated to a coop move with Tess. Many fights in this game are optional, but this isn’t one of them and the space reflects it.
    As a final reward to completing all combat tutorials, Joel is rewarded with finding his very first shiv, while still inside the combat space. The shiv, much like the first aid kit tutorial (see part 2) is forced to the player as its effect is as straightforward as its game mechanics are complex (upgrades, use). Here the elevation, on top of increasing the difficulty of the fight, also serves to create side exploration spaces. Notice the color of the handrails that add a lot of depth to this scene and help players focus on one of the purposes of this tutorial: elevation.
          The final combat is the fourth human encounter, second unassisted combat, and first active choice on the part of the player between “stealth” and “action”. This choice is actually shown on screen and justified by Tess’s dialogue. This fight is simply a summary, taken to the next scale, of every theme explored in combat tutorials seen this far: navigation, object interaction, enemies visibility cone, player noise and elevation (or lack thereof in this case). The choice of color palette reinforces these options, with the cold colors used on the left for a stealthier approach, and the warm yellow tones used with the sun on the right hand side to show danger and action. The right hand side approach also contains more immediate rewards (weapons) for having been bolder.
          Robert being another human, there was no reason to turn him into a boss. But as Naughty Dog also needed to carry the scenario forward, it made sense to turn this fight into a chase sequence. For the same reason as Joel and Sarah move away from Joel’s office in the prologue, here the chase sequence allows to introduce Marlene much more dynamically and not have her simply appear in the middle of the previous combat space. That latter solution can usually be seen with less important characters, usually from the same faction, as waves of reinforcement.
    The calm before the storm This marks the end of the tutorial section of the intro levels. A few more mechanics will be introduced all along the game (enemies, weapons, upgrades) but the vast majority of the systems has already been presented by now. The bigger the challenge, the bigger the spoils: right after the cinematic ends, Joel is presented with both bandings and blades – the resources needed to create shivs - in two distinct locations separated by the first vista in the game, itself to be considered a narrative reward for having completed the first chapter, as well as an introduction of the destination ahead.
        As Joel progresses through to Ellie, and the tutorials are now all gone, combat spaces become larger, with much longer lines of sight, introducing the many challenges ahead and giving the game its true scale. The next "co-op" take down between Joel and Marlene pushes this type of gameplay another step further by hiding one of the two enemies to kill inside the building, which shows that the gameplay itself will also take place over longer distances, not just the locations.
        Another sign of the hands free design for the rest of the game, the first puzzle players encounter shows no hints at all. After another dialogue corridor designed to present Joel and Ellie’s early relationship, Tess joins them again and the adventure starts. Have fun with the rest of the game!
          Thank you for reading this detailed level design analysis of the intro section of The Last of Us. For any additional question, or to discuss this further, feel free to contact me through LinkedIn.
    This is the third article in a three-part series. Part One / Part Two / Part Three
  9. Like
    Furyo got a reaction from Sprony for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  10. Like
    Furyo got a reaction from TheOnlyDoubleF for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  11. Like
    Furyo got a reaction from SuperDuperYeah for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  12. Like
    Furyo got a reaction from LATTEH for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  13. Like
    Furyo got a reaction from ianskate for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  14. Like
    Furyo got a reaction from ianskate for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  15. Like
    Furyo got a reaction from Pampers for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  16. Like
    Furyo got a reaction from Thrik for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  17. Like
    Furyo got a reaction from Deathy for an article, Level Design in The Last of Us: Part Two   
    This is the second article in a three-part series. Part One / Part Two / Part Three
    First Level The intro cinematic here serves two purposes: Introducing Tess and her relationship with Joel, and giving players a goal for the upcoming level. With that done, it’s not necessary to give players other intermediate goals along the way.
    Follow Mission Following an NPC is an excellent, tried and true means to expose players to a completely new world to discover. Tess plays the role of a learning tool, and it’s precisely once players have learned enough about survival in the game that she dies and leaves room for the new relationship between Ellie and Joel to grow. This is an absolute classic process - death aside - used in a great many third person games from Uncharted to Prince of Persia, Enslaved and many others. FPS games also use this technique, but to a lesser degree as following an NPC in first person is often a much more arduous task. Half-Life 2 famously used Alix Vance that way, mostly in non-combat spaces. More recently, BioShock Infinite also followed the same model but made the entire game about that NPC.
    Once outside, players are immediately presented with a good combination of narrative and level design. Tess mentions the curfew that will hit in a few hours, while in the same frame, players can see once again in yellow, the sign that mentions the curfew hours. Attention to small details like that is what will make an entire world more believable. The use of red and white bricks for these buildings adds contrast and depth to this scene, and with Tess going around the corner, helps imagining the path forward.
      Messages painted across walls is as fundamental a narrative design technique as any, but great games will make use of them sparingly, and at the very least won’t reuse the same message more than once per section, so as not to destroy the immersion they’re designed to create. It’s the same thing for talking NPCs, designed for very specific situations, so their speech doesn’t get repeated.
      During this entire level Tess keeps waiting for the player by staying idle on a few of the nodes on her scripted path. This is of course so she can keep being the player’s guide. Notice here however that the implementation of that system is just the bare minimum expected in today’s games. In reality, follow missions are few and far between in this game, as NPCs usually trail behind the player in non-scripted ways. In a game where the NPC is as essential as BioShock Infinite, Elizabeth would have stopped her scripted movement, retraced back her steps to the player (or been teleported behind him) only to resume her script from there. This is a good example of the limitations borne from early creative decisions that dictate the systems developed for the game. It’s entirely normal, but something to be conscious of when creating levels.
    Following on to the main street, where a scripted camera takes over and introduces the new playable zone. This sort of introduction is a dead giveaway of a Naughty Dog game, and is most useful in locking the player in place while the army vehicle passes left, preventing the player from reaching the far end gate and exiting the playable area. With the camera locked in this way, the vehicle may very well simply disappear once passed.
    Arriving in a large area is often a good occasion to introduce more exposition scenes, and in this case two well-constructed ones. Right in front of the player as he arrives, the first scene presents survivors waiting for their weekly ration in a line, behind fences. The fences here work great with the theme of a post-apocalyptic world, but the wall they form is absolutely necessary in scenes like this to limit player interaction and bugs. We find the exact same use of containment barriers in the scene that follows, with the extra touch of the military personnel pushing then killing Joel if players venture too far. Inside closed spaces, most games generally use windows, which we’ll see in The Last of Us later.
        The arrival at the checkpoint is a textbook example of how to center player attention with a dynamic element. On this crossroad, the first semi open area in the game, players may very well be tempted to go either way, but the arrival of the armored vehicle against the player’s direction, the closure of the gates, Tess's placement near the checkpoint and the yellow sign above all point the player effortlessly to the left instead. Naughty Dog manages to seemingly open the game much wider, while remaining in a narrow exposition corridor.
    Another textbook example, and a difficult one to achieve, the quick return tutorial. The narrative scene that introduces it is meaningful as it introduces the Fireflies for the first time in the game, but it also pits the player right against a fence in a position of danger. Just like in the combat tutorial, the necessity to move away from this fight makes it ok to block player controls and require a specific command. Players rarely question this.
    As a side note, some of you will have noticed that the main street had not been gated yet in the game, and Naughty Dog made sure it was by adding this little scene of police blocking the street.
        When addressing player accessibility and teaching, it's important to make the distinction between the two learning models players can be separated in. The first type, Explorative Exposition, describes players who learn by doing; while the second type Experimentation Exposition describes players who by fear of failing expect to have a maximum amount of information given to them before they try. Designing tutorials for these two types of players is very hard, since their learning methods are diametrically opposed.
    Naughty Dog chose here to address both types by designing tutorials for either type and alternate between them. The more complex tutorials, those that either require a huge amount of information given, like weapons for instance (see The Shiv in part 3) or would demand a very expensive and convoluted setting (like this health kit) are designed for the second type of players, stopping the game and giving them everything they need to know before experimenting. The intention of showing the time it takes to heal is well convened here. And to make sure the player actually sees this most important item, Tess gives it away instead of having it placed on a nearby table. Perfect introduction of the mechanic and it reinforces their relationship as no one else would ever have given this for free to Joel.
    As much as accessibility is often separated in three stages (exposition as seen above, validation and challenge), players often find these cobbled together. The second stage for instance is largely unnecessary when designing for a core audience that is already very used to these game mechanics and gamepad controls.
    Follow a few textbook examples of light placement inside this exposition corridor, with inviting diffused lighting that propel Joel forward. At the end of this sequence, we find the first of many trademark moves by Naughty Dog when Joel jumps down a hole. This kind of transition keeps showing up in Naughty Dog almost invariably to transition into a cinematic mid jump (we’ll see that later in the second combat) or to be used as a loading screen to the next level. It also helps segmenting big levels into smaller pieces where NPCs won’t travel large distances back and forth, limiting bugs.
        On the other end of that tunnel comes the first introduction of the “vault over” move, which will be reintroduced at a later point as well. All move tutorials in Naughty Dog games are introduced a number of times in slightly different combinations so players learn by doing more than once. It’s rare enough in games to notice how good they got at it; in reality this entire level is a mixed sequence of tutorials.
        Immediately after this “vault over” move, Joel is presented with his first “safe zone” to pick up his weapons. In the rest of the game, this workbench will allow him to upgrade his weapons. The more interesting part is the left hand side “boost and pull” move, which uses very strong warm colors. Once again the use of the yellow signifies interactivity/where to go. All third person games like Tomb Raider, Uncharted, Prince of Persia, etc. use specific colors on their palette to orient the player, particularly at the start of a platforming sequence. The move itself is gated to players having picked Joel’s backpack on the workbench, and the combination of both tutorials in the same room is not by chance, it’s the only move in Joel’s arsenal that can be disabled given it uses a prop and an NPC.
    We’ve already seen “jumping in a black hole” as a gate, and lifting this door here is just another example of subtle gating mechanisms used to unload the previous part of a level and load the rest dynamically, so as not to require loading screens, or the strict minimum. It’s now so standard that we’ll soon forget it’s a rather recent addition to the arsenal of level designers, created when dynamic loading became possible with PCs and consoles becoming more powerful.
    This leads us into the first puzzle space in the game. Notice the multiple ways to leave this interior space, including the first crouch position to the right. We’ll see the move introduced on the critical path afterwards, but it’s not unusual for Naughty Dog to include such moves before their tutorials are introduced. A few hints give us the direction the player should head in. First the busted up ground is a good tool to shape the ground in the general direction of the gameplay, and make the space visually more interesting (less flat) and more interactive with the player needing to repeat the “vault over” move to get out. Another tool is the direction the crows fly in when leaving the hood of the car. Finally, the red bricks and vines uniformly applied everywhere is a giveaway that the exit is not necessarily straight forward.
    Notice the rug over the destroyed wall, accenting the solution to this first puzzle. This tutorial is a great example of puzzle design, where the problem needs to be presented front and center, so that the discovery of the solution leads to a minimal amount of attempts once found. Portal is the most recent game to have perfectly followed that credo. Of course, this is here simplified to its core essence, but the same principle follows in the rest of the "ladder-based" puzzles. A sign that you have a great game mechanic on your hands is the ability to design variants of the same puzzle throughout the entire game. It means it's a deep enough mechanic, and not a gimmick.
    After picking up the ladder, Joel enters the very first exploration space where he will be able to pick up game resources. Seen as this type of loot is what the entire game economy is based on, it makes sense to present them exactly in the opposite way to the narrative elements of the rest of the intro. Meaning shrouded in darkness when important narrative beats were placed in brightly lit areas. The lighting in this area is worked so the cabinets are mysterious, so that adventurous players learn this classic challenge-reward combination.
    After reaching there and turning around, players can then notice glimmering the very first Firefly Pendant located in the room beyond, with a nice Firefly symbol placed on the wall as a final hint. The placement of that desk in this room is studied to allow that to happen. You can safely assume that this is the easiest of all Firefly Pendants. Having presented the first resources and the first collectible separately is a good move to make sure players understand their different role.
        Jumping down (once again, a gate), Joel enters the first spore-infected area in the game. Tess is once again used as justification, by stopping Joel and putting her mask on. Players immediately understand the nature of the threat and that they won’t ever have to put the mask on themselves. The change in lighting and visibility also preface the incoming danger, immediately shown in a safe situation moments after hitting the spores. The relationship between the spores and dead body are made perfectly clear, and this example of narrative design through environment art is perfectly paced.
        Just like the doors to Joel’s office in the prologue, here is a great example of using interactive objects to place the character in a specific situation and justify the camera transition to a cinematic. The plank, with its forced interaction, is only here to make players notice you can go through the door by squeezing through. In fact, even the dialogue is designed with that n mind. Once in this position, the camera is entirely scripted. One should always expect a narrative element on the other side of that type of sequence, particularly when entering a brand new space. Using this type of contrived cinematic moves has become a main fixture in Sony titles, noticeably in God of War and Uncharted, and in competing titles such as Tomb Raider. BioShock actually was one of the early titles that always tried to justify camera placements. These sequences also sometimes serve to limit the speed of movement of the player, particularly to help loading times in and out of expensive areas. But there are sometimes ways to include these delays in gameplay itself. For instance some of Elizabeth’s lockpick animations were gated to the loading of the area beyond the gate she had to open. In these cases, conversations between her and Booker would also be timed to the necessary delay.
      Once clearing this filing cabinet, a perfect camera takeover to introduce the shooting tutorial. A conveniently placed hurt human (still target) offers the chance for a quick headshot if camera is left untouched. Nearby the ammunition pickup ends this gameplay loop and makes most players come out on top ammo wise. It also offers the game’s first active choice, as are all combats in this game (choice of resources and sometimes tactics). Notice right after this encounter the use of dialogue to justify the next camera takeover and introduce the first combat against infected. The piece of wood falls down just as Tess speaks up, while Joel indicates the need to remain silent. It’s as dynamic an introduction as one can make it and flows superbly.
      Please notice the placement of these infected. Them being tutorials, it’s only logical that they are as scripted as they are. The first one plays to the stealth nature of the combat, reinforced by the action and placement of the two other infected. As you can see above on the first floor, they actually are a landmark for players to orient themselves. Most landmarks are used as large objects in the background of a scene, for instance Half-Life 2’s citadel in City 17’s skyline, and in the case of The Last of Us, the hospital Joel and Ellie reach towards the end of the game plays exactly that role, but in tight corridors and encounters, level designers can reverse engineer an NPC as the landmark, and plan their geometry around. In this case carving up the floor just so the infected can be seen below. Near this location, on the bottom floor and the top floor, two exploration spaces that make good use of this gameplay loop (challenge-reward) offering loot just after clearing the combat.
    Once again outside, this seemingly uninteresting transition area between the combat tutorial and the upcoming puzzle is made interesting by the basketball hoop that provides a clear sense of direction to the immediate space, and the busted up concrete perpendicular to the court adds a layer of depth to an otherwise flat surface. Notice once again the color yellow used in Mel’s Home Hardware store sign, and its placement over the exit.
    Next up is the second "ladder-based" puzzle space that follows the basic rules of great puzzle design. First the exit is presented to the player in the same frame as the problem, and the solution once found (“aha! moment”) only takes one try to complete. Notice how the blue tarp provides a good visual clue in this tutorial as to where the solution is, just like the rug in the first case.
    Leaving the puzzle area that shows that the best game mechanics can be used in multiple variations, the same yellow color is brought by lighting through the window. Around the corner, a little reminder about exploration, with a health pickup dropped on the far end of the ladder.
      Down yet another gate and Joel now follows Tess through a back alley. This otherwise uneventful place sees the addition of yet another reminder of the “vault over” tutorial, as another way to require a button press from the player and keep him/her engaged. This however no longer requires the UI indication on screen.
    Just around the corner lies the second Firefly Pendant. “Hidden in plain sight” is a good way to introduce a second collectible, after having given the first one essentially for free. This one perched in the trees, and the puzzle before it tease the elevation changes of gameplay taught in the subsequent combats. You’ll notice the LD work that went in creating the blockage under which Joel must crawl, which reveals through its branches the glimmering Firefly Pendant.
    Forcing the player to continue through a building serves multiple purposes. The first, and smallest is it helps justify the placement of gun ammo on the table, as opposed to having it just lying there on the streets. The second, the door that Joel closes behind him, is yet another gate for the upcoming NPC – heavy survivors camp, which can even be loaded during the third and final purpose, introducing a small child in a narrative sequence with Tess. These windows here give just the right amount of light in and allow the heavy contrast between the two areas to have the animation read a lot better. This room could have been there simply for optimization purposes, but Naughty Dog managed to turn it into a whole lot more.
       The survivors’ camp is another gameplay loop closing in on itself. After the initial exploration and learning came the tension of the spores and the challenges of the first fight and puzzle, the camp is a narrative reward for having made it this far, and a chance to pick up another two collectibles. However as it’s not the end goal of the level, tension should still be a constant theme, hence the more and more violent scenes one after the other, that also introduce the upcoming fight with humans. Notice the little girl playing with her stuffed bear in the far corner. She and the little boy earlier are nice ways to feature children in action games where rules dictate that no human child should ever be killed on screen. Emphasis on human; children that do get hurt are often already dead, possessed or otherwise sick (School bus in Prey, Little Sisters in BioShock, etc.)
            This is the second article in a three-part series. Part One / Part Two / Part Three
  18. Like
    Furyo got a reaction from Thrik for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  19. Like
    Furyo got a reaction from LATTEH for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  20. Like
    Furyo got a reaction from FMPONE for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  21. Like
    Furyo got a reaction from D3ads for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  22. Like
    Furyo got a reaction from SotaPoika for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  23. Like
    Furyo got a reaction from Sprony for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  24. Like
    Furyo got a reaction from Deathy for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
  25. Like
    Furyo got a reaction from fKd for an article, Level Design in The Last of Us: Part One   
    This is the first article in a three-part series. Part One / Part Two / Part Three
    Intro Level 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.
    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.
    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.
      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.
    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.
    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.
    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.
    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 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.
    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.
    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.
    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.
    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.
    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.
    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.
        This is the first article in a three-part series. Part One / Part Two / Part Three
×
×
  • Create New...