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