Unit Selection & Information Box
Unit selection in this game will give players feedback, relative information and gameplay experience through intuitive visual interactions.
At this stage, our design goal is to create an interface known as the information box which will appear through an interaction such as clicking on an interactable entity/object. The user will know Whenever the user clicks on a unit with the left mouse button, information about this unit will be displayed in an overlay box across the screen. Some of the core information which will be concerning the attributes of the object unit/entity and its statistics (Name, Health, Attack, Defense and Cost).
- Once the user clicks on the empty space or any area outside the box, the box will be destroyed.
- Once the user clicks on the close button "X" or the pressing of the ESC key, the box will also be destroyed.
- Once the user selects another unit, this box will update all information with the newly selected unit.
Future Implementation: The user will know what objects/units are interactable by hovering over them. Any interactable entity will highlight and display Object Text Label. These are text labels which hover near an in-game object.
For our Sprint 1's user testing, click here.
In RTS games, players usually need to click on the target to operate. At this time, a toolbar/overlay displaying information will greatly facilitate the player's operation. This information box is temporarily generated and dynamically updated based on player selections.
In the early development phase of Sprint 1, we generate it like this:
"To be edited"
At the same time, we designed its UI like this to fit the theme art style:
The following elements are included in the UI design:
- Thumbnails for each unit. We'll draw unit avatars to give users a clearer idea of the unit they're working with.
- The name and category of the units.
- Independent properties for each unit. This is highly customizable, depending on their development process and design. The Unit Information Box will be matched according to the design of different units. For Objects such as buildings, the UI for the information box will be different compared to units.
First draft for the information box:
We used deep sea grass, foam and sea level as decorative elements to fit the theme of Atlantis, and emphasized the layout with a more pronounced color distribution. The heavier border ensures that it can be separated from other elements and entities.
We assume that the legitimate targets are friendly units such as soldiers and workers, and buildings/structures.
Future Implements/Iteration can include
- Enemy targets, such as enemy soldiers to display information.
- Resources that can be collected - information can include the name, type, category, what its used for etc.
Every game has an abstraction for attributes and ways of displaying it. Each attribute will be color codes accordingly to make sure they stand out and portray the type of information wanting to be represented. Each attribute will also have its name next to its icon and values within it.
HEALTH is an attribute in a video game that determines survivability. The maximum amount of damage that a character or object can take before dying or being destroyed. For this game, our implementation will be a Health Bar. This will show the Health Points/Percentage. We will be using the color red to display character health and green for structural.
The health status bar will look like this. We have two iterations. One for character units and one for buildings. The HP (health) will be out of 100 for unit such as soldiers and workers. A full bar will represent full health, and 50/100 HP will show half health or half a bar filled accordingly. The health bar will be dynamically manipulated.
This shows how the health of unit will look with full HP.
This show show the health of a unit who has taken damage or with lower HP will look like. It also will display the values.
This shows an empty health bar.
For possible changes, after our initial design is done, we considered representing different levels of health with ranging shades of red/orange. An example is shown below:
ATTACK/OUTGOING DAMAGE: - Attack is an attribute which shows how much damage your character does. This is our initial design for the Attack Icon and its status bar.
DEFENSE: Defense, also known as shield, is the ability to resist attacks meaning reducing incoming damage. The higher one's defense, the less damage you take from attacks and the longer it stays alive.
The Defense status bar will be very similar to attack except it is showing the shielding/defensive values.
COST: Cost refers to how much currency you need in order to retain that unit or upgrade. (example 5 gold to buy an archer this value is not determined) This is our initial design for the Cost Icon.
UPGRADE: This will be similar to the cost system. It determined the amount of resources needed to upgrade/level up the building or structure. (Leveling up can include faster speed, more generation of an item etc. NOTE: This is not yet decided) The upgrade option will be similar to the cost where you press to level up/upgrade. The amount of resources needed to do so will be represented like other attributes in the form of a status bar. The bar will fill accordingly depending on the value needed and current amount of resources user is holding/has.
When a building is selected, the information box will contain:
- The building's avatar/small preview
- Building's main type with name
- Building's health
- Building's upgrade: resources needed
The currently selected building will be displayed inside the information box to give users some feedback. The name and level of the building will be shown with buttons which the user can interact with to upgrade the building or for it to complete a specific task e.g. barracks spawns troops. unlike the troop selection only a single building can be selected at a time to reduce the UI complexity for the user.
When a friendly soldier is selected, the information box will contain:
- The soldier avatar
- Soldier's health (HP)
- Attack power/ Damage
- Defense power/ Shield
- Range as a possible feature to show what type of soldiers they are. (soldiers of different types have different modes of combat - melee and ranged) - this attribute will only be available for types of soldiers.
- Cost of the unit.
The presentation of all information is customizable and non-deterministic, any changes and redoes may occur through the game design process.
A player unit can be selected by left-clicking on it. This should add a highlight/indicator that the unit has been selected, as well as some information about the unit in the HUD (at least the type of the unit and the unit's "health")
When the player holds down the left mouse button and drags their cursor across the screen, a selection box appears. One corner of the selection box is specified by the coordinate at which the drag operation began, while another corner is specified by the current position of the cursor. The remaining two corners are then chosen such that a rectangle is formed.
Any player units which are contained within a selection box when the player releases the left-mouse button are all selected.
Selected units (if any) are unselected when the player presses (and releases) the appropriate key (ESC key by default).
Groups of units for quick selection can be created by pressing ctrl- while unit(s) are selected. These groups can be re-selected by pressing the number key that they were assigned to