Dynamic Material Instance UI
Coin Counter and Ability Cooldown Timers
During our Shrineflow prototyping playtests, I went through a lot of iteration of the standard win-condition and ability UI. I tested a lot of different types of widgets, such as texts or progress bars, and different elements, such as color, size and location. This constant and extensive iteration process led to my decision of what the UI needed to be for the stable build of the game. We needed colorful, large UI with drastic and obvious visual progression to make sure that players were noticing and utilizing these crucial pieces of information given to them.
The coin counter is the most important element of the HUD at all times. In the prototype, it was simply expressed as a text box with the amount collected out of amount needed to win (i.e. “5/10 coins collected”). This led to several players complaining that they didn’t realize that the ninja was about to win and end the game. This pushed me to change the counter to a progress bar along the top of the screen. This caused players to misunderstand how many coins were needed to win, leading to another redesign. Finally, both concepts were added together, with the progress bar and text underneath it on the top of the screen. As the prototype wrapped up, feedback was coming in that playtesters often forgot about this UI element as a whole due to its orientation and location.
As we moved into the stable build of the game, the counter style I decided would be best for the situation was a circular progress bar with the coin count in the middle. It was big enough to grab attention and the changes as coins were collected are drastic enough to help the players know that the game is becoming closer to the win condition. The final design is shown here:
This design required an interesting solution, as Unreal blueprint widgets do not support radial progress bars by default. This meant that I had to create a new material to incorporate this circular widget. I figured out how to make a dynamic material instance (MID) to update the progress in real time using the variable for coins collected found in the game mode. Sending parameters into this MID would allow the counter to update whenever coins were stashed by our ninja character, and it would show on both characters’ screens immediately. The logic for this MID is shown here:
This also required certain logic placed in the counter widget to make sure the MID parameter was updating correctly using the right variables. The logic is shown here:
The next task in the new stable build was to create ability cooldown timers to allow players to know when their abilities were available. The core experience of our game cannot be achieved without our players utilizing all of their cooldowns, as we’ve designed the entire game around those interactions. We needed a cooldown timer to be bright and colorful to make sure players remembered they existed, as well as make sure players knew when a cooldown was active or not. I asked the art director of the game to help me out with making icons, and guided his process to make sure they were reading correctly and efficiently. After first pass icons were created, I added them into the game to allow players to associate these abilities with particular visual icons. This helped the players better understand what each ability did, a problem we had in the prototype. The final design for the ability cooldowns had a radial progress bar, much like the coin counter. They look like this:
To accomplish this all, the cooldown timers themselves needed to have a dynamic widget for each ability that triggered when our GAS object for a particular ability was sent into cooldown. This required another MID system that I set up. This time it took in a particular ability icon that was tied to the selected ability (our players select 3 of 6 abilities) and threw it into the MID as a parameter. This MID was also set up to take parameters for current time remaining and max cooldown time for each ability as it updates. Here is the MID setup in the ability cooldown widget:
This MID was also set up to take parameters for current time remaining and max cooldown time for each ability as it updates. Here is the MID logic, as well as the logic placed in the ability cooldown widget to make sure these ability cooldown timers were updated properly:
As players had been playing our stable build in playtests, they had finally been using their abilities much more often. The UI decisions I had made over the last 4 months of the game’s development was very important for helping players feel this core experience. They are finally utilizing the information we give them to make the most out of the world we created for them to enjoy. For more finalized gameplay footage with my full UI, see our Rookies submission page by clicking the button below.