User Interface - Displaying a HUD

Now that we have collisions, I think it's time to show some informations to the player: let's implement a user interface!

The first step was to put down a mockup of my idea in Photoshop. I modeled some simple panels in Blender and I placed them around in the screen, trying to choose places where they don't cover any tile of the grid:

On the left, I have a button to select the game options (this will also pause the game).

On the right, from top to bottom:

- Health panel. In green, we have the current health points left, and in grey the max number of health points (I plan to increase them to 4 in advanced levels, that's why I left some space on the right).

- Resources panel. In yellow, the collected resources, and in grey the max collectable ones.

- Repair button. Pressing this button, the ship will be repaired (if there are enough resources available).

- Mine button. This button will deploy a mine.

That's all I need for now, so I created 2 different images for left HUD and right HUD:

left HUD

right HUD

And I saved them as PNG to keep the transparent background. Then I created 4 different PNG images for the green health, grey health, yellow resource and grey resource:

Then I imported all the images in my Unreal Engine project, and I created a new Widget Blueprint.

Widgets are the objects used to create the User Interface; you can think them as layers added on top of the game screen: to create a new one, just click Add New > User Interface > Widget Blueprint.

I called this blueprint HUD, because this will be the main class where all the interface objects will be rendered. The widget comes with a Canvas Panel, and all objects will be children of this canvas.

I added an "Image" object to the canvas, and in its properties I chose the "Left HUD" image. Then I did the same for the "Right HUD" image, but this time I changed the Anchor property to Top Right, so that it will be anchored to the top right corner of the screen, no matter what screen size I will choose:

Next, I added 3 buttons, and I renamed them "Repair Button", "Mine Button" and "Options Button". I moved them right above their respective positions, and changed their Alpha channel to 0.0 in the "Appearance" panel:

Now, they'll be clickable but not visible; I also changed their ZOrder to 1 to be sure they're always on top of the background images.

Then I created 2 Wrap Boxes and renamed them "Life_WrapBox" and "Resource_WrapBox". Wrap Boxes are container elements that arrange their children items from left to right: just what we need for our health points and resources. I moved them loosely above their respective panels; I'll fine-tune their position and size later. This is the final result, with wrap boxes and buttons highlighted:

The visual part of the UI is done, but it won't be automatically added to our game screen; we need to instantiate it and add it to the viewport. In order to do this, I opened the Level Blueprint and added the following blocks to the existing "Begin Play" chain:

One last step is to create 4 new Widget Blueprints, one for each image of health points and resource; they'll be needed later, to dynamiaclly add the little icons to the wrap boxes.

I named them Life_green, Life_grey, Resource_green, Resource_grey. These will be children widgets, so we can delete the Canvas Panel that is automatically created, and add an Image instead. For each of them, select the proper image in the Properties tab, and we're done.

Playing the game now, you should see a User Interface similar to the mocked-up one we arranged in Photoshop (Not functional yet, but we'll take care of that in the next post!)