Demeo PC HUD
Client
Demeo PC - HUD
Year
2021
This task was interesting as we had all the information spread out in VR but now we had to make it all in a 2D interface.
The main parts to include were:
Turn Meter
Card Hand
Enemy / Character Info
Mana Meter
Party Info
Actions
Statuses
Wireframes
First I had explored different layouts as seen in similar games, there was definitely some conventions visible. But we weighted the options in terms of pro's and cons.
A candidate is chosen
After syncing with the team, we decided to go with the side view list of the party and turn on the top to separate the info for now.
This was then cleaned up to show the main party interface, turn meter, and cards. Supplementary interfaces included a card preview and the info window for pieces.
With this layout we got a concept from our UI Artist!
Immediately we had a vision, most of these concepts we had in some manner from the VR game.
Component Breakdowns
With these assets, I broke down their functionality and intended uses for the developers.
Turn Meter
The turn meter is anchored to the top of the screen and centered horizontally. It lets the player know who’s turn it is, who is coming up next, how many actions they have remaining and then how they can skip their turn.
Turn Order
The current turn player is seen in the biggest area on the left, then the order of other players/enemies/allies is seen to the right. Once a turn is done, they will move to the left by one sequence with the next player in queue taking the large spot. We have space for 6 items - 4 players, allies, and enemies.
If the player is alone and there’s no enemies turn, we just have the player as the second player in queue also.
Skipping Turn
The player must hold down the shift button to skip their turn. This will update the text to show the duration to hold. The skip turn text is only active on the player’s turn. If the player leaves go of the key, it returns to default.
Actions
When a player does an action that uses AP, the text and crystals under their name updates.
Mana Meter
The mana meter shows the player how much mana they have. This will award a new card once it fills up and the player can discard a card to fill up their mana meter. The mana meter is synced between the entire party.
It is anchored to the bottom right of the screen.
Party Interface
Anchored on the left side of the screen is the party overview. This shows each player’s colour / character picture and the stats of their character. To the right of these pictures will be statuses of the characters. Hovering over the stats will show the information about the stat similar to the vr version.
Clicking a player’s icon will show the menu of actions on the player.
It is centered vertically on screen and will adjust for party sizes.
Health Bar
The healthbar has the same art and criteria as the VR version.
The healthbar has 5 variants, normal, guardian normal, guardian armour, dead, and downed.
Statuses
Similar to the VR version, each time a player gets a status, we add them to the right of the player’s icon. These fill up the column first before adding the next column of statuses.
Hovering over will show the status description.
Player Options
When a player hovers on another icon, we get a menu pop out to the right of the player’s icon.
The player can mute or kick (if they’re the host).
The mute/unmute is a toggle, the kick will bring up the dialog to make sure the player want’s to kick the others.
Hovering anywhere outside of this pop up will auto close it.
Player and Enemy Info
Hovering over a player or enemy will bring up the window of player information on the right side.
This is the same information we show as VR. Here the Element should scale vertically to match the amount of immunities and abilities they have.
This element is centered vertically on the screen and is anchored to the right.
Tests
We had done some user tests with a working prototype of the interface and it went well but players didn't really know where to look so we had to condence it down.
Introducing the new vertical turn meter.
A New Sidebar
Turn Meter
The turn meter is anchored to the top of the screen and centered horizontally. It lets the player know who’s turn it is, who is coming up next, how many actions they have remaining and then how they can skip their turn.
The turn order is used with the arrow and AP crystals. This element moves down for each player it reacts with.
AP Crystals between the arrow and the profile icon are linked to the Player’s Actions. These are centered and can scale for the many AP that a player may have. These AP crystals hide on the enemies and allies turns.
Profile Pictures
Textbox
Sample Turn Flow
What stayed the same
The items that worked well and remained as is was the card hand, mana meter, statuses and healthbars. This also worked with the new sidebar since the language could be added to the sides of the profile icons.
Updates
Getting new cards
With the mana meter, we had to let players know that they got a new card. This was sometimes missed in the VR version so we had a chance to clarify greatly here. Not as much of an issue as we have the direct attention of the player always. We thought it'd be a great addition to show what all party members got !
This worked extremely well with users so we also used it for when players picked up a card from chests ingame
Profile Updates
With the introduction of voice chat and new characters, we had to update the player profiles also.
Status Updates
Players can get a lot of statuses and they're sometimes not very clear what they do so we had added a hover tooltip on all statuses so players could understand what they meant.
Room Codes
Room codes are how players join multiplayer games in Demeo VR and the same is in the PC client as you can play with VR players seamlessly. We knew the most common time players ask for the room code was while they were inside a game so it had to be accessible. We also knew that players tended to complain about people streamsniping and joining private games to clearly visible room codes.
Thus we added a hidden version that could be copied to clipboard straight away.
Status Messages
Multiplayer games are always needing updates about their games so we needed a consistent area for messaging. Since we didn't have anything at the top due to merging the old turn meter and side party menu, we decided to put these temporary messages up there.
Card Hand
The card limit was put in the card hand and we updated the card art to show critical, default, and range information for the cards. The mana meter also updated to show the prompt for discarding. This unified the final HUD experience.
