Laying out a basic HUD

We will make a HUD that will look like the following:

It will be expanded upon in the upcoming chapters, but, for now, it'll have a pretty simple layout that will focus on parent–child relationships and anchor/pivot point placement.

To create the HUD shown in the preceding image, complete the following steps:

1. Create a new Canvas using Create | UI | Canvas.
2. In the Canvas Inspector, change the name to HUD Canvas.

3. It is best to set up all of your Canvas Scaler component information before you even begin adding elements to the UI. If you try to do it afterward, you may find that your UI elements will start rescaling. We'll work with an ideal resolution of 1024x768. If you look at the pinkBackground image (that we'll apply in the next example), it has a resolution of 2048x1536; 1024x768 has the same aspect ratio as the background image. So, set your Canvas Scaler component to the following settings:

We have set the Screen Match Mode to Match Width Or Height with the Match settings set to 1 so that it maintains the ratios in the vertical direction. If you remember from the Scale with Screen Size section, I find that this works best for most games made with a landscape resolution.

4. Set your game view Aspect to Standalone 1024x768 so that you will see everything scaled appropriately. (Refer to the Changing the Aspect Ratio and Resolution of the Game View section for directions.)
5. Since we only have one Canvas, when we add any new UI elements to our scene, they will automatically be made children of our HUD Canvas. Create a new Panel using Create | UI | Panel, and rename it HUD Panel. You will see that it is a child of the HUD Canvas. This Panel will represent the rectangle that holds all the HUD elements.

6. Click on the Anchor Presets icon and select the top-left Anchor Preset while holding down Shift + Alt.

7. Expand the uiElements image by selecting the arrow on its right. Locate the uiElements_1 subimage:

8. Drag uiElements_1 to the Source Image slot of the Image component on the HUD Panel:

9. Currently, the Panel is very faint and stretches across the whole scene. Let's make it easier to see by increasing the opacity. Click on the white rectangle in the Color slot of the Image component to open up a color picker. Move the Alpha slider all the way to the right or input the value 255 in the alpha value slot:

As shown in the preceding screenshot, it should be a lot easier to see the Panel now:

10. Click on the checkbox next to the Preserve Aspect setting in the Image component:

11. The Panel will now take up only the top portion of the scene:

12. This property will make the image always maintain the aspect ratio of the original image, even if you set the width and height of the Image to something that does not have the same aspect ratio.

13. You'll note, from the Rect Transform component, that the Width and Height are still set to 1024 and 768, respectively. You can also see more easily from the Scene view that the Rect Transform expands past the viewable region of the image. So, the object is much larger than it appears to be.

14. Let's rescale the Rect Transform of the Panel so that it matches the size we are looking for and hugs the viewable image better. Change the Width to 300 and the Height to 102. The Rect Transform won't be a perfectly snug fit in the vertical direction, but it will be pretty close.

15. We now have the main Panel set up. Since all other images will be contained within the HUD Panel, we want to make them children of the HUD Panel. That way, when the screen rescales, the other images will remain "inside" the HUD Panel and will maintain their size relative to the HUD Panel.
16. Let's start with the Image that holds the cat character's head. Right-click on the HUD Panel and select UI | Image. You'll see that it is a child of the HUD Panel. Rename it Character Holder.
17. Place the uiElement_6 image in the Source Image slot and select Preserve Aspect.

18. Since the Character Holder image is a child of the HUD Panel, any anchoring we set will be relative to the HUD Panel. Choose the left-stretch Anchor Preset while holding Shift + Alt. Also, set the position and dimension variables, as shown:

19. Let's add the image for the cat head. We want it to fully fill out the slot represented by the Character Holder image. So, we will make it a child of the Character Holder image. Right-click on Character Holder and select UI | Image. Change its name to Character Image.
20. Now add the catSprites_0 subimage to the Source Image of the Image component and select Preserve Aspect.
21. Set the Anchor Preset to stretch-stretch while holding Shift + Alt:

22. Since we ensured that we have the Rect Transform of the Character Holder fit snuggly around the holder's image, it should make the cat's head fit perfectly within the holder image without having to adjust any settings!:

23. Now we are ready to start making the health-bar. We will create it similar to the way we made the Character Holder and Character. Right-click on the HUD Panel and select UI | Image. Rename the new image Health Holder.
24. Place the uiElement_20 image in the Source Image slot and select Preserve Aspect.
25. Set the Rect Transform properties as shown in the following image and ensure that you hold Shift + Alt when selecting the Anchor Preset:

26. Now all we have left is the health bar! Just as we made the cat head image a child of the Character Holder, we will need to make the health bar's image a child of the Heath Bar Holder. Right-click on the Heath Bar Holder and select UI | Image. Rename the new image to Health Bar.
27. Place the uiElement_23 image in the Source Image slot. This time we will not be selecting Preserve Aspect, because we want the image to scale this image horizontally.

28. Set the Rect Transform properties, as shown in the following screenshot, and ensure that you hold Shift + Alt when selecting the Anchor Presets:

29. Note that a little padding was added so that you can see the edges of the Health Holder.
30. We're almost done. Right now, the pivot point of the image is right at the center. This means if we try to scale it, it will scale toward the center. We want it to be able to scale toward the left, however. So, open the Anchor Presets and while holding Shift only, select middle-left. This will cause only the pivot point to move.

31. Now when we adjust the Scale X value on the Rect Transform, the health bar will scale toward the left:

That's it for our HUD example! Try changing your Game view's aspect ratio to different settings so that you can see the Panel scale appropriately and see all the object relative positions maintained.

If your HUD is doing some wonky stuff when you change the Game's aspect ratio, ensure that your objects have the correct parent-child relationship. Your parent–child relationships should be as follows:

Also, check to ensure that the anchor and pivot points are set correctly.