Screen Space, World Space, and the Camera - Unity 3D UI Essentials - page 178

Since we are almost repeating what we did earlier in Chapter 4 , Anchors Away , for the
health bar, we will quickly whip through the steps for creating the Top blue health
bar, which will be for our shields:
1. Right-click on the HealthUIPanel panel and select UI | Slider .
2. Expand the new slider in the project hierarchy and delete the Handle
Slide Area .
3. Select the Slider and set the Target Graphic to the Slider's Fill GameObject
(which is a child of the Fill Area ).
4. Click on the Handle Rect property and hit Delete (or click on the circle icon
to the right of the property and select None ).
5. Click on the Anchor Presets of the Slider and hold Alt and click on the
Top Stretch option (second from the top on the far right).
6. Bring in the left and right sides of the Slider (about 10 for Left and Right).
7. Select the Background GameObject (child of the slider) and set the Source
Image to the Slider_Top sprite.
8. Resize the slider to give it a chunkier look (either by resizing the slider itself
or altering the Background GameObject).
9. Select the Fill GameObject and set the Source Image to the
Slider_Bar_Top sprite.
10. With the Fill GameObject selected, alter its Rect Transform handles to dock
with its parent size (maximizing the Fill area's Rect Transform ).
11. Still with the Fill GameObject selected, click on the Color property and set it
to dark blue (H 244, S 255, V 255, A 255).
12. Select the Fill Area GameObject and resize it so that it covers the bar portion
of the Slider Background image.