MY CONTRIBUTION
CLICK A BOX TO JUMP TO THAT SECTION
Designing puzzles and adding collectibles was closely linked to the level design process.
LEVEL DESIGN
As a level designer, I collaborated closely with the environmental artists from the initial ideation to the set dressing to create a believable world that was intuitive to explore and with landmarks at every corner. While content design got its own section, the line between level design and environment design was blurry enough in this project to warrant combining them.
LEVEL DESIGN GOALS
The following three goals were kept in mind for each explorable space that was designed. These pillars were designed to be present at all times, and the player character's mechanics were developed to support each one.
FLOW
The level should support the floaty movement of the character, meaning platforming should not be precise, and the terrain formed like waves to float across.
EXPLORATION
Although the progression is linear, all paths should remain open, allowing the player to re-explore each island for secrets.
FREEDOM
All spaces should feel vast and open, regardless of whether or not it is an explorable space.
LEVEL DESIGN PROCESS
My four-step level design process. I go into detail for each step throughout the level design section of this portfolio piece.
CLICK A SECTION TO JUMP THERE
1. IDEATION
Ideation was a three-step process, beginning with researching games and films with similar motifs, world-building, or gameplay to what we were looking to create. Of particular importance were the feelings the aforementioned categories stirred in us as viewers or players. Concept art was subsequently made to direct early-level design and art.
GOTLAND ARCHITECTURE
The nature and architecture that the Swedish island of Gotland encompasses influenced the overall direction for level design and environmental art. This can particularly be seen in the partially ruined ring wall and the meandering paths across the islands' green hills. Even the game's islands were inspired by the origin story of Gotland having risen from beneath the waves - though in our case it rose into the sky!
RESEARCHING SIMILAR GAMES & MEDIA
![moodboard.jpg](https://static.wixstatic.com/media/cbda42_cc47bc4b77e64d5288b8d411c008a829~mv2.jpg/v1/fill/w_599,h_447,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/moodboard.jpg)
CONCEPT ART
![ofthesky_conceptart_02.jpg](https://static.wixstatic.com/media/cbda42_106acd57957740eca426c91c4a4c86b9~mv2.jpg/v1/fill/w_600,h_900,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ofthesky_conceptart_02.jpg)
![ofthesky_conceptart_07.png](https://static.wixstatic.com/media/cbda42_330346227df54fd7b3b16657f056854a~mv2.png/v1/fill/w_600,h_313,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ofthesky_conceptart_07.png)
2. PAPER PROTOTYPE
Paper prototyping was a collaborative task between level design and environmental art. Some prototypes are high-level perspective views of the world, while others are low-level views of individual islands or structures. Level design prototypes will be shown here, with other designs present in the Content Design section.
WORLD MAP - FUNCTIONAL CONCEPT ART
![ofthesky_conceptart_04.png](https://static.wixstatic.com/media/cbda42_11bf5f207a0a47c3a5f70923ba17962d~mv2.png/v1/crop/x_69,y_107,w_1734,h_1630/fill/w_979,h_920,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/ofthesky_conceptart_04.png)
The high-level view of the progression through the game, as per the first design. This map is a functional concept art where each zone is numbered and coloured. There is also a brief description of the purpose of each zone, and what the player does there. This digital prototype was drawn by an artist based on my hand-drawn map, as shown below.
![world_map.jpg](https://static.wixstatic.com/media/cbda42_e5cae0d4993f428b8b02cdb656b20d9e~mv2.jpg/v1/crop/x_72,y_223,w_1278,h_1628/fill/w_501,h_638,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/world_map.jpg)
The hand-drawn functional concept art of the world was made early on in development and served as a foundation as to what the world would look like, and how the player traversed it.
Some alterations were made between this iteration of the map and the digital prototype.
LOW-LEVEL WORLD MAP
![temple_island.jpg](https://static.wixstatic.com/media/cbda42_1eb08b9f586f4377967edca12ccd2177~mv2.jpg/v1/crop/x_0,y_0,w_1486,h_1644/fill/w_386,h_427,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/temple_island.jpg)
![left_island.jpg](https://static.wixstatic.com/media/cbda42_db3cf1204084426d9829dcd9c37d03d3~mv2.jpg/v1/fill/w_302,h_428,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/left_island.jpg)
![bottom_island.jpg](https://static.wixstatic.com/media/cbda42_427a82a6e894491586cee2e82c7d3a40~mv2.jpg/v1/fill/w_289,h_428,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/bottom_island.jpg)
![right_island.jpg](https://static.wixstatic.com/media/cbda42_b22fb90a38b540f184dfb0ad3b123824~mv2.jpg/v1/fill/w_296,h_428,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/right_island.jpg)
These four A4-pages are the designs for each of the game's three main islands, as well as the core island at their centre. The tutorial island can be found later in this section.
There were considerable changes between the first functional concept art and this low-level world map. That is because this design was for level 1, which would have taken place in one or two of the zones on the larger map. The other zones would be for two potential additional levels.
The layout is many times one-to-one between these designs and the single level present in the published game, however.
LOW-LEVEL PLAYER HUB
A low-level sketch of the temple at the core of the game world. It functions as the game's hub, as the player returns here numerous times during the game. It was therefore made an important landmark that could be seen from most places in the level.
An isometric view was used to show the height of each of the temple's floors, and how a secret could be hidden in a corner.
![prototypetemple.jpg](https://static.wixstatic.com/media/cbda42_600265e51db6438f8e5fa437d7e0b553~mv2.jpg/v1/crop/x_19,y_42,w_614,h_428/fill/w_558,h_389,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/prototypetemple.jpg)
TUTORIAL - PAPER PROTOTYPE
![prototypetutorial.jpg](https://static.wixstatic.com/media/cbda42_68bffb1774fd4f6eacc507a2fa0a8eff~mv2.jpg/v1/crop/x_0,y_5,w_682,h_526/fill/w_600,h_463,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/prototypetutorial.jpg)
The tutorial island was designed first of the level's islands. This initial sketch addressed how to teach mechanics to the player, namely: floating over low obstacles, jumping over high obstacles, and interacting with puzzles.
Scales and viewing angles were used to get a feel for the size of each island.
TUTORIAL - DIGITAL PROTOTYPE
This abstract digital prototype of the tutorial was created to break down which assets and mechanics had to be implemented for the level to be completed, and to communicate the purpose of each level beat and how the player progresses through the space.
![digitaltutorial.png](https://static.wixstatic.com/media/cbda42_4ad00d9289ac4fb98b3330a1a8537a6c~mv2.png/v1/fill/w_599,h_454,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/digitaltutorial.png)
3. BLOCKOUT
The blockout was developed in Unreal Engine using BSPs and sculpted landscapes. The BSPs would later be replaced by modular meshes, and the landscape was exported into Blender to give the island an underside.
![ofthesky_wip_01.png](https://static.wixstatic.com/media/cbda42_b8de4b8454eb4df4920f44c97d6b480d~mv2.png/v1/fill/w_594,h_322,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ofthesky_wip_01.png)
The very first blockout was made entirely using BSPs, including the ground. This was a quick way of judging size and distance, and confirmed that the puzzles that were designed on paper were also feasible in 3D.
Later stages of the blockout used sculpted and painted landscapes, trees, and even grass! This allowed us to test performance and made sure the landscape worked as intended for each island before they were exported to the artists for them to make meshes out of.
BSPs were still enough for us to create the hub and the ruins around the world.
![Landscape.png](https://static.wixstatic.com/media/cbda42_f50ccf048301407bb5b540da4b77a4fb~mv2.png/v1/crop/x_0,y_0,w_1634,h_629/fill/w_973,h_375,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Landscape.png)
Each island had to be a mesh in order for the island not to stretch down, through the clouds. The meshes had to be repainted when imported into Unreal Engine, which meant the initial paint over in the blockout was far from perfect.
4. SET DRESSING
The bulk of the environment design happened during this stage. The main considerations were for each island to feel distinct, making the placement of rocks and vegetation natural, and guiding the player's view with roads and lanterns.
AN EXPANSIVE WORLD
The level is vast. All islands were given unique landmarks and signifiers, such as a particularly large tree, a prominent windmill, or an abundance of ruins.
![gYmGkM.jpg](https://static.wixstatic.com/media/cbda42_a30aeae2ece749db8c8cabef99c9f01b~mv2.jpg/v1/fill/w_600,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/gYmGkM.jpg)
A TEMPLE TO REMEMBER
![Ez83OW.jpg](https://static.wixstatic.com/media/cbda42_dbffe081bc704fbe89898b16d8fc6491~mv2.jpg/v1/fill/w_600,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Ez83OW.jpg)
Modular meshes were used to replace the BSPs. The painting of the landscape and the placement of vegetation got additional attention.
The player returns to the hub time and time again.
THE RUINS OF MANKIND?
The modular meshes could be used to build a variety of buildings, such as these ruined remains of a multi-roomed building.
The dirt ground signifies that people may have lived here, once. A single, carved runestone still remains.
![HSI7n3.jpg](https://static.wixstatic.com/media/cbda42_8a785b63c43c4e5d8f976061c5f52862~mv2.jpg/v1/fill/w_600,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/HSI7n3.jpg)
A LONG FORGOTTEN PURPOSE
![NaAtAH.jpg](https://static.wixstatic.com/media/cbda42_2a8ff015276c4f8886b68a921ee9bcae~mv2.jpg/v1/fill/w_600,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/NaAtAH.jpg)
Creating large open spaces without straight corners was also possible.
These ruins have been overrun by vegetation. The size of the central tree speaks to how old these ruins are. Leftover rotors hint that the building may have once been for storage.
A WORLD FULL OF SECRETS
CONTENT DESIGN
Level design and content design were conducted side-by-side. Where level design created paths for the player to take, content design decided what the player could do or find along the way. This section will also explain the main puzzle of the game.
CONTENT DESIGN GOALS
Three goals were decided upon when developing content. The main puzzle and side content alike used these pillars to decide if they fit.
LEARN BY DOING
No tutorials should be necessary to fully complete the game, so even the simplest of puzzles should be intuitive.
ENCOURAGE EXPLORATION
Require the player to fully move around the surroundings to find solutions to puzzles and obstacles.
VARY GAMEPLAY
Surprise the player with challenges that incorporate platforming, environmental puzzle solving, or require exploration.
MAIN PUZZLE
The main puzzle in Of the Sky is perspective-based, where the sight-line is key to progressing. A hub in the middle of the level is a regular point of return for the player, as they have to input the puzzle combinations on pressure plates located there.
![puzzle_prototype.jpg](https://static.wixstatic.com/media/cbda42_0c15f45e8d504d58897c7e7483d09e31~mv2.jpg/v1/crop/x_278,y_51,w_1175,h_1986/fill/w_350,h_591,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/puzzle_prototype.jpg)
First sketch of the Viewpoint Orb: pillars that the player must look at from a certain angle. Three Viewpoint Orbs together form a pattern that can be input.
The rightmost sketch is an example of one such pattern.
![prototypedoor.jpg](https://static.wixstatic.com/media/cbda42_63baa0d874b243a0be9e1ac372d46b71~mv2.jpg/v1/crop/x_13,y_50,w_511,h_308/fill/w_591,h_356,al_c,lg_1,q_80,enc_avif,quality_auto/prototypedoor.jpg)
A correct pattern typically activates a drawbridge, allowing the player to progress to a new island.
Solving a puzzle may also lift up an island from beneath the clouds.
![puzzle_prototype2.jpg](https://static.wixstatic.com/media/cbda42_f65121bb89e64401800ed52ca71a0fc4~mv2.jpg/v1/crop/x_0,y_37,w_1298,h_1846/fill/w_413,h_587,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/puzzle_prototype2.jpg)
One of the puzzles requires the player to push a box away from a window, allowing them to see through it. They can then see three Viewpoint Orbs in a pattern that must be input.
Blockout of the player looking through a window and seeing three Viewpoint Orbs line up.
![ofthesky_wip_01.png](https://static.wixstatic.com/media/cbda42_b8de4b8454eb4df4920f44c97d6b480d~mv2.png/v1/fill/w_583,h_316,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ofthesky_wip_01.png)
![puzzle_blockout2.png](https://static.wixstatic.com/media/cbda42_012e183ae8ab482b8cf5be11353ed26c~mv2.png/v1/fill/w_483,h_360,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/puzzle_blockout2.png)
Bars were soon added to the windows to help the player connect that the orbs are in a 3x3 grid, just like the pressure plates by the hub.
![puzzle_blockout.png](https://static.wixstatic.com/media/cbda42_e4169a0f9aaa41f7909355411b3ff66c~mv2.png/v1/fill/w_470,h_576,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/puzzle_blockout.png)
OPTIONAL CHALLENGES
There are a number of optional challenges to do throughout the game. Some require exploration, others puzzle solving. Each challenge reveals a runestone, which serves as the collectables in Of the Sky.
![prototyperune.jpg](https://static.wixstatic.com/media/cbda42_734dd8d9ff6844ebaccca41f96ceec51~mv2.jpg/v1/crop/x_18,y_34,w_486,h_335/fill/w_582,h_401,al_c,lg_1,q_80,enc_avif,quality_auto/prototyperune.jpg)
Initial sketch of the runestones. The runes were written in Old Norse, and collecting all of them in a level formed a word.
![language.png](https://static.wixstatic.com/media/cbda42_1abbeeb705124b378406c0c0ad56faac~mv2.png/v1/fill/w_355,h_93,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/language.png)
The idea of them forming words was later cut in favour of letters in our own alphabet. Each letter corresponds to a musical note on a scale.
![rune.jpg](https://static.wixstatic.com/media/cbda42_17d108daf5444c8ba2f4637ecc3fb701~mv2.jpg/v1/fill/w_589,h_317,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/rune.jpg)
PRODUCTION
I was the producer on Of the Sky and was in this case in charge of creating a project timeline and guiding the team through the Scrum process.
![production.png](https://static.wixstatic.com/media/cbda42_7bd0980ddde649429010bb924f9ad960~mv2.png/v1/fill/w_630,h_242,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/production.png)
There were milestones in nearly every sprint during this 12-week project. The first two weeks was spent pitching the game idea to get it greenlit, whereafter the start of development began in week three.
![milestones.png](https://static.wixstatic.com/media/cbda42_c2e254b09f484c098f109b1a98e4a7af~mv2.png/v1/fill/w_614,h_444,al_c,lg_1,q_85,enc_avif,quality_auto/milestones.png)
The first half of the milestones were school-related, while the second half was for the development team. Each of those milestones was prioritised to keep us focused on one task at a time. In the end, levels 2 & 3 were cut and integrated into level 1, together with the tutorial.
UI DESIGN
UI design was a smaller task compared to what has been covered in preceding sections, but nevertheless worth mentioning. Mockups were made in Photoshop, while the menu functions in Unreal Engine were developed by a programmer and then edited by me.
![pauseUImockup.png](https://static.wixstatic.com/media/cbda42_0f2467c0c665430db85a2f6d7beaf76e~mv2.png/v1/fill/w_600,h_329,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/pauseUImockup.png)
The first mockup. It was made using a screenshot from an early version of the game, with the menu made in Photoshop.
![pauseUI.png](https://static.wixstatic.com/media/cbda42_d635a4796e4a4fa9a8723dff320d004c~mv2.png/v1/fill/w_599,h_337,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/pauseUI.png)
The final version of the menu, present in the release version of Of the Sky. The outline stayed mostly the same, with some adjustments to the font, menu content, and highlight bar.
The design of the action command pop-ups throughout the tutorial and when interacting with objects are consistent with the menu.
![tutorialUI.png](https://static.wixstatic.com/media/cbda42_3a20d8c23fe44546bfe7db1d1fb0be0d~mv2.png/v1/fill/w_599,h_337,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/tutorialUI.png)