User Interface - Updating when triggered

Here we are, we have almost finished our work on the User Interface. In the previous post we created the building blocks to update the interface when a DrawUI event is triggered from code. Now let's see how to actually draw the changes on screen.

Let's say we have 2 health points left out of 3. Then I want to draw 2 green ships icons, and 1 grey ship, like this:

I have to create 2 FOR loops: the first one from 1 to lives for the green ships; the second one from life + 1 to maxLives for the grey ships. (We created these variables here, in case you don't remember).

It could be easily done by code, but since I'm working on the HUD inside its blueprint, I will try to write this in the graph editor.

We already added 2 WrapBoxes to the HUD, one for health points and one for resources; the first step is to remove any object inside each box, so we can start from empty containers. Unreal gives us the useful method Clear Children, that we're going to call on each box:

Next, we have the first FOR LOOP:

Here we can specify the First Index (1), the Last Index (the variable Lives taken from our Player Controller object), what actions to perform on every iteration (Loop Body), and what to do when the Loop is over (Completed).

Let's move inside the Loop Body:

Here I'm getting an instance of the Life Green Widget we created in the previous post, and I'm adding it to the Life WrapBox. Because of Wrap Boxes default behaviour, all the images added as children will be displayed in a row, moving to the next line when the space is over (this shouldn't happen in our case if we sized the wrap box correctly).

Now, we can copy all the group to create the second loop:

This is the loop definition, where we set the First Index as Lives + 1 and the Last Index as MaxLives.

(Sorry for the bad connection lines, I resized it in Photoshop to better fit the screen size). 

And this is the loop body:

As you can see, we are still adding images to the Life WrapBox, but this time I'm creating and instance of the grey starship icon.

Now that you got the idea, let's do the same with resources; I won't go into details again, here's the process for the 2 loops: yellow resources and grey resources.

I simply copied the 2 loops groups I made before, substituting Lives with Resources, maxLives with MaxResources and Life WrapBox with Resource WrapBox. And I'm done!

All we have to do now is to connect this whole big block of instructions  (I commented it as "Redraw UI") to our DrawUI event:

As you can see, I also chained it to the end of the Event Construct block, so that the UI is also drawn at the beginning of gameplay.

Now, if you start the game and go crash your ship against an enemy, you should see your green health points decrease by 1.

While thinking about the User Interface, I thought it would be cool to see the Repair and Deploy Mine buttons disabled in case I don't have enough resources to use them; so I created a simple gray rectangle and placed it over the 2 buttons, with an opacity of 0.7:

This will be the look of the buttons in "disabled" state. To enable them, it will be enough to set the visibility if the rectangles to hidden.

I created 2 new boolean properties in the MyPlayerController class: RepairAvailable and MineAvailable.

Using the Branch function (the "if" instruction of Unreal Script") I will set the Visibility of the 2 images, that I called ResourceDisabled and MineDisabled:

First block: Repair Button

Second block: Mine Button

Once I have a working resources collection, it's just a matter of setting the boolean variables to true or false accordingly, and fire the DrawUI event to trigger the User Interface update.

For the moment we're done with our User Interface, next time we'll go back into gameplay!

Thanks for reading, and game you next time!