FPS UI Design
- Wednesday 18 July 2018
- 3 min. read (504 words)
- Visual Style
- Main Menu
- Level Select
Our Oath is a sci-fi, FPS game concept. Our hero dreams of mundane, everyday events from the future. One day, they dream of of an up coming accident that will kill 100s of people.
A lot of sci-fi games like to use blue. I want try to use green to see what happens. Why do I keep using cccccc? It lets me add highlights to text if I need to. Console games like to break their menus into multiple steps, so I never had the need to use purple for a background color of a menu.
Page maps help us see the entire UI flow. Like a regular travel map they show us possible routes the player can take and help identify paths that are too long. I also include which button triggers the page transition, so I can reference it later when programming the UI.
The menu is on the right because that is where the trees are. We maintain the composition of background. The title is in the center of the page. Many websites often open with a similar style: big text that is centered on an interesting background. In web design, this layout is called a hero image.
Selecting CONTINUE in the main menu will take the player here, where they can select the level and difficulty. The aesthetic was looking a bit horror themed, I tried to add a dot texture to the background to restore the sci-fi feel, but it doesn't work well. Squiggly lines were added, but it reminded me of a rorschach test, bringing me back to psychological horror. I guess this is a horror, sci-fi, FPS game now.
I took a screenshot of Halo 5's in-game UI and painted my own UI. In this sci-fi world, people have wrist bands to monitor their health. The color changes as the player's health declines.
Many film and TV shows have subtitles much bigger than the ones shown here. There should be an option to increase the subtitle's size. In FPS games, enemies tend to be on the upper half of the screen. The lower half of the screen is mostly ground and players have no reason to look there. By placing the subtitles on top, we put them closer to the enemies. This makes it easier to read information in the heat of combat.
When the player pauses the screen from in-game, they are also shown the score board. The pink border around the numbers makes them jump out more, so players can quickly glance them and resume the game. This use is similar to how players in competitive games will often bring up the kill board.