UI Document - Guille1406/The-Legend-of-Zelda-Hyrule-Conquest GitHub Wiki

#Index

• UI Flow Diagram
  • Diagram and how to interpret it
  • Diagram Explanation
    • Main menu
    • Campaign
    • Options
    • Credits
    • Quit
    • In-game menu
• HUD
  • In-game HUD
  • Inventory
  • Dialogue HUD

#UI Flow Diagram

The art of the ui is going to be modified respect from the original The Legend of Zelda to Link to he Past, as it has not yet finished producing, what is seen in this section are mockups of provisional art and layouts with boxes to make an idea of the position and size.

##Diagram and how to interpret it In the diagram you can see the flow, the menus and the options that are in the game. The arrows with a continued line indicates a change of screen, the discontinuations indicate that this option is in the same screen, for example, in the main menu, there's campaign, options, credits and quit, when you press campaign, another screen apears with continue and new game. Right click and open it in another window to be able to make zoom and examine the diagram. Or click the link.

##Diagram Explanation

###Main menu When you run the game, the logo of the studio appears, then the discreminder, followed by a screen with a label of "Choose the game language" and three buttons with each language, this screen will only show up the first tiem you execute the game, this screen can be modified to less languages or suppressed as a contingency measure. When the language has been chosen, an art image of the game and a label that says "Press any key / button to continue" apears. Once a key or button is pressed, the main menu will open with an art image or background map and four buttons to go to campaign, options, credits and quit menus. This screen will have a layout of buttons like this (the buttons could move to the center depending on the background art that is placed at the end):

###Campaign When you click campaign, a new screen opens with the buttons Continue and New Game. From this screen you can return to the main menu with the back button in the bottom right corner. When you click New Game, you will jump to a game mode selection screen, 1 or 2 players, if you choose 1, start the game, if you choose 2, an information message will come saying that player 1 will be Link and 2 Zelda. If a key is pressed, as the text has already been read, the game starts. If New Game is clicked with a saved game, a warning message will appear that the saved game will be overwritten, with the option of yes (proceed with the behavior described above) and no, return to the campain menu. When clicking Continue, choose game mode, 1 or 2 and proceed with the behavior described above, and continue the game saved.

The layout of this screen will be like this:

###Options When you access this menu, a screen with four buttons opens: Controls, Video Settings, Audio and gameplay.

The layout of this screen will be like this:

The following screens have layouts similar to this:

To the left the labels of which option is, and to the right the interaction method to modify the option, can be a button, a scrollbar like the one in the layout (the box to the right of the scrollbar a label with the value of it), or a box with a check as the square that is in the layout.

In controls there is the option of Controller Sensitivity, to adjust the sensibility of the controller joystics, there is also an analog option with the mouse. Another option is to see the layout of controls, pressing the button, opens a screen with an image of a controller with indications of which makes each button, there is also an analog option with the mouse and keyboard.

We are aming to controller support, but as the project is public and accessible to everyone who has pc, we plan to add support for keyboard and mouse. The mouse and keyboard support will be cut down as a contingency if we do not have enough time.

In Video Settings there are the options of: Scele: Allows you to adjust the size of the sprites that are displayed on the screen. This option may not be in the final game depending on what type of camera we use. Fullscreen: With a checkable box you can switch between window and fullscreen mode. Brightness: Adjusts the brightness of the game with a scrollbar. This option can be cut down as contingency. VSYNC: With a checkable box you can switch between VSYNC on or off.

In audio there will be three scrollbars, one to control the overall volume, another for the volume of the music and another for the volume of the SFX. As a contingency, this option can be reduced to a single scrollbar of overall volume.

In gameplay there will be the option of showing or hiding the HUD, with a checkable box, and the option to change the language of the game (this will be a label like in the layout, but at its right will be three buttons with the languages available), in case the language chosen at the beginning is wanted to change.

###Credits This option will show you all the credits of the game. As they are short enough, whole credits will be displayed, when they finish, it automatically returns to the main menu.

###Quit This option allows you to exit the game, when you press, a warning label comes out saying if you are sure and let you choose with two buttons, yes, you leave the game, no, you return to the main menu.

The layout of this screen, and the warning labels, will be like this:

###In-game menu Accessing this menu opens a screen with five buttons: Resume: You continue the game, as if you had not entered this menu. Load last checkpoint: Load the last checkpoint triggered by the player. Options: Without leaving the game, you access the menu of options, just like the main menu option. Main menu: Quit the game and you go to the main menu. Quit Game: Quit the game. It works just like the main menu quit.

The layout of this screen will be like this:

#HUD

##In-game HUD

In the HUD inside the game, at the upper right corner, there are the objects, in the "+" position, it is an analogy with the buttons A, B, X, Y of the controller, so it is related faster what button triggers what weapon assigned. At the upper left corner, there is the life, which will be hearts that are broken in halves as life is lost. Underneath the hearts will be the symbol of the rupees and a small label at the right, with the number of these you have.

##Inventory The inventory screen is divided vertically into two symmetrical halves. A bigger box above with the objects that own the character, and another smaller underneath with the equipped objects. The left half for Link and the right half for Zelda.

##Dialogue HUD

When a dialog is established with another character, a dark filter covers the game and above, a pixel art of Link or Zelda is shown on the left, it depends on who is speaking, and on the right the pixel art of the NPC. Above the pixel arts, there is a large box where the dialog text will be displayed. To know who speaks, pixel art will have different facial expressions, and when they speak, a label with their name will appear in the upper left/right corner of the text box where the dialogue comes out.

Return to Home