Now, we want to adjust the UI elements and place them on the screen. Select the Player Stats object from Hierarchy and look at the central graph panel. You will see some size controls that allow you to manipulate the size of the selected objects. Resize the elements so that you can see two sets of the words Text Block and two tiny gray progress bars stacked on top of each other.

The large rectangular outline in the Graph view represents the boundaries of the screen that the player will see, which is called the canvas. This is the Canvas Panel object that is at the top level of Hierarchy. Elements positioned toward the top-left corner of the canvas will appear in the top-left corner of the in-game screen. Since we want our health and stamina bars to appear in the top-left corner, make sure that the Player Stats object is still selected and move the entire group close to, but not touching, the top-left corner of the canvas.

Next, take a look at the Hierarchy panel again. Select the top progress bar underneath Player Stats Bars. In the Details panel, change the top label field to Health bar. Then, find the Size toggle under the Slot category, and click on the Fill button to adjust the vertical height of the bar. Finally, find Fill Color and Opacity under Appearance, and set the color to a shade of red.

Now, let's repeat this operation for the player's stamina. Click on the second progress bar. In the Details panel, click on the Fill button and set the progress bar's label to Stamina Bar. Find Fill Color and Opacity and adjust the color to something similar to green. Finally, click on the Player Stats Bars vertical box, and then on the Fill button, to scale the horizontal size of both the bars.

We have our meters looking as we want them to, so now, let's adjust the text labels. Click on the first text bar underneath Player Stats Text in the Hierarchy panel. In the Details panel, change the Text field under the Content category to Health, and click on the Align Right button next to Horizontal Align to position the text against the bar. If you wish to change the font size or style, then you can adjust it from the Font drop-down menus and fields underneath the Appearance category. After you have adjusted Health, click on the second textbox object. Change the Text field of this one to Stamina, click on the Align Right button, and adjust the font size and style to your liking.

The final bit of adjustment to make is to anchor the meters to a side of the screen. Since screen sizes and ratios can vary, we want to ensure that our UI elements remain in the same relative position on the screen. Anchors are used to define a Widget's desired position on a canvas, regardless of the screen size. To establish an anchor for our meters, select the Player Stats top-level object and then click on the Anchors drop-down on the Details panel. Select the first option that appears, which shows a gray rectangle in the top-left corner of the screen, as shown in the following screenshot:

This will anchor our meters to that corner, ensuring that they will always appear in the top-left corner, regardless of the resolution or ratio. If you want to add more nuances to the anchors, then you can click on the expansion arrow to the left of Anchors to expose the precision transform controls. By using this, you will have the ability to anchor an object to any point on the canvas. You can also accomplish the same effect by dragging the eight-leaved white flower shape that appears when you set an anchor at the location where you would like the anchor to be on the canvas.

You can now adjust the size and position of the Player Stats group of objects within the Canvas panel to mimic how you want them to appear in your game. The final product should look something like this:

We conclude the customization of the player stats UI elements. Now, we need some UI elements to display the ammo and enemy counters.