In this section, it is explained the way in which the user interface will be displayed in our game. To make it clearer, we have complemented all the explanation with some images showing a concept display of each of the different exposed menus and hud. You will also find some diagrams which will reveal all the possible ways which the player can follow through each of them.

IMPORTANT: The art used in all the examples of displays is not the one we will use in the game, it's just to show how UI elements will be distributed through the screen.

• Main Menu
• Choose Character
• Shop
• Game HUD
• Middle-Game Menu

The main menu will be the first screen containing some user interface elements in the game.

Here we are showing a concept display of the main menu's interface. The background, fonts, and images are not the definitive ones, this is just a sketch of the disposition of the elements.

Display of the main menu

In this menu, the player will have five different buttons:

1. The "Play" button will start a new game.
2. The "Continue" button will load the last saved state of the game.
3. The "Settings" button will open a little menu with three different options: The first of them, the volume, to adjust it as the player wants; the second, the frame rate cap, the player can activate it or deactivate it; and the last, the fullscreen, on or off.
4. The "Credits" button will show some information about us and two links to our Github and website.
5. The "Exit" button will close the game if the player is sure of doing it.

Diagram showing where each main menu's button brings you to

When the "Play" button is clicked, the player will be sent to this screen, where he will have to choose between 4 different characters: Black Mage, Dragoon Knight, Rogue, and Tank.

Animation showing how the player will interact with his options

If the mouse is hovering one character, this will stand out as shown in the animation above. If one of them is clicked, the game will start with the player being this character.

When the player is in the overworld -see GDD-, he has the option to go inside the shop, where he will be able to upgrade his abilities.

Screenshot of the inside of a shop

When you enter the shop, the owner will give you two options, "Buy" or "Leave". If you pick the "Buy" option, you will be sent to a new big menu:

Screenshot of the original game's buying options

This menu is exactly the same as the original game's one, but here we will explain the modifications it will suffer in our game:

The structure will remain the same, as we will also have the abilities' improvement on the top and the actual stats of your skills below it. The only difference we will have is that the bar on the top, which served to switch between the skills you want to improve, will be removed, as we will have all the abilities in the same screen, with a similar structure as you will see in the Game HUD.

On the other hand, if you pick the "Leave" option, you will be sent another time to the map, to the overworld, where you will be able to return to the shop, main menu or to play one available level.

This section will talk about the game's HUD, explaining all the tools that the player has in order to understand the gameplay while playing.

The image below is just showing the display of the user interface elements in the game, the art is not the definitive one we will have, but this is just to show how the HUD will be seen in the final version of our game:

Display of the UI during the gameplay

All the elements shown above are the tools used by the player while playing, explained from left to right:

• On the top left of the screen, we see:
  • The blue circle will show you the character you are, which you chose in the Choosing Character menu.
  • The P letter is indicating to the player that, if he presses the P button, it will be displayed a new menu showing the technical card of the player -you will see it below-.
  • The green and red bar is the life bar, it will show the health points that the player has.
  • The yellow bar it's indicating the number of coins you have.
• Below this, we find:
  • The five boxes, which each one can contain an object which you can find through the map in order to use it. The numbers next to each of them are the button you'll have to press in order to activate its functionality.
  • The two big boxes are the special abilities that the player can use. If the ability it's available to use, it will appear colored, otherwise, when used, it will turn darker and start a cooldown.
• In the middle of the screen, we can see a yellow arrow, this will be pointing to your character, in order for the player to be able to see easily where is he at every moment.
• The last element, in the bottom-right of the screen, we have the minimap, which will show a remote view of the map.

Technical sheet of the player

When the player presses the P button, it will be opened this interface, showing the actual stats of the skills which the player has, with its improvements.

The skills shown are (in order): Health, Attack, Defense, Velocity, Cooldown of the first ability, and Cooldown of the second ability.

While playing the game, the player will have the option of opening this menu by clicking on the Escape button. When this menu is opened, the game will automatically stop and the player will have several buttons indicating some options he has at the moment:

Display of the in-game menu

The buttons options will follow these rules:

1. The "Resume" button will close this menu and continue with the game.
2. The "Settings" button will open a little menu which will give him the same three options given in the main menu's settings: volume, frame rate cap and fullscreen.
3. The "Main Menu" option will send the player directly to the main menu.

Diagram showing where each in-game menu's button brings you to