Game/UX/UI Design – The Passage

Overview, Context and Objective

„The Passage“ is a personal project that I did to improve my game design as well as my UX/UI skills. My goal was to deepen my knowledge and to get some additional practice in using the necessary tools and in designing an appealing interface.

As a fan of adventure games like Disco Elysium, Pathologic or Kentucky Route Zero I decided to create a prototype for a detective role-playing game that is set somewhere in the middle of the 20th century in a fictional country. You, as the character, were sent to a small harbour town to investigate the disappearance of local fishermen. The story unfolds over time as the protagonist gets drawn into local politics, ancient mysticism and illegal trading activities.

Process and Approach

I started the project with a lot of brainstorming and mindmapping about the overall setting, the game type, the functions and how the player can interact with the world around him/her. After choosing a mid-century era and the location of a harbour town I started creating the 3d assets using the software Blender.




After I created the 3d assets I imported them into the software Substance Painter. This tools allows me to apply different materials layers (textures) to the 3d models. The used materials really influence the mood of the overall scene, so I had to balance the colors and chose a desaturated look.


Scene creation

With the 3d models and the textures done, I imported all files into the game engine Unity. A complex tool like Unity is the technical heart of every game. It serves as an environment for visuals, audio, functions and overall game mechanics. I arranged the scenes and the camera, implemented lights and applied some post-processing effects for a more cohesive look.



Working on the User Interface

I took screenshots of the finished scenes and imported them into Adobe XD to work on the UI. As with the setting, the mechanics and the scene composition, I had a variety of features in mind that I wanted to implement. I started with the main menu to set the general tonality of the UI.

Before starting the game, the user has the ability to change various settings that afflict the game experience. He/she can change the visual settings to either increase the performance or to improve the graphical quality of the game. It is also possible to change the audio settings and the language.



Enabling the player to interact with the environment

The following images showcase the ingame HUD, which is always visible while playing the game. In the top left corner is a mission briefing that tells the player what to do next. At the left bottom corner is the avatar of the player and five icons that symbolize the health/mental condition of the player. On the right side is a menu where the player can open the settings menu, read in his/her journal, inspect his personal items or take a look at the map of the town. The highlighted piece of furniture next to the player character indicates that the user can interact with it.

Similar to the options menu that can be accessed from the start screen, the user can also open the options menu from inside the game. Here it is possible to load or save the game or change the general game settings. The second image shows the journal where the player can read about his/her progress in the game.


The map shows the player were he/she is right now and what other places can be visited right now. As the player progresses throught the game more and more places become available and are then highlighted on the map.

As this is a detective game with a case that has to be solved, I wanted to implement a mindmap with all the hints, rumors and evidences the player learns as he/she explores the world. The more the detective interacts with his/her surroundings the more connections will occur and this will eventually help him/her solve the case.

Tools


Weitere Projekte