Skip to content

3. User Interface Document

Oscar Larios edited this page Jun 11, 2019 · 27 revisions

User Interface Document Index

Main Menu

The Main Menu has 4 buttons:

1. Play: This button will lead the player to the next screen before the game, the character selection screen

2. Options: The options button will open an extra menu where the player will be able to adjust parameters like music and fx volume or the controls keybinds. The player will also be able to see the controls that he can use while playing

3. Credits: The credits menu will be represented by our studio logo. This button will lead the player to a new screen where he’ll find information about the team and a button to visit our website

4. Exit: Simply closes the software

Champion Selection Screen

This screen will open up after the player selects the button play in the main menu. The left part of the screen will be for the 4 players, each will have a space where they will see which champion they are selecting. Players can confirm the selection pressing A with the gamepad or to cancel it with the B(as written in the screen). Once the player has selected a champion he will see a yellow quad in his portrait confirming the selection. The arrows in the left and right of the player portraits symbolize the way that the players can change champions, using the gamepad left and right arrows. Of course this action is blocked if the player has the yellow selection quad in his portrait. In the right part of the screen we find the "playground". This area works as an interactive tutorial where the players can move and use the champions they are sleecting to see how they work and what they do before entering the game. Once all 4 players have confirmed their champion selection, the game will start.

Ingame UI

Since our game will have a split screen for the 4 players, we need to give the players succesful information without distracting them too much or without taking them too many screen space. For that we thought we would simplify the information that the players display. We will show:

1. Hp bar: This red bar will show the health of each players. This bar can be seen by any player.

2. Special ability/ultimate ability bar: This divided yellow bar will display the capability of the player to use their special and ultimate abilities. If the bar is fully completed the player can use the ultimate ability, if only is at half he can only use the special ability. This bar is personal for each screen, so other players can't see it in theirs, just the player himself.

3. Shield circle: This blue shield will do an animation around the player when its ready for use.

4. Player circle: This color circle will always be down the player character. It shows which player is which for cases when there are several same characters playing and can cause confusion. The colors are the same of the players in the champion selection screen(red->player1, blue->player2, yellow->player3, green->player4)

5. Player's position arrows: This 3 little arrows are situated around each player, and give them the information of the actual enemy position. This is done to make the encounters faster, most of all at the beggining of the match when the storm still hasn't closed in. If a player sees an enemy inside their screen, the arrow showing that enemy position will disappear.

6. Storm timer: This will signal the time until the next storm phase starts. It will be in the middle of the screen for all the player to see it.

7. Attack aim grid: This grid will be displayed when a player is moving the aim joystick to show where the particle is going to go.

8. Abilities grid: This is the same as the attack aim grid, it shows the direction and areas where the abilities of the characters will go.

9. AutoAim marker: This red marker will show above the closest enemy player to mark him as the target for the auto aim attack.

Pause Menu

The pause menu will open when a player use the Start gamepad button and it will work as an ingame options menu. It will show the music and fx bars to adjust these parameters, a button to apply them and and exit button to exit the game. To return to the game players will need to use the Start button again.

Map Preview Screen

This screen will appear between rounds and will display the players character portraits and an image of the map. This acts as an information for the players. To exit this screen and advance to the next rounds, players will need to use the A button of the gamepad, so if a playr is not ready he can look the map for some more time until the next round starts.

Scoreboard Screen

This will be the last screen that the players will see before leaving the match. It will display the results of the game and which player has won. This will be seen by the number of stars each player has. Some text will appear in the right side of the screen showing which player has won. This screen will be exit when the 4 players click the A gamepad button and they will be send to the Start Menu.

< Previous | Next >