{"id":261,"date":"2025-09-09T13:43:58","date_gmt":"2025-09-09T13:43:58","guid":{"rendered":"https:\/\/mycours.es\/interactivity\/?page_id=261"},"modified":"2025-11-06T14:21:38","modified_gmt":"2025-11-06T14:21:38","slug":"assignment-layout","status":"publish","type":"page","link":"https:\/\/mycours.es\/interactivity\/assignment-layout\/","title":{"rendered":"Assignment: Layout and critical path"},"content":{"rendered":"<p><strong>Draft a spatial layout of your game &#8211; using miro or a similar tool.<br \/>\nEstablish a critical path and a .<\/strong><\/p>\n<p>Read Robert Yang&#8217;s chapter on <a href=\"https:\/\/book.leveldesignbook.com\/process\/layout\">layout in level design<\/a><\/p>\n<p>Define the <a href=\"https:\/\/book.leveldesignbook.com\/process\/preproduction#experience-goals\">experience goals<\/a> of the level<\/p>\n<p>Start with a <a href=\"https:\/\/book.leveldesignbook.com\/process\/layout\">parti and a bubble diagram<\/a><\/p>\n<p>Define a <a href=\"https:\/\/book.leveldesignbook.com\/process\/layout\/criticalpath\">critical path<\/a><\/p>\n<p>Read this article about <a href=\"https:\/\/grumpygamer.com\/puzzle_dependency_charts\">Dependency Charts<\/a> by Ron Gilbert (LucasArts, Monkey Island series).<br \/>\nIf your project has a narrative puzzle of some sort sketch it out separately as a chart.<\/p>\n<h3><strong>Critical Path<\/strong><\/h3>\n<p>For our purpose (general exploration game) you can create a document in which you describe in detail the path the player will take to go through the game (successfully) as a list of actions and a description of all the options, characters and locations. Imagine it as a solution or walkthrough of a game guide.<\/p>\n<p>Example:<\/p>\n<p>-You start in your private investigator office, the narrator tells you that you have amnesia and that you are a disgraced detective. There is a safe, a bottle of whisky, a desk, a cat, and a cheap mattress on the floor.<\/p>\n<p>&#8211; You pet the cat and that reminds you of your wife, who kicked you out of your place, that&#8217;s why you are sleeping in the office.<\/p>\n<p>-The bottle is empty, bitter monologue<\/p>\n<p>-You can&#8217;t open the safe without a key<\/p>\n<p>-You open the desk drawer, and find a key inside it<\/p>\n<p>-You open the safe with the key<\/p>\n<p>-You pick up the gun<\/p>\n<p>-You kill yourself<\/p>\n<p>-The end<\/p>\n<h2>Examples<\/h2>\n<p>The layout and prototype may have different formats depending on the genre, emphasis, and goals of your project.<\/p>\n<p><a href=\"http:\/\/www.ewright.ca\/divinity-original-sin.html\">Production document for Legend of Zelda<\/a> (1986)<br \/>\nThis tile based map of The Legend of Zelda depicts notable items, secrets, and characters of interest in each map section on the overworld. Every element is hand drawn on an overlay of the map.<\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02.png\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02.png 1920w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02-300x169.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02-1024x576.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02-768x432.png 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02-1536x864.png 1536w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/1985-The-Legend-of-Zelda-World-02-1200x675.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Quest <a href=\"http:\/\/www.ewright.ca\/divinity-original-sin.html\">design document<\/a> for Divinity (dialogue heavy RPG like Baldur&#8217;s Gate 3)<\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/divinityflowchart_orig.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/divinityflowchart_orig.png\" alt=\"\" width=\"1100\" height=\"711\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/divinityflowchart_orig.png 1100w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/divinityflowchart_orig-300x194.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/divinityflowchart_orig-1024x662.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/divinityflowchart_orig-768x496.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>A <a href=\"http:\/\/www.ewright.ca\/uncharted-storm-the-tower.html\">level design document for Uncharted<\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/unchartedlevelplan_orig.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-112\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/unchartedlevelplan_orig.png\" alt=\"\" width=\"958\" height=\"800\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/unchartedlevelplan_orig.png 958w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/unchartedlevelplan_orig-300x251.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/unchartedlevelplan_orig-768x641.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<div class=\"contents_f41bb2\">\n<div id=\"message-content-1204429993011322930\" class=\"markup_a7e664 messageContent__21e69\">An example of pre-production layout for Hollow Knight (metroidvania)<\/div>\n<\/div>\n<div id=\"message-accessories-1204429993011322930\" class=\"container_dbadf5\">\n<div class=\"mediaAttachmentsContainer_edba75\">\n<div class=\"oneByOneGrid__02495 oneByOneGridSingle__01756\">\n<div class=\"messageAttachment_b97504 messageAttachmentNoJustify__922b7 messageAttachmentMediaMosaic__65bfc hideOverflow_d442b2\">\n<div class=\"imageContent__24964 embedWrapper_c143d9 attachmentContentContainer_e8d7a1 attachmentContentItem_ef9fc2\">\n<div class=\"imageContainer__04362\">\n<div class=\"imageWrapper_fd6587 imageZoom_ceab9d clickable_dc48ac lazyImgContainer__68fa8\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-107\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-scaled.jpg\" alt=\"\" width=\"2560\" height=\"1777\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-scaled.jpg 2560w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-300x208.jpg 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-1024x711.jpg 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-768x533.jpg 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-1536x1066.jpg 1536w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-2048x1421.jpg 2048w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/map_feb_10-1200x833.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>For a point and click adventure the layout may be closer to an environment concept art since it&#8217;s visually oriented, here are some <a href=\"https:\/\/leepetty.com\/broken-age\">concepts and sketches for Broken Age\u00a0<\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/6479941d3c714a9c7c054098_rw_1200.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-108\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/6479941d3c714a9c7c054098_rw_1200.jpg\" alt=\"\" width=\"1200\" height=\"900\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/6479941d3c714a9c7c054098_rw_1200.jpg 1200w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/6479941d3c714a9c7c054098_rw_1200-300x225.jpg 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/6479941d3c714a9c7c054098_rw_1200-1024x768.jpg 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/6479941d3c714a9c7c054098_rw_1200-768x576.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>And <a href=\"https:\/\/boingboing.net\/2009\/10\/14\/everything-but-the-g-1.html\">machinarium\u00a0<\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/13_machinarium_concept_art-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-110\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/13_machinarium_concept_art-2.jpg\" alt=\"\" width=\"1000\" height=\"708\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/13_machinarium_concept_art-2.jpg 1000w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/13_machinarium_concept_art-2-300x212.jpg 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/13_machinarium_concept_art-2-768x544.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Both Broken age and Machinarium are puzzle games that tell a story, so the layouts must be conceived after or along with the puzzle\/plot.<\/p>\n<p>This is a <a href=\"http:\/\/gameshelf.jmac.org\/2008\/11\/13\/GrimPuzzleDoc_small.pdf\">puzzle design document for Grim Fandango<\/a>:<\/p>\n<p><a href=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-111\" src=\"http:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5.png\" alt=\"\" width=\"1343\" height=\"759\" srcset=\"https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5.png 1343w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-300x170.png 300w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1024x579.png 1024w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-768x434.png 768w, https:\/\/mycours.es\/interactivity\/files\/2024\/02\/Image-5-1200x678.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Draft a spatial layout of your game &#8211; using miro or a similar tool. Establish a critical path and a . Read Robert Yang&#8217;s chapter on layout in level design Define the experience goals of the level Start with a parti and a bubble diagram Define a critical path Read this article about Dependency Charts &hellip; <a href=\"https:\/\/mycours.es\/interactivity\/assignment-layout\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Assignment: Layout and critical path&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-261","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":3,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/261\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/pages\/261\/revisions\/264"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/interactivity\/wp-json\/wp\/v2\/media?parent=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}