[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:16.34,0:00:22.84,Default,,0000,0000,0000,,Hi, this is Mark Brown with Game Maker's Toolkit,\Na series on video game design. Dialogue: 0,0:00:22.84,0:00:27.06,Default,,0000,0000,0000,,Near the beginning of Uncharted 3, there's\Nthis awesome section where you're playing Dialogue: 0,0:00:27.06,0:00:32.54,Default,,0000,0000,0000,,as a young Nathan Drake and you're being chased\Nacross the rooftops of Colombia. It's awesome, Dialogue: 0,0:00:32.54,0:00:36.57,Default,,0000,0000,0000,,specifically, because in most other games\Nit would simply be a cutscene. Dialogue: 0,0:00:36.57,0:00:40.08,Default,,0000,0000,0000,,That's because most game developers would\Nstruggle to make sure the player is always Dialogue: 0,0:00:40.08,0:00:44.51,Default,,0000,0000,0000,,going the right way and making the right jumps\N- and not repeatedly falling off the roof Dialogue: 0,0:00:44.51,0:00:46.21,Default,,0000,0000,0000,,or getting caught by baddies. Dialogue: 0,0:00:46.21,0:00:50.14,Default,,0000,0000,0000,,In fact, most developers struggle to let you\Nmove through a static environment, let alone Dialogue: 0,0:00:50.14,0:00:55.32,Default,,0000,0000,0000,,an intense chase scene, without some clunky\Nnavigational tool - be it a waypoint, a compass, Dialogue: 0,0:00:55.32,0:01:01.58,Default,,0000,0000,0000,,a floating arrow, some kind of supernatural\Nsurvivor's vision, or an ethereal space snake thing. Dialogue: 0,0:01:02.30,0:01:06.35,Default,,0000,0000,0000,,So how does Naughty Dog do it? How does this\Ndeveloper let you make your way through the Dialogue: 0,0:01:06.35,0:01:11.08,Default,,0000,0000,0000,,whole of Uncharted, and The Last of Us, without\Na map, when other equally linear games tell Dialogue: 0,0:01:11.08,0:01:13.31,Default,,0000,0000,0000,,you where to go, at every step of the way? Dialogue: 0,0:01:13.31,0:01:17.40,Default,,0000,0000,0000,,MONKEY: We're not in the clear yet. There's the way\Nout. Dialogue: 0,0:01:17.40,0:01:22.09,Default,,0000,0000,0000,,The secret is that Naughty Dog, and other\Ndevelopers like Valve and That Game Company, Dialogue: 0,0:01:22.09,0:01:26.50,Default,,0000,0000,0000,,is telling you exactly where to go, but using\Nsubconscious clues that are hidden in the Dialogue: 0,0:01:26.50,0:01:27.49,Default,,0000,0000,0000,,level design itself. Dialogue: 0,0:01:27.49,0:01:32.84,Default,,0000,0000,0000,,They use tricks to grab your attention and\Nguide your eye, which are borrowed from artistic Dialogue: 0,0:01:32.84,0:01:38.37,Default,,0000,0000,0000,,composition. And they use in-world navigational\Naids, which are lifted from Disneyworld. Dialogue: 0,0:01:39.22,0:01:44.66,Default,,0000,0000,0000,,"It’s very much a game in psychology," says\NEmilia Schatz, game designer at Naughty Dog. Dialogue: 0,0:01:44.66,0:01:47.76,Default,,0000,0000,0000,,"You need to figure out what your environment is telling the player" Dialogue: 0,0:01:47.76,0:01:51.46,Default,,0000,0000,0000,,"And figure out how you can give the player as much information as possible" Dialogue: 0,0:01:51.54,0:01:55.43,Default,,0000,0000,0000,,So let's look at that Uncharted chase scene\Nagain, and see if we can figure out what the Dialogue: 0,0:01:55.43,0:01:58.63,Default,,0000,0000,0000,,environment is telling the player here. Dialogue: 0,0:01:58.63,0:02:04.10,Default,,0000,0000,0000,,The first eye-catching technique is light,\Nwhich is streaming in through this open window. Dialogue: 0,0:02:04.10,0:02:08.84,Default,,0000,0000,0000,,Light is the most common and arguably effective\Nway of guiding the player, because we flock Dialogue: 0,0:02:08.84,0:02:14.11,Default,,0000,0000,0000,,to it like moths to a flame. Provided the\Nsurrounding area is dark enough, light sources Dialogue: 0,0:02:14.11,0:02:20.57,Default,,0000,0000,0000,,like lamps, car headlights, flames, and sunlight\Nwill always catch the player's attention. Dialogue: 0,0:02:20.57,0:02:25.79,Default,,0000,0000,0000,,Here, visual composition tricks are used.\NThe pillars and wall create a frame - which Dialogue: 0,0:02:25.79,0:02:30.16,Default,,0000,0000,0000,,is like a portal that draws that player's\Neye to whatever is inside. And in the middle Dialogue: 0,0:02:30.16,0:02:33.72,Default,,0000,0000,0000,,is this line which runs down the centre of\Nthe roof. Dialogue: 0,0:02:33.72,0:02:38.08,Default,,0000,0000,0000,,Guiding lines are often used in painting and\Nphotography to lead the viewer's eye or focus Dialogue: 0,0:02:38.08,0:02:42.71,Default,,0000,0000,0000,,their vision on a specific point. That's harder\Nfor level designers to use as there's no fixed Dialogue: 0,0:02:42.71,0:02:46.75,Default,,0000,0000,0000,,viewpoint, but similar techniques can be used\Nto suggest a path for a player. Dialogue: 0,0:02:46.75,0:02:52.77,Default,,0000,0000,0000,,In a 2010 GDC talk, Naughty Dog art director\NErick Pangilinan says "defining a clear path Dialogue: 0,0:02:52.77,0:02:57.03,Default,,0000,0000,0000,,is really important and is something we look\Nat all the time," and he says "When you're Dialogue: 0,0:02:57.03,0:03:00.88,Default,,0000,0000,0000,,in a busy schedule it's really easy to create\Nnoisy, confusing environments". Dialogue: 0,0:03:00.88,0:03:05.80,Default,,0000,0000,0000,,So he talks about clearly separating the ground\Nand the boundaries of the level, and says Dialogue: 0,0:03:05.80,0:03:09.76,Default,,0000,0000,0000,,"putting shapes in the middle of the path\Ncreates a stepping stone effect that can lead Dialogue: 0,0:03:09.76,0:03:12.10,Default,,0000,0000,0000,,the eye through". Dialogue: 0,0:03:12.10,0:03:16.82,Default,,0000,0000,0000,,When Drake leaps over the barrier, these birds\Nfly off. This gives us motion which, in a Dialogue: 0,0:03:16.82,0:03:22.40,Default,,0000,0000,0000,,mostly static scene, really grabs your attention.\NThings like sparks, flashing lights, and banging Dialogue: 0,0:03:22.40,0:03:27.17,Default,,0000,0000,0000,,doors are hard to ignore, and encourage the\Nplayer to draw in closer. Dialogue: 0,0:03:27.17,0:03:31.09,Default,,0000,0000,0000,,The birds in Uncharted not only do that, but\Nthey fly off in the direction of where Drake Dialogue: 0,0:03:31.09,0:03:35.22,Default,,0000,0000,0000,,needs to go next, subtly guiding you to the\Nright when the more obvious route is to continue Dialogue: 0,0:03:35.22,0:03:36.04,Default,,0000,0000,0000,,along the roof. Dialogue: 0,0:03:36.04,0:03:40.02,Default,,0000,0000,0000,,Of course, the enemy here will force you to\Nthe right if you weren't already going that Dialogue: 0,0:03:40.02,0:03:44.25,Default,,0000,0000,0000,,way. Rules and mechanics can push and pull\Nthe player very effectively - as you'll run Dialogue: 0,0:03:44.25,0:03:48.04,Default,,0000,0000,0000,,away from enemies you can't attack, but will\Nchase down collectibles like they're a trail Dialogue: 0,0:03:48.04,0:03:49.71,Default,,0000,0000,0000,,of bread crumbs. Dialogue: 0,0:03:49.71,0:03:54.44,Default,,0000,0000,0000,,Down here, we see an example of affordance\Nin level design. A ramp is there to be jumped Dialogue: 0,0:03:54.44,0:03:57.31,Default,,0000,0000,0000,,off, and the player will dutifully play along. Dialogue: 0,0:03:57.31,0:04:02.27,Default,,0000,0000,0000,,You can't discount the camera during this\Nentire section, of course. It swings around, Dialogue: 0,0:04:02.27,0:04:06.06,Default,,0000,0000,0000,,keeping your next destination in the centre\Nof the frame. But you're always free to wiggle Dialogue: 0,0:04:06.06,0:04:11.55,Default,,0000,0000,0000,,it about and look wherever you please - the\Ngame rarely takes control away from you entirely. Dialogue: 0,0:04:11.55,0:04:17.03,Default,,0000,0000,0000,,Now the guiding lines point up, except for\Nthese windowsills. The contrast in directionality Dialogue: 0,0:04:17.03,0:04:22.11,Default,,0000,0000,0000,,makes them stand out - not to mention their\Ncolour. This is another common trick in level Dialogue: 0,0:04:22.11,0:04:26.12,Default,,0000,0000,0000,,design - as long as the colours in the rest\Nof the stage are carefully considered, a bright Dialogue: 0,0:04:26.12,0:04:29.28,Default,,0000,0000,0000,,and contrasting colour can really grab your\Nattention. Dialogue: 0,0:04:29.28,0:04:35.20,Default,,0000,0000,0000,,Mirror's Edge famously uses red, but The Last\Nof Us and Uncharted do the exact same thing Dialogue: 0,0:04:35.20,0:04:39.45,Default,,0000,0000,0000,,with yellow. And Tomb Raider paints all its\Nimportant elements in white. Dialogue: 0,0:04:39.45,0:04:44.19,Default,,0000,0000,0000,,All of these tricks are used to subtly nudge\Nyou through the section and keep you on the Dialogue: 0,0:04:44.19,0:04:49.03,Default,,0000,0000,0000,,carefully scripted path that Naughty Dog has\Nlaid out. But it doesn't stop there, as similar Dialogue: 0,0:04:49.03,0:04:52.00,Default,,0000,0000,0000,,visual clues are littered throughout the entire\Ngame. Dialogue: 0,0:04:52.00,0:04:56.28,Default,,0000,0000,0000,,There are other tricks, too. Like negative\Nspace, which forms an attractive portal. And Dialogue: 0,0:04:56.28,0:05:00.60,Default,,0000,0000,0000,,audio can be used, too - everyone goes into\Nthis room at the start of The Last of Us, Dialogue: 0,0:05:00.60,0:05:07.06,Default,,0000,0000,0000,,not just because of the alluring light but\Nbecause of the distant sound of the TV speakers. Dialogue: 0,0:05:09.08,0:05:12.66,Default,,0000,0000,0000,,SARAH: You in here? Dialogue: 0,0:05:12.67,0:05:17.29,Default,,0000,0000,0000,,And then there are weenies. That's right,\Nweenies. This is a technique from Walt Disney, Dialogue: 0,0:05:17.29,0:05:21.14,Default,,0000,0000,0000,,who plopped the giant castle in the centre\Nof Disneyland to lure visitors into the Dialogue: 0,0:05:21.14,0:05:25.22,Default,,0000,0000,0000,,centre as soon as they enter the gates, and\Ngive them a navigational aid so they're always Dialogue: 0,0:05:25.22,0:05:27.44,Default,,0000,0000,0000,,be able to return to the middle of the park. Dialogue: 0,0:05:27.44,0:05:32.19,Default,,0000,0000,0000,,So, characters in Uncharted and The Last of\NUs spend half the game pointing at far-off Dialogue: 0,0:05:32.19,0:05:36.08,Default,,0000,0000,0000,,landmarks which then loom over the skyline\Nand give you something to work towards and Dialogue: 0,0:05:36.08,0:05:37.98,Default,,0000,0000,0000,,a static position to aid navigation. Dialogue: 0,0:05:37.98,0:05:40.98,Default,,0000,0000,0000,,BILL: There's that truck.\NELENA: You see that tower up ahead? Dialogue: 0,0:05:40.98,0:05:45.10,Default,,0000,0000,0000,,TESS: There she is. That's our building.\NHARRY: There's the tower. Dialogue: 0,0:05:45.10,0:05:49.48,Default,,0000,0000,0000,,JOEL: Alright, there's the bridge. That's our way\Nout of here. Dialogue: 0,0:05:49.48,0:05:53.73,Default,,0000,0000,0000,,The same applies to the Citadel in Half Life\N2, buildings in Mirror's Edge, and the mountain Dialogue: 0,0:05:53.73,0:05:55.45,Default,,0000,0000,0000,,in Journey. Dialogue: 0,0:05:55.45,0:06:00.56,Default,,0000,0000,0000,,And then there are arrows. Sometimes hidden\Nin the game world as props or as markings, Dialogue: 0,0:06:00.56,0:06:04.39,Default,,0000,0000,0000,,and sometimes literal arrows, on signs and\Npainted on the ground that point you in the Dialogue: 0,0:06:04.39,0:06:08.97,Default,,0000,0000,0000,,right direction. Hey, that's what arrows are\Nthere for, right? Dialogue: 0,0:06:08.97,0:06:13.20,Default,,0000,0000,0000,,You can use all of these examples in your\Ndesigns. Even if it's just using light and Dialogue: 0,0:06:13.20,0:06:17.60,Default,,0000,0000,0000,,colour to highlight places of interactivity.\NYou'll need to test that it all works by observing Dialogue: 0,0:06:17.60,0:06:21.35,Default,,0000,0000,0000,,random players as they move through your level,\Nbut you can also borrow a clever trick from Dialogue: 0,0:06:21.35,0:06:22.49,Default,,0000,0000,0000,,Naughty Dog. Dialogue: 0,0:06:22.49,0:06:26.23,Default,,0000,0000,0000,,Back when it was making Crash Bandicoot it\Nwould do something called the squint test, Dialogue: 0,0:06:26.23,0:06:30.30,Default,,0000,0000,0000,,where level designers would squint their eye\Nand see if the critical path through the level Dialogue: 0,0:06:30.30,0:06:33.55,Default,,0000,0000,0000,,was the most dominant thing in each scene. Dialogue: 0,0:06:33.55,0:06:37.74,Default,,0000,0000,0000,,You may be wondering why a game like Crash\NBandicoot or Uncharted needs to bother with Dialogue: 0,0:06:37.74,0:06:41.52,Default,,0000,0000,0000,,all this, when they're already so linear.\NAnd it's true: if you're not going down the Dialogue: 0,0:06:41.52,0:06:45.08,Default,,0000,0000,0000,,critical path in these games, you'll often\Nfind yourself at a dead end. Dialogue: 0,0:06:45.08,0:06:49.62,Default,,0000,0000,0000,,But that's kind of the point. The game provides\Nmultiple paths for the player, and they feel Dialogue: 0,0:06:49.62,0:06:53.98,Default,,0000,0000,0000,,like they have the freedom to explore whichever\Nthey choose. As they always seem to stumble Dialogue: 0,0:06:53.98,0:06:58.09,Default,,0000,0000,0000,,upon new content - not entirely aware that\Nthey were subconsciously persuaded to take Dialogue: 0,0:06:58.09,0:07:02.77,Default,,0000,0000,0000,,that path or enter that door - it stands to\Nreason that all the other exits and doors Dialogue: 0,0:07:02.77,0:07:04.58,Default,,0000,0000,0000,,lead to new play spaces too. Dialogue: 0,0:07:04.58,0:07:08.30,Default,,0000,0000,0000,,It makes the world feel bigger and less linear\Nthan it really is. Dialogue: 0,0:07:08.30,0:07:12.65,Default,,0000,0000,0000,,It also helps keep up the pace of the game.\NUncharted is supposed to be a rip-roaring Dialogue: 0,0:07:12.65,0:07:16.63,Default,,0000,0000,0000,,adventure, and that would fall apart if you\Nwere struggling to find the next door in every room. Dialogue: 0,0:07:17.88,0:07:22.64,Default,,0000,0000,0000,,And, crucially, this stuff just works. And\Nyou can test it for yourself: play Mirror's Dialogue: 0,0:07:22.64,0:07:26.78,Default,,0000,0000,0000,,Edge and turn off runner's vision and you'll\Nsee how difficult it is to get through the Dialogue: 0,0:07:26.78,0:07:31.17,Default,,0000,0000,0000,,game without these visual clues. If you're\Nanything like me you'll get lost over and Dialogue: 0,0:07:31.17,0:07:33.55,Default,,0000,0000,0000,,over and over again. Dialogue: 0,0:07:33.55,0:07:39.32,Default,,0000,0000,0000,,And finally, knowing how to use these tricks\Nwill help other aspects of your level design Dialogue: 0,0:07:39.32,0:07:43.53,Default,,0000,0000,0000,,too as they can be used for more than just\Nnavigation. Picking the right colour for your Dialogue: 0,0:07:43.53,0:07:48.88,Default,,0000,0000,0000,,level doesn't just help you highlight platforms,\Nbut also set the right tone. Motion can be Dialogue: 0,0:07:48.88,0:07:51.38,Default,,0000,0000,0000,,used to make sure the player is looking in\Nthe right direction. Dialogue: 0,0:07:54.06,0:07:58.48,Default,,0000,0000,0000,,And frames in the level design ensure the player gets the best viewpoint for an important scene. Dialogue: 0,0:07:58.49,0:08:03.31,Default,,0000,0000,0000,,But maybe we'll come back to all that in another\Nvideo. Till then, thanks for watching. Dialogue: 0,0:08:04.94,0:08:09.58,Default,,0000,0000,0000,,Have you ever seen a game that does something\Nsmart with navigation? Leave a comment below. Dialogue: 0,0:08:09.58,0:08:14.45,Default,,0000,0000,0000,,Also, give the video a like, subscribe to\Nthe channel, or consider pitching in via Patreon.