3. UI Document
The original UI design in Warcraft II, is based on a square window where the game images are shown and an outter area/menu reserved for all the buttons and interactable elements.
This way, they avoid to have any element on the screen that could distract the player. The only elements that overlap to the game, are the selection boxes and the mouse.
On the left bar, they show the menu and pause buttons, the minimap and all the information about the entities selected and their possible actions buttons.
On the top, there are shown the resources that the player have. In the bottom, some tips messages.
All colors and textures used are susceptible to change. They are just set in order to define some structure and are thought to direct user attention to the different parts of the gui.
We wanted to keep the idea of a reserved space for the menu, however, it should be smaller and less intrusive (occupies even less space). So we decided to have just a bottom bar with some of the elements and some other, which will be small, will overlap to the game in order to show some extra information like: resources, life bars...
This is an example sketch of how the hud would look like in-game:
At the top, there are some overlapping elements: the options button and the different resources.
With a squad selected, the player would see in the menu the type and life of each troop, following in the left, the total stats of the squad and further, the actions buttons.
- When he puts the mouse over a troop, the stats would change to show the individual ones:
- If selecting more than one squad at the same time, it will show each squad toops grouped with an outline color representing its life (green, yellow, red). The stats shown would be the sum of all troops or the interval between the minimum and the maximum:
- When moving the mouse over a squad icon, the stats shown would change to the squad ones:
- When the hero is selected, its personal stats will be shown, in addition, also the buttons for his abilities:
- If a building is selected, the action buttons will be the ones to create troops (if corresponds) and in the stats area, will be shown the cost of creation of each troop when the mouse is set over its icon:
From the original UI of Warcraft II, just the sprites of the icons will be used (they can be find in the Art Bible - UI section). Everything else, will be created by us, following the art style of the game so it fits properly.
-
- Game logo.
- Buttons.
- Heroes concept art.
-
- Window background.
- Sliders.
- Check boxes.
-
- Bottom menu panel
- Action buttons for: troops and hero.
- Life bars.
- Resources bar.
- Options button.
-
- Buttons.
The color of the background of the menus, should be soft, so it does not overwhelm the player or distract him, specially the in-game menu.
The buttons of the menus that are not in-game should have some bright color and contrasted with the background in order to call the attention of the user and give more importance to them than to the rest of the menu. Ex. The red color and yellow text set in the sketches.
In the settings menu, the buttons have different degree of importance, so the colors of the buttons should be well distributed as shown. Orange for the configuration which contrasts with the background but not as much as the close and apply buttons which we want that are easier to find for the user.
In the in-game, the colors used in the overlapping elements, should be set to be different to any other color used in the map or in entities, so it will not mix with the background and confuse the player.
The colors of the life bars overlapped, should be different for each kind of entity: own troop, enemy or passive. So it is easier for the user to differentiate them during the game. However, on the bottom menu, as just one kind of troop is shown at the same moment, the colors can be used to represent the remaining life of the entity.
