Interactive Stratagem Popout Menu - Ryan Brown

A feature we’ve been planning to get implemented finally came together this week, with some important collaboration from our gameplay programmer, Keith Babcock. Stratagems, something we have modeled pretty much exactly on Helldivers 2, require a lot of moving pieces to get feeling intuitive and satisfying to use. I have spent the majority of the past few days working on the User Interface side of this problem, and I’m pretty happy with the results.

The first step in this process was making a structure holding necessary information about each stratagem that could be easily passed between the player and the widgets making up the HUD. Keith and I both realized this, and ended up merging our Stratagem structs together when we realized we had each individually made basically the same thing for the same purpose:

With a struct made, I could get to work on the Stratagem widget itself. This was made to be created by the HUD once the player spawns in, so it could pull from a list of stratagems related to the player state and add them each to an animated vertical box on the HUD itself (shown below).

The Stratagem Widget consists of an image to give a quick idea of what the stratagem does, a toggle-able display of charges depending on whether the attached stratagem has limited uses, the name of the stratagem, and a widget switcher for toggling between cooldown text and a horizontal box of inputs. Luckily, I also managed to find a nice font that makes "WASD" into arrows, so I could directly compare the code string to the input arrows. Here’s how that was done:

On failure, the input arrows are set back to their original color and have their opacity turned down, to convey that they are no longer the target input.

To bind the UI to the act of inputting stratagem codes, Keith gave me many delegates in the player controller related to the deployment of stratagems that I could create events for. OnStartCodeEntry, I reset the colors of all stratagem’s input arrows and play the animation to bring the stratagems on screen. OnCodeEntered I individually highlight successful inputs in blue as shown above. OnCodeSucceeded, I hide all stratagems except the one that had been successfully input to confirm the player’s selection. OnStopCodeEntry, I reverse the opening animation (on a delay for successful inputs to show the start of the cooldown timer). Finally, OnStratagemLanded, I call the UpdateStratagemLimits event shown below to update the number of charges left, and set a delay to switch back to the input arrow display when the cooldown has ended:

We ran into many issues over the course of implementing this seemingly simple interface element. It required a lot of back and forth to finally get it working the way we imagined it, including a complete refactor of the location the delegates I bound my events to in order to account for multiplayer. But without further ado, now that I’ve explained everything that went into this feature, I can show off the final result: