☰
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

3. Group Activity: Parent and Child Sizes

We're going to be using the parent/child hierarchy a lot for building a GUI. It's important to realize that children will inherit the size and positions of their parents. This can make designing a GUI confusing! 

Instructor Notes

This group activity has an example file to mess around with, in the Starting Point. I would probably just download it on YOUR computer and run through it on the screen rather than ask everyone to download it too.

There are answers to the questions in the steps, so I might keep it locked for everyone, and use the steps for yourself. 
Starting point file for this challenge

Your goal

Hint: show steps

Steps

1. Example project on the screen

When a GUI object goes on the screen, it will scale to whatever parent is holding it. Here's a rectangular frame. What is the parent of this frame? 

It's the ScreenGui object, which takes up the whole screen currently.

2. How to make a frame with the exact dimensions of the first

How would we make a frame that's the exact same size as this one? 

We'd duplicate it! This works perfectly. 

3. Making the duplicate a child of the first frame

What might happen if we put this frame inside the first one?

A child will scale to whatever parent is holding it so ... It completely shrinks! (Change the color of the duplicate to see more obviously how it shrinks.)

Even though the duplicate frame AND the original frame are both 0.5 x 0.3, they have totally different parents. Which has the larger parent? (The original frame has the larger parent, being the ScreenGui.) 

How do we fix this, while still keeping the duplicate frame a child of the first frame? How might we make sure the duplicate frame actually fills the ENTIRETY of its parent frame?

(You'd make it 1x1.)

4. Changing the size property to be 1x1

The size property is in the properties window. Change both the X and Y to be 1. 

5. Fixing the position

Oops, when you do that, it messes up the position, too!

The original frame's X and Y coordinates are based off its parent, which is the entire screen. The duplicate frame's X and Y coordinates are based off its parent, which is very small.

How would we reset the duplicate frame to be in the EXACT MIDDLE of its parent? What X and Y coordinates bring us to the middle of something?

(You'd make it 0, 0.)