Avast Ye In-Game HUD

AvastYe is the BYU Animation Video Game Project 2019.

I designed, programmed all the UI for the game. I also did the majority of the art.

AvastYe has a fairly complex control scheme. I wanted to make it as clear as possible especially since we have a younger target audience. I designed an in-game HUD that resembles the XBOX controller in color and placement.

This hud shows the cooldowns of the player's crew member’s abilities. They each of a tap and hold ability. Since the player will look at the cooldowns regularly the health was included down here as well.

To view the widget in action click here

First Design

When I put together the first HUD for AvastYe we were using face buttons for Kate’s abilities and her allies. The player transitions between these by holding down the left bumper on the Xbox remote.

I decided to use a pirate ship wheel for two reasons

  1. Our game is a pirate ant game. As a design team we decided the UI should give the feeling of captaining a crew.

  2. I liked the aspect of turning the wheel. When the player would transition to the crew members abilities the wheel would turn.

Tap and Hold Initial Design

Eventually it was decided to exclusively dedicate at least 3 face buttons to the crew’s abilities. We also introduced a tap and hold mechanic for each of the crew members.

With this design I decided to add the health bar to this section. I felt it helped enclose the ship wheel and helped draw the players eye to one spot.

This was also the first rough draft with the idea of including the faces of the crew members to indicate what each button is mapped to.

Redesign

After conducting some playtests, players had a difficult time understanding the buttons and mechanics of the game. It had been a while since I had addressed this HUD, so I decided to do a redesign of the UI. Luckily by this time the control scheme was set in stone.

I started doing research on the UI in all sorts of different games. From this research I designed three new HUDs.

From the feedback I got, I implemented the two wheel designs. I learned a lot from the play testing we did with these new designs.

  • The health bar being a partial circle made it confusing to know how close to empty the health bar really is.

  • Because the UI and character colors were based on their positions on the Xbox controller, the positions of the crew's circles needed to be in the same position as the controller.

  • I realized there needed to be a lot of feedback to the player. Players weren't noticing the UI and weren't entirely sure when their crew's abilities were out of the cool down state.

Compass Design

I took the feedback from the playtesting and combined elements from previous designs. Major differences here include

  1. Animated faces. I added simple jumping to the faces when an ability is ready to be used. Along with this the faces will change expression depending on what they are doing. This was a major improvement as players were paying attention to the UI and clearly understood it with little explanation. (Art for Faces done by Derrick Drysdale)

  2. I moved to a compass design. I liked this better for a few reasons. I liked how the health can be added to the border creating a full circle, as it is easier to determine how full or empty your health is. I also liked how the star in the compass acts as a marker for every 12.5% of the health. Lastly the compass fit the overall art style for the game.

  3. I added Texture. This added a depth to the UI making it pop out a bit more.

  4. I programmed a charging mechanic that indicated the player is holding the button down. This allows the player to use a stronger ability.

Final Design

This is the Final base design. The major difference here is we have added textures and some art to it. This has helped the UI stick out and read better. The following additions were added.

    • Improved Animations

    • Rendered Textures. I modeled, textured, and rendered out the face buttons, and compass in Maya and Houdini FX

    • Separated the Tap and Hold buttons to make them more distinct from one another.

    • Made the buttons bigger. This has helped improve readability and has brought player's eyes towards the HUD.

    • Added sound effects for when characters are ready.

    • It is now semi-transparent when in cooldown.

    • Compass now has indications letting the player know where their crew members are. (Programming done by Joseph Newman)

Finished Product

This is the finished widget. New to this we have. This one is more polished but contains the main functionality and design from the previous iteration.

  • Upgrades to health

  • Updated character Faces

  • New animations

  • Smooth health digression.

  • Updated Textures