FOOLISH GAMES: Wreck-uisition: Private UIs

UI STYLE GUIDE

COMBAT UI

This is the layout of the combat UI:

Health Meter
Health EKG
Player Hacks/Abilities
Ammo/Charge Bar
Time

HEALTH (1, 2)

The health display is located in the upper left and lower right corners. There are two parts to the display, an integer number percentage, and an EKG graph.

The integer numbers correspond to the health percentage the player has remaining. These numbers are rendered in Black against the light grey background of the EKG.

The two EKGs are found in circles nestled in the upper left-hand and lower right-hand sides of the screen. The negative space between the rounded edge of the circle and the corner of the screen is added to the circle: this is where the health percentage numerals will go.

The EKG component will be located in the middle of the circle, with the numeric health display towards the corner of the screen. The background of the EKG is light grey, while the line is black. The waves on the graph will move more rapidly with higher peaks and lower troughs as the player decreases health. This requires some programming and animation. The cadence of the beeps is critical in its recognition as an EKG.

When the player is low on health, the black line of the EKG will turn red as the tempo increases and there’s the stereotypical EKG beep.

The EKG animation can be easily made by taking still frames and having Unity repeat these. This would require 3 or 4 different EKG graphs with varying wavelengths. These would all be colored black, except the largest wavelength, which would be red.

HACKS (3)

Each player will have access to several ‘hacks,’ non-weapon or armor equipment with mechanics that effect round play. These are displayed underneath the health module and the edge that defines the inner part of the health meter (the part closest to the center of the screen) will curve to include more space below it for a small icon and title. These assets are justified to the vertical edges of the screen (right and left). There is a possibility that a player may end up with a load-out that utilizes two hacks. In that case, the hacks are stacked vertically underneath the health GUI.

AMMO/CHARGE (4)

Ranged weapons require an ammo counter displaying available ammunition. Melee weapons will utilize this same space with a meter tracking the charge of an attack. This counter is located next to the health display, justified against the horizontal edge of the screen (either top or bottom). The background for the ammunition count is transparent, with black icons representing each round available. When the player has a melee weapon equipped, the asset then is used as a charge meter, showing how long before a player’s charged attack is available.

TIME (5)

While the matches have a specific time limit, only at the last thirty seconds will the time be shown. This will occur in the middle of the screen.

COLORS

The color Gold will signify the light/day side (Foteezi), while the Scotathi dark/night side is Mauve. The two halves of the multiplayer split screen will have a ‘glowing’ effect, as if it were being back-lit with each of the colors.