☰
1. Open Roblox studio and load the starter kit 2. Test it out 3. Group Activity: Parent and Child Sizes 4. Create a health bar container 5. Create the health bar 6. Create a local script 7. Access the player and health bar UI 8. Write a function to update the health bar 9. Test and adjust 10. Polishing the health bar effect 11. (Optional) Turn off the default GUI 12. (Optional) Push the visual design

Project 566: Custom Health Bar

4. Create a health bar container

This will be a GUI Frame that will act as the background for our eventual health bar. When you resize this, you'll want to make sure you keep the X and Y offset's to 0.
This challenge doesn't have a starting point

Your goal

Hint: show steps

Steps

1. Find the StarterGui folder inside the Workspace folder.

Find your Explorer window, and then near the top find the Workspace folder. 

Open up the Workspace folder, then find your StarterGui folder inside.

The StarterGui folder will hold all of our GUI objects. 

2. Add a ScreenGui object

Click on the blue plus button next to the StarterGui folder, and add the ScreenGui object. 

3. Add a Frame to the ScreenGui

Click on the blue plus button next to the ScreenGui object, and add the Frame object. This means the Frame is a child of the ScreenGui. 

4. Rename the Frame to "Container"

This isn't technically necessary to making your code work, but it does help you stay organized. It's always good to name the objects in your game! 

5. Resize using the properties window, NOT stretching it

Your first instinct may be to grab the white blocks around your new frame to resize it, but this does not resize your frame properly! All it does is change the "offset" property. (Later, in our code, we'll be changing the "size" property, so let's stay consistent.)

Keep the "offset" at 0, and use the "size" property instead.

Go into the properties window of your frame, and scroll down until you see the "Size" property. Open this up, and then open up the "X" and "Y" properties. 

Now, find the "scale" property. The scale is actually really huge by default, so in the example, we've used X: 0.15 and Y: 0.025. Of course, you can use whatever values you like. 

6. Move the bar wherever you like

Use your mouse to click and drag the Container anywhere on the screen. Most games have health bars in the corners, or at the top or bottom edges of the screen. 

7. (Optional) Remove the frame border

This is a stylistic choice, if you don't like the border around your health bar. 

Underneath the color property in the Properties window, find a property called BorderSizePixel. Change that to 0.