Week 18 – UI Design

One of the Firing Squad’s proudest skills is our ability to rapidly iterate on different parts of the game. So this week, I’ll be taking a look at our current UI and trying to find ways for us to make it more visually cohesive and appealing while limiting myself to the current UI systems that we have in place. I front-loaded my UI tasks for this week, so I have some exciting progress to show in this post. Let’s get right into it.

Reticle Changes

After a couple weeks of playing with and testing the HUD and reticles that Natalie designed, it’s become clear that something isn’t working. Every time I played re[Mod], I found myself getting distracted by the large reticle in the middle of the screen, and feeling cheated when the reticle didn’t indicate my weapon’s vertical dispersion. We needed something that was less distracting and delivered all of the necessary information to the player. Take a look at how our UI was set up previously in the video below.

I started by researching reticles in other FPS games. This is something I’ve done many times before but figured it was worth another look. I found that Overwatch uses the same reticle for almost every character: a thin circle with a dot in the center. TF2 changes their reticle slightly with each character and COD pretty much only uses the 4 crosshair lines. I found the best reference in Halo. Halo, has a different reticle for every weapon in the game. I looked into all of the different reticles that Halo uses and tried to isolate the ones that use 4 symmetrical lines or points to indicate weapon spread.

haloreticles

Theoretically, we could do what COD and Overwatch do and only use one reticle, no matter what barrel the player is using. However, I think Natalie was correct to plan on using different reticles. It supports the idea that changing weapon parts significantly affects the way your gun works. The more feedback we can provide to the player that shows their gun in changing, the better.

So I worked on creating new reticle assets, based on the firing pattern of the barrel. For semi-automatic barrels, the simple 4 crosshair lines work well to indicate the average spread of these barrels and the classic firing pattern. For fully-automatic barrels, the crosshair lines are replaced by a series of pointed arrows to show how erratic the firing pattern can be on these weapons. Single shot/marksman barrels change the reticle to 4 very thin separated lines to show how accurate these weapons are. Finally, buckshot barrels use a carefully designed reticle that shows how wide the spread is on these weapons while still working with the same dynamic reticle system (this reticle is hard to describe, but the video below showcases all of the new reticles).

Hype Feedback

One of my other goals for UI this week is to mock-up some additional feedback that will appear along with certain in-game events, to notify the player that they are doing something pretty cool. Some of these events include getting a legendary part, getting a multi-kill, getting a headshot, and capturing a stage.

codmw2buzzkill
COD Buzzkill Achievement (source)

My vision for this feedback is heavily inspired by the achievement text that COD uses during matches to tell players when they’ve done something impressive, other than kill another player. Thinking back to the many hours I spent playing Modern Warfare 2 in High School, I distinctly remember feeling so proud whenever one of those message appeared on the screen. I want our players to have the same experience.

That’s all for this week. Until next time!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s