0:00:16.340,0:00:22.840 Hi, this is Mark Brown with Game Maker's Toolkit,[br]a series on video game design. 0:00:22.840,0:00:27.060 Near the beginning of Uncharted 3, there's[br]this awesome section where you're playing 0:00:27.060,0:00:32.540 as a young Nathan Drake and you're being chased[br]across the rooftops of Colombia. It's awesome, 0:00:32.540,0:00:36.570 specifically, because in most other games[br]it would simply be a cutscene. 0:00:36.570,0:00:40.080 That's because most game developers would[br]struggle to make sure the player is always 0:00:40.080,0:00:44.510 going the right way and making the right jumps[br]- and not repeatedly falling off the roof 0:00:44.510,0:00:46.210 or getting caught by baddies. 0:00:46.210,0:00:50.140 In fact, most developers struggle to let you[br]move through a static environment, let alone 0:00:50.140,0:00:55.320 an intense chase scene, without some clunky[br]navigational tool - be it a waypoint, a compass, 0:00:55.320,0:01:01.580 a floating arrow, some kind of supernatural[br]survivor's vision, or an ethereal space snake thing. 0:01:02.300,0:01:06.350 So how does Naughty Dog do it? How does this[br]developer let you make your way through the 0:01:06.350,0:01:11.080 whole of Uncharted, and The Last of Us, without[br]a map, when other equally linear games tell 0:01:11.080,0:01:13.310 you where to go, at every step of the way? 0:01:13.310,0:01:17.399 MONKEY: We're not in the clear yet. There's the way[br]out. 0:01:17.399,0:01:22.090 The secret is that Naughty Dog, and other[br]developers like Valve and That Game Company, 0:01:22.090,0:01:26.500 is telling you exactly where to go, but using[br]subconscious clues that are hidden in the 0:01:26.500,0:01:27.490 level design itself. 0:01:27.490,0:01:32.840 They use tricks to grab your attention and[br]guide your eye, which are borrowed from artistic 0:01:32.840,0:01:38.369 composition. And they use in-world navigational[br]aids, which are lifted from Disneyworld. 0:01:39.220,0:01:44.660 "It’s very much a game in psychology," says[br]Emilia Schatz, game designer at Naughty Dog. 0:01:44.660,0:01:47.760 "You need to figure out what your environment is telling the player" 0:01:47.760,0:01:51.460 "And figure out how you can give the player as much information as possible" 0:01:51.539,0:01:55.429 So let's look at that Uncharted chase scene[br]again, and see if we can figure out what the 0:01:55.429,0:01:58.630 environment is telling the player here. 0:01:58.630,0:02:04.099 The first eye-catching technique is light,[br]which is streaming in through this open window. 0:02:04.099,0:02:08.840 Light is the most common and arguably effective[br]way of guiding the player, because we flock 0:02:08.840,0:02:14.110 to it like moths to a flame. Provided the[br]surrounding area is dark enough, light sources 0:02:14.110,0:02:20.569 like lamps, car headlights, flames, and sunlight[br]will always catch the player's attention. 0:02:20.569,0:02:25.790 Here, visual composition tricks are used.[br]The pillars and wall create a frame - which 0:02:25.790,0:02:30.159 is like a portal that draws that player's[br]eye to whatever is inside. And in the middle 0:02:30.159,0:02:33.719 is this line which runs down the centre of[br]the roof. 0:02:33.719,0:02:38.079 Guiding lines are often used in painting and[br]photography to lead the viewer's eye or focus 0:02:38.079,0:02:42.709 their vision on a specific point. That's harder[br]for level designers to use as there's no fixed 0:02:42.709,0:02:46.750 viewpoint, but similar techniques can be used[br]to suggest a path for a player. 0:02:46.750,0:02:52.769 In a 2010 GDC talk, Naughty Dog art director[br]Erick Pangilinan says "defining a clear path 0:02:52.769,0:02:57.030 is really important and is something we look[br]at all the time," and he says "When you're 0:02:57.030,0:03:00.879 in a busy schedule it's really easy to create[br]noisy, confusing environments". 0:03:00.879,0:03:05.799 So he talks about clearly separating the ground[br]and the boundaries of the level, and says 0:03:05.799,0:03:09.760 "putting shapes in the middle of the path[br]creates a stepping stone effect that can lead 0:03:09.760,0:03:12.099 the eye through". 0:03:12.099,0:03:16.819 When Drake leaps over the barrier, these birds[br]fly off. This gives us motion which, in a 0:03:16.819,0:03:22.400 mostly static scene, really grabs your attention.[br]Things like sparks, flashing lights, and banging 0:03:22.400,0:03:27.170 doors are hard to ignore, and encourage the[br]player to draw in closer. 0:03:27.170,0:03:31.090 The birds in Uncharted not only do that, but[br]they fly off in the direction of where Drake 0:03:31.090,0:03:35.219 needs to go next, subtly guiding you to the[br]right when the more obvious route is to continue 0:03:35.219,0:03:36.040 along the roof. 0:03:36.040,0:03:40.019 Of course, the enemy here will force you to[br]the right if you weren't already going that 0:03:40.019,0:03:44.249 way. Rules and mechanics can push and pull[br]the player very effectively - as you'll run 0:03:44.249,0:03:48.040 away from enemies you can't attack, but will[br]chase down collectibles like they're a trail 0:03:48.040,0:03:49.709 of bread crumbs. 0:03:49.709,0:03:54.439 Down here, we see an example of affordance[br]in level design. A ramp is there to be jumped 0:03:54.439,0:03:57.310 off, and the player will dutifully play along. 0:03:57.310,0:04:02.269 You can't discount the camera during this[br]entire section, of course. It swings around, 0:04:02.269,0:04:06.060 keeping your next destination in the centre[br]of the frame. But you're always free to wiggle 0:04:06.060,0:04:11.549 it about and look wherever you please - the[br]game rarely takes control away from you entirely. 0:04:11.549,0:04:17.030 Now the guiding lines point up, except for[br]these windowsills. The contrast in directionality 0:04:17.030,0:04:22.109 makes them stand out - not to mention their[br]colour. This is another common trick in level 0:04:22.109,0:04:26.120 design - as long as the colours in the rest[br]of the stage are carefully considered, a bright 0:04:26.120,0:04:29.280 and contrasting colour can really grab your[br]attention. 0:04:29.280,0:04:35.199 Mirror's Edge famously uses red, but The Last[br]of Us and Uncharted do the exact same thing 0:04:35.199,0:04:39.449 with yellow. And Tomb Raider paints all its[br]important elements in white. 0:04:39.449,0:04:44.190 All of these tricks are used to subtly nudge[br]you through the section and keep you on the 0:04:44.190,0:04:49.030 carefully scripted path that Naughty Dog has[br]laid out. But it doesn't stop there, as similar 0:04:49.030,0:04:52.000 visual clues are littered throughout the entire[br]game. 0:04:52.000,0:04:56.280 There are other tricks, too. Like negative[br]space, which forms an attractive portal. And 0:04:56.280,0:05:00.599 audio can be used, too - everyone goes into[br]this room at the start of The Last of Us, 0:05:00.599,0:05:07.060 not just because of the alluring light but[br]because of the distant sound of the TV speakers. 0:05:09.080,0:05:12.660 SARAH: You in here? 0:05:12.669,0:05:17.289 And then there are weenies. That's right,[br]weenies. This is a technique from Walt Disney, 0:05:17.289,0:05:21.139 who plopped the giant castle in the centre[br]of Disneyland to lure visitors into the 0:05:21.139,0:05:25.220 centre as soon as they enter the gates, and[br]give them a navigational aid so they're always 0:05:25.220,0:05:27.440 be able to return to the middle of the park. 0:05:27.440,0:05:32.190 So, characters in Uncharted and The Last of[br]Us spend half the game pointing at far-off 0:05:32.190,0:05:36.080 landmarks which then loom over the skyline[br]and give you something to work towards and 0:05:36.080,0:05:37.979 a static position to aid navigation. 0:05:37.979,0:05:40.979 BILL: There's that truck.[br]ELENA: You see that tower up ahead? 0:05:40.979,0:05:45.099 TESS: There she is. That's our building.[br]HARRY: There's the tower. 0:05:45.099,0:05:49.479 JOEL: Alright, there's the bridge. That's our way[br]out of here. 0:05:49.479,0:05:53.729 The same applies to the Citadel in Half Life[br]2, buildings in Mirror's Edge, and the mountain 0:05:53.729,0:05:55.449 in Journey. 0:05:55.449,0:06:00.560 And then there are arrows. Sometimes hidden[br]in the game world as props or as markings, 0:06:00.560,0:06:04.389 and sometimes literal arrows, on signs and[br]painted on the ground that point you in the 0:06:04.389,0:06:08.970 right direction. Hey, that's what arrows are[br]there for, right? 0:06:08.970,0:06:13.199 You can use all of these examples in your[br]designs. Even if it's just using light and 0:06:13.199,0:06:17.599 colour to highlight places of interactivity.[br]You'll need to test that it all works by observing 0:06:17.599,0:06:21.349 random players as they move through your level,[br]but you can also borrow a clever trick from 0:06:21.349,0:06:22.490 Naughty Dog. 0:06:22.490,0:06:26.229 Back when it was making Crash Bandicoot it[br]would do something called the squint test, 0:06:26.229,0:06:30.300 where level designers would squint their eye[br]and see if the critical path through the level 0:06:30.300,0:06:33.550 was the most dominant thing in each scene. 0:06:33.550,0:06:37.740 You may be wondering why a game like Crash[br]Bandicoot or Uncharted needs to bother with 0:06:37.740,0:06:41.520 all this, when they're already so linear.[br]And it's true: if you're not going down the 0:06:41.520,0:06:45.080 critical path in these games, you'll often[br]find yourself at a dead end. 0:06:45.080,0:06:49.620 But that's kind of the point. The game provides[br]multiple paths for the player, and they feel 0:06:49.620,0:06:53.979 like they have the freedom to explore whichever[br]they choose. As they always seem to stumble 0:06:53.979,0:06:58.090 upon new content - not entirely aware that[br]they were subconsciously persuaded to take 0:06:58.090,0:07:02.770 that path or enter that door - it stands to[br]reason that all the other exits and doors 0:07:02.770,0:07:04.580 lead to new play spaces too. 0:07:04.580,0:07:08.300 It makes the world feel bigger and less linear[br]than it really is. 0:07:08.300,0:07:12.650 It also helps keep up the pace of the game.[br]Uncharted is supposed to be a rip-roaring 0:07:12.650,0:07:16.630 adventure, and that would fall apart if you[br]were struggling to find the next door in every room. 0:07:17.880,0:07:22.639 And, crucially, this stuff just works. And[br]you can test it for yourself: play Mirror's 0:07:22.639,0:07:26.780 Edge and turn off runner's vision and you'll[br]see how difficult it is to get through the 0:07:26.780,0:07:31.169 game without these visual clues. If you're[br]anything like me you'll get lost over and 0:07:31.169,0:07:33.550 over and over again. 0:07:33.550,0:07:39.319 And finally, knowing how to use these tricks[br]will help other aspects of your level design 0:07:39.319,0:07:43.530 too as they can be used for more than just[br]navigation. Picking the right colour for your 0:07:43.530,0:07:48.879 level doesn't just help you highlight platforms,[br]but also set the right tone. Motion can be 0:07:48.879,0:07:51.379 used to make sure the player is looking in[br]the right direction. 0:07:54.060,0:07:58.480 And frames in the level design ensure the player gets the best viewpoint for an important scene. 0:07:58.490,0:08:03.310 But maybe we'll come back to all that in another[br]video. Till then, thanks for watching. 0:08:04.940,0:08:09.580 Have you ever seen a game that does something[br]smart with navigation? Leave a comment below. 0:08:09.580,0:08:14.449 Also, give the video a like, subscribe to[br]the channel, or consider pitching in via Patreon.