In this part of the S.W.A.N. Dev Diary, we would like to share some information about the game’s User Interface.
The visual aspect of the UI is complex and took a lot of time to design and implement.
Buttons and backgrounds were meant to resemble aesthetics of the retro sci-fi computer hardware with panels, displays, and switches. Thanks to this they relate to the game’s action time, place, and gameplay in which the player wanders through the soviet S.W.A.N. Institute in 1987.
On the example of the button, you can learn how the UI elements visually react to the player’s interaction. A single button object has different image layers. The main one is the background with three variants that shift between each other depending on how the player is using it – selecting (highlight state), clicking (click state), or normal state when the interaction is not performed.
The next layer is the text mesh which content is dynamically loaded from a separate text file that contains all language versions. Each line has a key code locating and connecting it with its corresponding text mesh in the game where the given content is supposed to appear.
The last layer is the image of the light reflection. It imitates the glass cover of the buttons display, this way we have a pleasant effect applied on top of the text layer.
When it comes to UX (User Experience) we decided to keep things simple. We wanted to deliver to the player the most intuitive navigation through the UI possible with a harmonic connection between visual aspects and functionality.
During the gameplay, players will use the Inventory, personal Diary, computer panels, and many more. You will see their fantastic design in the final game.
Here you can see screenshots from the working in-game main menu.
We hope you will like it!