[TIL] Unity 최종프로젝트 몬스터 HP바 만들기

2025.04.11 - [Unity] - [TIL] Unity 최종프로젝트 몬스터 AI 구현하기(오브젝트풀)_ 4일차

[TIL] Unity 최종프로젝트 몬스터 AI 구현하기(오브젝트풀)_ 4일차

이 게시물의 영상을 보면 몬스터의 HP가 깎을 때마다 UI에 반영되어 줄어드는 것을 볼 수 있다.

오늘은 HP UI를 만들고 만든 UI가 회전되지 않도록 스크립트를 수정하는 내용을 다룰 것이다.

 

1. HP바 UI 만들기

하이어라키 창 -> UI -> Image를 눌러 HP바의 배경과 실제로 줄어드는 이미지를 두개 생성하고 프로젝트 창에서 스프라이트를 만들어 준다.

만든 스프라이트를 실제로 줄어드는 HP바 이미지의 Source Image에 넣어주고 이미지 타입을 Filled로 바꿔준다.

캔버스의 RenderMode 를 World Space로 만들고 만들어진 캔버스를 몬스터 오브젝트의 하위에 새로 만든 빈 오브젝트에 넣어준다.

하위에 넣은 후 UI가 몬스터의 머리 위에 있도록 적당한 크기와 위치를 조절해주면 끝이다.

 

2. MonsterHPUI 스크립트 생성

using UnityEngine;
using UnityEngine.UI;

public class MonsterHPUI : MonoBehaviour
{
    [SerializeField] private Image hpBar;

    [SerializeField] private MonsterController monster;
    [SerializeField] private Camera mainCam;

    void Start()
    {
        if (mainCam == null)
        {
            mainCam = Camera.main;
        }
        if (monster == null)
        {
            Debug.Log("없어");
        }
        UpdateHP(monster.Data.monsterHP);
    }
    void Update()
    {
        if (mainCam != null)
        {
            Vector3 dir = transform.position - mainCam.transform.position;

            transform.rotation = Quaternion.LookRotation(dir);
        }
    }

    public void UpdateHP(float currentHP)
    {

        float fill = Mathf.Clamp01(currentHP / monster.Data.maxHP);
        hpBar.fillAmount = fill;
    }
}

몬스터가 회전해도 UI는 회전하지 않도록하며 HP의 비율을 UI에 반영시키는 역할을 한다.

 

void Update()
{
    if (mainCam != null)
    {
        Vector3 dir = transform.position - mainCam.transform.position;
        transform.rotation = Quaternion.LookRotation(dir);
    }
}

• 매 프레임마다 HP UI가 카메라 방향을 바라보도록 회전한다.
• dir은 카메라에서 HP바를 향하는 벡터이다.
• LookRotation(dir)을 통해 해당 방향을 정면으로 설정한다.

public void UpdateHP(float currentHP)
{
    float fill = Mathf.Clamp01(currentHP / monster.Data.maxHP);
    hpBar.fillAmount = fill;
}

• 몬스터의 체력을 최대 체력으로 나눈 비율을 구한다.
• Mathf.Clamp01은 값이 0~1 사이로 고정되도록 한다.
• Image.fillAmount에 그 비율을 설정해서 UI에 반영한다.

 

3. 실행해보기

- 수정 후

 

- 수정 전

수정 전은 UI가 회전하는 것이 보인다.