Unity 체력 UI 만들기

Unity에서 Slider을 통해 캐릭터 체력을 만들어보자.

 

※본 글에서는 몬스터나 캐릭터 위에 뜨는 HP 체력바가 아닌 배틀그라운드 같은 게임처럼 특정 지점에 존재하는 체력 바를 구현할 것다.

 

1. 먼저 Slider 오브젝트를 추가해주자

UI -> Slider

Slider을 생성 했을 때 기본 형태

 

2. 다음으로 Handle은 필요없으므로 지워주도록 하자.

혹시나 특정 이미지로 Slider바를 조절을 원할 경우 image에 내가 원하는 이미지를 넣어주면 된다.

 

 

Slider 컴포넌트

속성명	설명
Interactable	슬라이더를 사용자가 조작할 수 있는지 여부 설정
Transition	슬라이더 핸들에 적용할 전환 방식 (ex.Color, Tint, Animation 등)
Target Graphic	전환 효과를 적용할 UI 그래픽 (Handle 이미지)
Color 설정들	Normal, Highlighted, Pressed, Selected, Disabled 색상 설정
Color Multiplier	전환 색상의 강도 조절
Fade Duration	색상 전환이 완료되기까지의 시간
Navigation	키보드/컨트롤러 방향 이동 설정 방식 (예: 자동, 수동 등)
Fill Rect	슬라이더 채워지는 부분의 RectTransform 참조
Handle Rect	사용자가 드래그하는 핸들의 RectTransform 참조
Direction	슬라이더가 이동하는 방향 (예: Left To Right, Bottom To Top 등)
Min Value	슬라이더의 최소값
Max Value	슬라이더의 최대값
Whole Numbers	값이 정수만 가능하도록 설정 (체크하면 소수점 안 됨)
Value	현재 슬라이더의 값
On Value Changed	값이 변경될 때 호출되는 이벤트 리스너

위 표는 Slider 컴포넌트의 속성들이다. 진하게 칠한 부분은 우리가 자주 쓰는 속성이니 숙지하고 넘어가자.

 

3. 다음으로 HP의 색은 Fill 오브젝트에서 바꿔주면된다.

 

 

여기서 질문이 있을 수 있는데 Value 값을 0과 1일 때 체력바가 꽉 차거나 줄지 않아요

Value 값을 0인데도 체력이 조금 남아있는 것처럼 보인다. 이 현상은 Fill의 Transform을 만져 간단하게 해결할 수 있다.

Fill에서 Width가 기존에는 10일텐데 이걸 0으로 바꿔주면 된다.

Fill Area의 Transform도 모두 0으로 바꿔주자

 

 

 

빠르게 동영상으로 세팅해보기

 

 

 

4. 기본적인 세팅은 끝났다. 이제 코드를 사용하여 HP를 조절해보자.

using UnityEngine;
using UnityEngine.UI;

public class PlayerHP : MonoBehaviour
{
    // 싱글톤 구현
    public static PlayerHP instance;
    public Slider hpSlider;
    private int maxHP = 100;
    private int currentHP=100;
    float hp;

    private void Awake()
    {
        if (instance == null)
        {
            instance = this;
        }
        else
        {
            Destroy(gameObject);
        }
    }

    private void Start()
    {
        //hpSlider의 value 값 = 현재 체력 / 최대 체력
        hpSlider.value=(float)currentHP / (float)maxHP;
    }

    private void Update()
    {
        if(currentHP<=0)
        {
            GameOver();
        }

        HandleHP();
    }
    
    //플레이어의 체력이 깎였을 때 함수 (외부에서 사용하기 위해서 public 함수)
    public void TakeDamage(int damage)
    {
        if(currentHP>0)
        {
            currentHP -= damage;
        }
    }

    public void HealHP(int heal)
    {
        currentHP += heal;
        if (currentHP > maxHP)
        {
            currentHP = maxHP;
        }
    }
    
    //선형보간 Math.Lerp를 사용하여 피가 천천히 깎일 수 있도록 함 
    void HandleHP()
    {
        hp = (float)currentHP / (float)maxHP;
        hpSlider.value = Mathf.Lerp(hpSlider.value, hp, Time.deltaTime * 5f);
    }

    private void GameOver()
    {
        GameManager.instance.EndGame();
        Debug.Log("Game Over!");
    }
}

 

5. 다음 코드를 플레이어에게 집어넣고 아까 만든 HPBar를 넣어주면 끝이다.

 

이제 특정 조건에서 플레이어의 체력을 깎고 싶다면 해당 코드에 한줄만 적어주면 끝이다.

PlayerHp.instance.TakeDamage(체력깎인정도)