{"id":521,"date":"2026-05-20T15:17:41","date_gmt":"2026-05-20T15:17:41","guid":{"rendered":"https:\/\/sites.wsagames.com\/yfw1e23\/?p=521"},"modified":"2026-05-20T22:38:56","modified_gmt":"2026-05-20T22:38:56","slug":"level-layout","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/yfw1e23\/2026\/05\/20\/level-layout\/","title":{"rendered":"Level Layout"},"content":{"rendered":"\n

Supermarket<\/h2>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\n

While doing primary research<\/a> of supermarkets, I went to the WSA library and found this layout map of a Sainsbury’s near Winchester through the recommendation of a librarian.<\/p>\n<\/div>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n

This map served as a great example and lended me a greater understanding of how a supermarket’s overall composition may look like.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n

Some things I extrapolated from the map are that supermarkets have repetitive, blocky formations, have their entrance & exits besides one another and more importantly, are usually segmented into two or more areas.<\/p>\n\n\n\n

\n

This first, simple layout was to act as a prototype<\/p>\n\n\n\n

\"\"
1st Iteration Prototype<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"
1st Prototype Blender graybox<\/figcaption><\/figure>\n\n\n\n

I made a rough graybox of this 1st prototype to get a feel on it<\/p>\n<\/div>\n\n\n\n

\n
\"\"
2nd Iteration Prototype<\/figcaption><\/figure>\n\n\n\n

The design intention around this layout is to make the level as confusing and repetitive as possible, so the player cannot eaily dissern where they are and would have to use ulterior methods to navigate like a map or signs. <\/p>\n<\/div>\n\n\n\n

\n

I showed this 2nd prototype to my teammates and they believed something more similar to the 1st prototype would fit the game better. <\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n

The 3rd iteration was mostly an experiment, which paved way for the 4th ‘final’ iteration. Here I experimented on how the level’s ‘sight lines’, pathing etc.<\/p>\n\n\n\n

\"\"
3rd Iteration<\/figcaption><\/figure>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n

In both the 3rd & 4th iterations, I leaned into segmenting the supermarket for better player readability<\/p>\n<\/div>\n\n\n\n

4th ‘Final’ Iteration<\/h2>\n\n\n\n
\n

For this iteration, which ended up as the blueprint for what we’d build in UE5, I made it much more technical. These labels represent points on the level which serve an important function.<\/p>\n<\/div>\n\n\n\n

From top to bottom, we have<\/p>\n\n\n\n

\n
    \n
  • One Way Exit\n
      \n
    • blocks the player from entering on one side<\/li>\n\n\n\n
    • allows passage on the other<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Barriers & See Through Obstacles \n
        \n
      • prevent player movement through them<\/li>\n\n\n\n
      • allow for visibility past them<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Obstacles\n
          \n
        • walls which cannot be seen nor passed through<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Items\n
            \n
          • objectives which players must collect all to win<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
            \"\"<\/figure>\n<\/div>\n\n\n\n
            \"\"
            4th ‘final’ Iteration Layout Blueprint<\/figcaption><\/figure>\n\n\n\n

            The toilet at the bottom right corner is for a mechanic which ‘heals’ the player from the ‘damage’ enemies deal. (Terminology different in game) Enemies can be placed accordingly after the level is made.<\/p>\n\n\n\n

            \n
            \"\"<\/figure>\n\n\n\n
            \"\"
            Ideal player path through the level.<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

            As the annotated maps above display, the level is separated into two distinct segments. Segment 1 being a more free and open area while Segment 2 leads the player through a tight space.<\/p>\n\n\n\n

            The further annotated map below displays the Sightlines<\/mark><\/strong> from one item to another in green<\/mark><\/strong>, Items<\/strong><\/mark> being yellow stars<\/mark><\/strong>. Bright red perpendicular lines<\/mark><\/strong> represent Sightlines<\/mark><\/strong> which cannot be directly walked to due to See Through Obstacles<\/mark><\/strong><\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            The intent is to always allows players a line of sight<\/mark> to their next objective\/Item<\/mark>. However especially in Segment 2, a direct path towards those Items<\/mark> are blocked by See Through Obstacles<\/mark><\/strong> to force players to explore and navigate. <\/p>\n\n\n\n

            I created a graybox level in Blender using 4th iteration as a blueprint. It was intended for the Week 8 playtest but wasn’t used.<\/p>\n\n\n\n

            \n
            \"\"<\/figure>\n<\/figure>\n\n\n\n

            We recreated it weeks later in UE5 with textured assets<\/p>\n\n\n\n

            \n
            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n<\/figure>\n\n\n\n

            Below are examples of the Sightlines<\/mark><\/strong> in affect.<\/p>\n\n\n\n

            \n
            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n<\/figure>\n\n\n\n
            \n
            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n<\/figure>\n\n\n\n

            Others<\/h2>\n\n\n\n

            For the home apartment & bathroom of the protagonist, I just tried to make their layouts simple & easy to navigate.<\/p>\n\n\n\n

            \n
            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n<\/figure>\n\n\n\n
            \"\"
            Yushan made the initial layout of the Home Apartment in UE5<\/figcaption><\/figure>\n\n\n\n

            For the Supermarket toilet, we ended up with another look.<\/p>\n\n\n\n

            \n
            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n<\/figure>\n\n\n\n
            \"\"
            Blender screenshot. Half unused<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

            Supermarket While doing primary research of supermarkets, I went to the WSA library and found this layout map of a Sainsbury’s near Winchester through the recommendation of a librarian. This map served as a great example and lended me a greater understanding of how a supermarket’s overall composition may look like. Some things I extrapolated […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-521","post","type-post","status-publish","format-standard","hentry","category-year2sem2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/posts\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":24,"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"predecessor-version":[{"id":696,"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/posts\/521\/revisions\/696"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yfw1e23\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}