Creating Modular UI

By Will Fox

5/25/2023

Hey everyone! This is sad, but this will be my last blog post for the Slimegeon project. My group and I have finished the game up for final turn in and we will be graduating next week. So, thank you so much for reading. And thank you so much Carlos for your valuable feedback. 

Anyways! This week, the biggest thing I worked on was a modular UI widget for our player whenever they possess different enemies. So, why does the UI need to be modular? Well, since the player will actively be jumping from enemy to enemy, we want to make sure that the enemies skill PNGs are changed. Of course, the player will eventually become accustom to the abilities and everything, but it's still nice to show the abilities on the screen. The other thing that we want to do with these ability PNGs is show the cooldown. The way that I did this was by using a "progress bar" instead of a static image so that I could make the ability look like it was refilling so it can be used again.

Here's how I got started on the UI. First, I made a widget actor that contained 3 "progress bars." Note, this widget actor is NOT yet a part of the actual HUD. In Unreal, you can actually make a bunch of different widget objects and then put those widget objects into another widget object. In this case, the overall HUD contains the skill cooldown widget object. Next, I need to make sure to change the "progress bar" images based on what the enemy is that the player is possessing. The way I did this was by creating an enumerator that contained all of the possible possessable enemies including the slime. Then I put a logic check in the possess event to check what kind of enemy the player took over. After that, based on the enemy, I would call a function attached to the HUD that would take in an enumerator value. In that function, I used a switch statement to figure out what the enumerator is - Lich, Ghoul, Skeleton, Necromancer, Missile Turtle, or Slime - and based on that, it would call a specific function for the enemy. 

Each function would access the three "progress bars" inside of the HUD, and change the picture of them. This was actually a little difficult to figure out simply because Unreal wasn't wanting to show me all of the nodes that were available to me. See, whenever you're editing a widget with blueprint, you can access a property called "style." When you pull off of the style pin and try to access a specific property of style, nothing shows up. So, I had to do a bit of googling and found that there is a node called "Make ProgressBarStyle." Essentially what this node does is it makes a completely new progress bar based on the values you plug in. This is what it looks like.

As you can see, there's a ton of stuff you can throw into this node. But, more importantly, you can choose the image that you want to plug in. This means that based on the enemy that is being possessed, I can choose what skill image I want to use. You can also choose image tint and all of that jazz too. But, this is pretty much what works the magic! Now I just needed to do this for all of the enemies.

The last thing I needed to do was add a progress bar slide. I'll show you what I mean by that below.

As you can see from this image, the PNG is partially filled. Essentially what I want to do is make the PNG fill up over time based on the length of the cooldown for the ability. This was actually really easy to do but it just took a bit of time to do. All I needed was to go to each enemy and find their ultimate ability and their special ability and add a custom event that is connected to a timeline. To my knowledge, timelines aren't modular so you can't change the keys inside of them based on input values. So, the timelines are pretty hardcoded. But, all I needed to do was find the amount of time that an ability took to execute, and plug that into the timeline. Then, I just needed to access the HUD, access the Skills Widget Object, get the specific PNG square that the skill is attached to, and fill up the bar based on the timeline! Here is an example of that.

That's about it! This was a fun project since it was a break from programming AI. 

Thank you so much for reading though! Hopefully I will continue posting in the future for future projects.