Hello, dear friends. In this Unity tutorial, we will create a Healthbar After watching this video, you will be able
to create a health bar easily. First, we will create a UI object for the Health bar. Then, we will write a C# script to control the health bar. Additionally, we will add an update animation to the health bar using DOTween. We will also add
color gradients into the health bar. Okay, Let's start by
creating the health bar UI. As you can see,
we have an empty scene. We will create everything
from scratch together. We have a white square and a circle object. Right-click on the Hierarchy panel and create an image object. I'm going to call it fill. Set the size of the image. Drag and drop the square sprite here. You can change the
color of the image. I will set the image type to Filled. I will change the
fill method to horizontal. The fill Amount property of an Image component represents the fill amount of the image as a normalized value between 0 and 1. For example, if the Fill Amount is set to 0.5, the image will be filled halfway. If it's set to 1, the image will be completely filled, and if it's set to 0, the image will be completely empty. I want to add a background to the fill image. Duplicate the fill image. Change the color as black. And change the image type to simple. To send the background
object behind the fill object, I will move it above the fill object. I'm going to create an empty object named HealthBar. And drag and drop the background and fill object into the HealthBar. Let's quickly take a look at the filled image type feature. You already know
the fill amount property. You can change
the fill origin to Left or Right. And you can change
the fill method to vertical. The radial method is
used for circular objects. We will provide an example soon. We will change the fill amount based on the player's
health value through code. Ok, let's create the health bar script. Select the canvas object and click on the
Add Component to create a new script. Let's open the script and remove the unnecessary parts. I will create float variables named max health and current health. And at the start of the game, I will set the current health
value to the maximum health value. I will create an image variable to hold the fill image. As you can see, the UI library is automatically added. If it's not added, you can add it manually. I will add the [SerializeField] attribute to be able to assign through the Inspector panel. I've created a public function named 'UpdateHealth'. And I will create a
function named 'UpdateHealthBar' to change the fill amount
value of the fill image. As you know, the fill amount value
ranges between 0 and 1. So I will divide the current health value by the maximum health value
to reach its normalized value. And I will set the fill amount value of the fill image
to the targetFillAmount value. And I will call the
UpdateHealthBar function every time the health value changes. Ok! save and go back to unity. Drag and drop the Fill object to the slot. I have created 4 buttons to change the health value. I'm going to add a click event to the buttons. Drag and drop the Canvas object here because it has the health bar script. And I will send the parameter value. I will apply the same steps to other buttons. Actually, the player's health value is changed within the code when the player takes damage or heals. But I have prepared this setup in a simple way for you to understand the logic of the topic. If you wish, I can create a video about how to use HealthBar in a game. Alright, let's start the game and test the health bar. As you can see, the health bar is working basically. Let's make some improvements. First, I will create a Text object to display our current health. I have created a text variable named 'healthText'. And I will update this Text whenever the player's
health value changes. Drag and drop the 'healthText' object into the slot. As you can see, the player's health exceeds the maximum health value and can also drop below zero. Let's see how we can solve this with just one line of code. We can keep the current health value within the minimum and maximum range using the Math.Clamp method. I want the current health value to be between
0 and the maximum health value. As you can see, the current health value does not go beyond the limits we set. Let's add an animation to the health bar for a smooth transition. We can achieve this
through various methods, but in this video, I want to show you how to do that using DOTween. It's really easy to do this with DOTween. Provide the target value as a parameter and specify how long it will take to reach the target value. I will create a float variable named fill speed. That's it! Save and go back to Unity. Set the fill speed and start the game. As you can see, the Health Bar is now updated smoothly. You can change the fill speed as you want. Let’s add Gradient color to the bar. I will create a gradient variable named color gradient. Every time the
UpdateHealthBar function is called, I will update the color of the fill object like this. Let's set the gradient colors. Change the Mode as Fixed. All right, the gradient colors are ready. Let's test it. The gradient color change is working properly. If you want, you can achieve smooth color transitions using DOTween. As you can see, we have a very smooth color transition. Nice! Horizontal HealthBar is ready. Now Let’s create a circle Health Bar. Delete the HealthBar Object. And I’ll create a new image named Circle Health Bar. Set the size of the image. And drag and drop the circle sprite into the slot. I'm going to move the
object up a little bit. Change the color of the image. Set the image type to filled. Set the fill method to radial. Select the Canvas object and drag and drop the Circle HealthBar object to the slot. That’s it. Start the game. I hope the video has been helpful for you. Thanks for watching. 🙏 See you in the next Unity tutorial. 😉 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
