The Adrestia Protocol
DETAILS
Genre: 3rd Person Arcade Space Shooter
High Concept: Hunt down the enemies with the deadliest fighter created
10 members
What I did: UI/UX Design, Gameplay Designer
The Project
This was a 6 months long assignment where designers and programmers come together to built a short 3D Game using a custom engine built from scratch. While the engine was being built, early prototypes were done in Unity engine.
​
During this project, I worked on the creation of the menus as well as the base layout and design of the in-game HUD
The Game
The Adrestia Protocol is a 3rd Person arcade space shooter, where players will take control
of a fighter ship and destroy multiple alien ships in order to get revenge for the human
race. The game consists of a tutorial level and 2 more levels.
Research
As with any project, proper research is essential to come up with a great product. I first looked into various other space shooter games in order to find out what UI elements we needed in ours. They also serve as a good way to see how other games handle certain issues and we could learn from them.
Fonts
Our game uses 3 different royalty free fonts, namely Closeness, Orbitron and Electrolize. I chose these 3 fonts as they are sans serif fonts which is perfect for usage on digital media and they gave off a Sci-fi feel due to their squarish characters and uniform stroke width.
I used Closeness for the title of the game mainly due to its thickness as well as its readability from afar. I used Orbitron for headers due to its lack of ear on its characters, making it look good as a header but not as great in a body of text. Finally I used Electrolyze for body text as it is slightly more rounded than the rest while keeping a uniform stroke width making it easily readable for body text.
Menus
First off, I created a flow chart for my menus in order to make sure not only do I know what screens I need but also for me to visualize which screens will lead to which. This helps me to plan the overall layout of each screen as well.
As the game is a futuristic space shooter, I wanted to go for a sci-fi theme for the menu. I used white for the fonts and most of the line work and I used various shades of blue in order to make it look sci-fi. I also toned down the transparency for the backings as well as added some lines in order to replicate a CRT screen effect to make the menus look like a hologram.
As the game is a futuristic space shooter, I wanted to go for a sci-fi theme for the menu. I used white for the fonts and most of the line work and I used various shades of blue in order to make it look sci-fi. I also toned down the transparency for the backings as well as added some lines in order to replicate a CRT screen effect to make the menus look like a hologram. I also avoided using solid UI assets as using them would remove the holographic feel from the UI.
In-game HUD
For the In game HUD, I was involved with the basic design, prototyping, and layouts of the different elements. My teammate then took over and polished up the assets, adding animations as needed.
Early UI Prototype
Design Choices
For the In game HUD, I was involved with the basic design, prototyping, and layouts of the different elements. My teammate then took over and polished up the assets, adding animations as needed.
Due to the game being in 3rd person view, we decided to place the health bar at the top of the screen as the player is occupying the bottom of the screen and we did not want to clutter the screen with UI as much as possible which is a common problem with most flying sims. We did try to have a small health bar beside the reticle instead which would allow players to easily look at it while taking down enemies, but this only added clutter to the main gameplay area which was not what we wanted.
Just like with the menus, we decided to go with white and blue for most of the UI Elements as it stood out well in comparison to the darkness of space. While coming up with the reticle, we tried many different shapes and variations before finally deciding on just a square with a crosshair to keep it simple. As our fighter ship has both a primary and secondary attack, we considered switching between 2 different reticles, but we decided to switch to have an animation instead when the secondary weapon is charging in order to add feedback for the players. On holding the button down, the reticle will starts to change and once the animation ends, players will know that the weapon is done charging and ready for fire. Once the charged shot is fired, the reticle will revert to its original shape.
In order to differentiate the enemy targets from the player reticle, we decided to use red, which is usually a color used to designate enemies. The bright red also stood out from the background and environment which is colored in yellow and dark blue so it worked well. For the enemy targets, we experimented with various different target markers from solid shapes to just outlines, trying to find a good balance in making sure that the objective markers and enemy markers had clear differences, while at the same time not cluttering the screen. In the end, we decided to go with a simple diamond on enemy markers and a circle with protrusions for the objective markers.