Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
UI Health Bar | Improve the Game
Fighting Game in Unity
course content

Course Content

Fighting Game in Unity

Fighting Game in Unity

1. Unity Animation System
2. Player Behavior
3. Enemy Behavior
4. Improve the Game
5. Improve the Flappy Bird Game

book
UI Health Bar

The Player class includes code to update the health bar UI based on the player's current health. This is managed through three variables: UIHealthTransform, HealthUIScale, and startingHealthUIWidth. Below is an explanation of how these variables are used to manage the health bar.

Script for Health Bar

Initialization in Start Method

In the Start method, the initial size of the health bar is captured and stored.

Health Update in GetAttacked Method

The GetAttacked method updates the health bar UI whenever the player takes damage.

Health Reduction:

The player's health is reduced by the amount of damage taken.

Health Bar Scale Calculation:

Explanation

This line of code updates the width of the health bar based on the player's current health. Here’s how it works:

Health: health is a float representing the player's current health. Let's assume it ranges from 0 to 100.

Starting Health Bar Width: startingHealthUIWidth is a float representing the initial width of the health bar when the player has full health.

Scaling the Health Bar Width: The goal is to proportionally reduce the width of the health bar as the player's health decreases; To achieve this, you need to calculate what percentage of the player's health remains and then apply that percentage to the initial width of the health bar.

Step-by-Step Calculation

Percentage of Health Remaining: Divide the current health by 100 to obtain a value between 0 and 1 representing the percentage of the player's health remaining. For instance, if the player's health is 75, health / 100f would yield 0.75. This calculation translates the health value into a percentage format suitable for UI representation.

Apply Percentage to Initial Width:

Multiply the percentage of health remaining by the initial width of the health bar. For example, if the startingHealthUIWidth is 200 (the full width), and the player's health is 75%, the new width of the health bar would be 150 units (0.75 * 200 = 150).

By using this calculation, the health bar's width dynamically and accurately represents the player's current health, providing clear visual feedback to the player.

Update Health Bar UI:

The size of the RectTransform representing the health bar is updated.

Check for Player Death:

If the health drops to 0 or below, the player is marked as dead, and the death animation and particles are triggered.

Summary of Health Bar UI Functionality

Initialization: The initial size of the health bar is captured at the start.

Updating Health Bar: When the player takes damage, the health value is decreased, and the width of the health bar is recalculated and updated accordingly.

Player Death: If health reaches zero, the player is marked as dead, triggering the death animation and particles, and finishing the game.

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 4
We're sorry to hear that something went wrong. What happened?
some-alt