☰
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

10. Polishing the health bar effect

Currently, our health bar works just fine, but it changes size in an uneven and jerky way. We'll use the Tween function to animate a smoother, and more finished looking size change.
Starting point file for this challenge

Your goal

Hint: show steps

Steps

1. Comment out the line of code that changes the health bar’s size

Commenting code out means the computer will ignore it. This is a really good way to “deactivate” lines of code without actually deleting and losing them. 

Put two -- in front of the line of code you want to comment out. 

2. Run the TweenSize function on the healthBar in a new line

The TweenSize function in Roblox creates a smooth transition between size changes.
healthBar:TweenSize()

3. Fill out the first parameter of the TweenSize function

The TweenSize function has a four main parameters:
  • Whatever size the health bar should END up at
  • The tweening direction
  • The tweening style
  • How long this animation should take
For the first parameter, we will use that UDim2 coordinate again. Copy and paste that in. 

healthBar:TweenSize(UDim2.new(currentHealth, 0, 1, 0))

4. Fill out the rest of the parameters

We still need to specify the tweening direction, style and length. 

For this example, we’re using the direction “in” and the style “linear.” 

Finally, we can set the animation to take 0.1 seconds long, but try experimenting with that number to see what happens. 
UDim2.new(currentHealth, 0, 1, 0), "In", "Linear", 0.1)

5. Test and delete the commented out line

Once you’ve tested your health bar again, and it’s working in a way you like, you can delete the old size change code that you had commented out.