Developing the HUD

Building the Base

When I joined the team of Hell of a Racket, the HUD was the very first thing I got to work on. I sat down and asked myself, what are the most important things that we need to show the player? The players weapon (the racket) and a reticle were the first two things added, since this game was an FPS, those genre conventions were important. The first big decision I made was on how to implement the health into the HUD. For gameplay balancing purposes, we chose early on to have the player have a set amount of health that didn’t auto regenerate like a lot of FPS games, so to represent this, I chose a bar to show the players health since with our games fast paced movement, this would be the easiest way to see health at a glance. A number was added too just to give the player a more exact number on their health. The health information was added to the bottom left corner of the screen to stay out of the players primary view. A huge gameplay mechanic of Hell of a Racket is timing your hits against enemy projectiles, so I wanted the health, and all HUD elements for the matter to stay out of the players primary view so they can see incoming projectiles. A dash mechanic and powerups were also outlined in the design document, so I added them to the lower right portion of the screen to fit with genre conventions. Soon in development it was decided that the game would be arena based as opposed to level based, so I added a map that let the player know where the enemies were relative to them, since in a game where the goal is to defeat all enemies, it’s important to know where they can find each enemy. You can see the original mock up I made below.

Tweaks and Adjustments

As more mechanics were added, thus more things had to be added to the HUD. A scoring system was added to incentivize players doing more exciting things during gameplay, so I had to find a way to show the scoring system to the player. I put the score and the current multiplier in the top left of the screen as it was the freest area in the HUD to put something since I didn’t want to make things cluttered. Lives were also added, and I placed them by end of the Health Bar, that way the player mostly notices them when they’re at low health, adding either reassurance that this death won’t be their last, or to make it more tense when the player sees they have one life left and are at low health. Lastly, based upon suggestions during playtesting, I added a bar below the map that showed how much of each enemy was left for the player to defeat. Players wanted to know just how many enemies there were, and having this constantly on screen seemed to address this issue for most players. Once the HUD was feature complete, I began to stylize it. I had one of the artists on the team make icons for things like the dash, player lives, powerups, etc. and so I needed to style the rest of the HUD to fit in with the icons. I went with a lot of black highlights, added accent lines and shearing things to give it a dynamic almost comic book feel. You can see the final HUD below.

Map Breakdown

The map is the most complex part of the HUD that has a lot going into it. The base of the map is simple, a camera is anchored to the player controller and hangs high above their location. I would have loved to make custom maps for the minimap to show, but due to time constraints and the constantly changing landscape of the level in game, this was the most efficent way to make a map. Being an arena based game where the goal is to kill all the enemies, I wanted all enemies to be represented on the map at once, whether within range of the map or not within range of it. I couldn't just apply an icon on top of the enemies that only the minimap camera could see because of this, so I had create a system that constantly finds enemy positoins relative to the player and then uses that info to put them on the map. Here is a breakdown of how it works:

- An enemies x and y coordinates are each subtracted from the players and then divided by 23.33333333 (this number is use for scaling purposes) and then turned into a 2D vector.

- The y coordinates of this new vector are then used alongside (0,0) to find the inverse tangent, which gives us the angle at which the player is from the enemy.

- Then the length of the original vector is found which gives us the distance between the player and the enemy. Then is clamped from 0 to 145 so that if enemies are outside of the sights of the minimap, their icons stay on the edge of the map.

- Then the cos and sin of the angle of the player from the enemy is taken and each multiplied with the clamped distance and then turned into a new vector.

- That vector is then applied to an icon that represents the enemy and sets its position in a widget, thus making its position represented on the minimap.

Creating a Reticle for a First Person Swinger

The reticle is one of the most important things in a FPS game, and a lot of care went into Hell of a Racket's reticle to account for its unique spin on the genre. A reticle is used for aiming, but in this game, aiming isn’t what your focus is (the game actually has a lot of auto-aiming baked into the gameplay). So instead, the reticle evolved into a way to help the player with the primary game mechanic, reflecting. I designed a system that would have a ring appear as a projectile was coming towards the player, and it would shrink as it approached the player. When the projectile was close enough to hit, the ring would turn red, letting the player know that now’s the time to swing (see diagram below).

This proved to be a huge success, and players were able to hit projectiles much easier. Various other things were added to the reticle, such as an alert for when you had a Tennis Ball powerup. Tennis balls worked a bit different compared to other powerups, and players were struggling to realize they picked them up, despite there being an indicator on screen they had them in the bottom right corner. That spot was just too out of view for the player, so a yellow ring was added around the reticle when the player had a Tennis Ball, and immediately upon adding that, players began actually using them when they’d pick them up.

How the reticle looks normally

How it looks when the player has a Tennis Ball