[Unity] 유니티 uGUI로 체력바 구현하기

안녕하세요! 오늘은 유니티에서 HpBar를 구현해보겠습니다.

모든 게임에서 hp를 나타내는 ui는 중요합니다. 간단하게 hpBar를 구현하는 방법에 대해 알아보겠습니다. 응용한다면 다양한 곳에서 쓰일 수 있습니다.

 

캐릭터 위에 떠다니는 hpbar를 만들어보겠습니다. 간략하게

1. 원하는 오브젝트 밑에 canvas 배치
2. Hpbar 관련 오브젝트 컴포넌트 배치
3. Hpbar 관련 코드 작성
4. 테스트

이런 순서로 진행해보겠습니다.

---

1.  오브젝트 아래에 Canvas 배치

Cube아래에 Canvas를 배치하고 아래에 hpBar , hpValue 오브젝트를 생성하였습니다. canvas는 World space로 조절해주시고 체력을 바라보고 있는 카메라를 넣어줍니다. 

 

2. Hpbar 관련 오브젝트 컴포넌트 배치

hpBar, hpValue 의 오브젝트에 각  image 컴포넌트를 추가해주시고 hpBar는 배경 hpValue는 실제 hp의 수치를 표시할 부분입니다. 여기서 중요한 부분은 Image Type 입니다.  타입에는 simple, sliced, Tiled, filled 가 있는데 이번에는 filled를 이용해서 수평 방향으로 줄어드는 모양으로 hpbar를 표현할 것입니다.  이것으로 에디터에서 먼저할 오브젝트, 컴포넌트 생성은 완료되었습니다.

 

3. Hpbar 관련 코드 작성

새로 HpBar라는 component를 작성합니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HpBar : MonoBehaviour
{
    public GameObject objHpBar;
    public GameObject objHpValue;
    Image imageHpValue;
    
    float HP_full = 100;
    float HP_Now_Value = 0;
    public float damage = 0.3f;

    // Start is called before the first frame update
    void Start()
    {
        HP_Now_Value = HP_full;
        imageHpValue = objHpValue.GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {
        if(HP_Now_Value > 0)
        {
            HP_Now_Value -= damage;
            imageHpValue.fillAmount = HP_Now_Value / HP_full;
        }
        else
        {
            Debug.Log("Dead!");
        }
    }
}

Start에서 최대 Hp와 지금 Hp를 같게 배치해주고 현재 hp를 표기할 image 컴포넌트를 받아옵니다. 그리고 update에서 매번 데미지를 빼서 image.fillAmount에서 배치합니다. fillAmount는 0~1의 float값을 받습니다. 

완성 후에 Cube아래에 스크립트를 배치하고 각 오브젝트와 damage수치를 넣습니다.

 

4. 테스트

실행해보면 적용된 것을 볼 수 있습니다.

 

 

지금까지 Hpbar를 간단하게 구현하는 방법에 대해 알아보았습니다.  hp를 표기하는 방법은 여러 방법이 있을 수 있습니다. 이 방법을 채택한 중요한 부분은 Canvas가 오브젝트 아래에 들어가 있어서 오브젝트가 움직여도 캔버스는 따라 움직이게 할 수 있기 때문입니다. 다음에 더 유익한 기능을 가져와 보겠습니다! 감사합니다!