유니티 체력바 표시

Intro

유니티 체력바 구현

플레이어 체력바

캔버스에 Slider를 추가하고 슬라이더 핸들을 제거한뒤 Fill Area의 색상을 붉게하고 Right Margin을 15에서 5로 수정하면 체력바 모양이된다. 그리고 체력의 숫자를 나타낸 텍스트도 추가했다.

체력 업데이트 C# 스크립트

public override void TakeDamage(int damage)
{
    int realDamage = damage - def <= 0 ? 1 : damage - def;
   
    InGameUIManager.instance.UpdateHpText(HP-realDamage); // 체력 텍스트 업데이트
      InGameUIManager.instance.HP = HP - realDamage; // 체력바 업데이트
}

피격시 UIManager에서 텍스트와 체력수치를 변경하고

 private void Update()
    {
        CurHP = (float)HP / (float)MaxHP;
       
        UpdateHpSlider();
    }

    public void UpdateHpText(int hp) // 피격시 실행
    {
        if(hp<0)
        {
            hp = 0;
        }
        hpText.text = hp.ToString(); 
    }

    private void UpdateHpSlider()
    {      
        hpSlider.value = Mathf.Lerp(hpSlider.value, CurHP, Time.deltaTime * 10);    // 체력 감소 선형보간
    }

UIManager에서는 hp 감소시 선형 보간을 통해 슬라이드가 깎이는듯한 효과를 주었다.

몬스터 체력바

캔버스 추가

몬스터의 체력바를 표시할 캔버스와 이를 합성할 카메라를 생성한다. HPCanvas의 Render Mode를 HPCamera로 설정

카메라 추가

HPCamera의 Clear Flag 설정을 Depth only로 설정해 빈공간을 투명처리하여 표시되는 체력바를 메인 카메라 화면에 합성되도록 한다. Depth는 1로 설정

체력바 프리팹 추가

슬라이더로 화면에 표시될 몬스터 체력바 프리팹 생성

체력바 스크립트

void Start()
{
    canvas = GetComponentInParent<Canvas>();
    hpCamera = canvas.worldCamera;
    rectParent = canvas.GetComponent<RectTransform>();
    rectHp = GetComponent<RectTransform>();
}

private void LateUpdate()
{
    var screenPos = Camera.main.WorldToScreenPoint(targetTr.position + offset); // 몬스터의 월드 3d좌표를 스크린좌표로 변환
       
    if (screenPos.z < 0.0f)
    {
        screenPos *= -1.0f;
    }

    var localPos = Vector2.zero;
     RectTransformUtility.ScreenPointToLocalPointInRectangle(rectParent, screenPos, hpCamera, out localPos); // 스크린 좌표를 다시 체력바 UI 캔버스 좌표로 변환

    rectHp.localPosition = localPos; // 체력바 위치조정
}

LateUpdate를 통해 update함수가 끝나면 받아온 몬스터의 월드 좌표를 스크린 좌표계로 변환시키고 이를 다시 HPCanvas의 로컬 좌표로 변환해서 업데이트 한다.(몬스터 위치에 맞게 체력바 이동)

이때 if문으로 스크린 좌표가 0보다 작을 때 -1을 곱해주는 이유는 메인카메라가 몬스터와 반대 방향을 바라보았을때도 체력바가 표시되는걸 막기위함이다.

체력바 생성 스크립트

hpCanvas = GameObject.Find("HPCanvas").GetComponent<Canvas>(); // 체력바 캔버스
hpBar = Instantiate<GameObject>(hpBarPrefab, hpCanvas.transform); // 체력바 생성
hpSlider = hpBar.GetComponentInChildren<Slider>();

var _hpbar = hpBar.GetComponent<MonsterHPBar>();
_hpbar.targetTr = this.gameObject.transform; // 체력바의 
_hpbar.offset = hpBarOffset;                 // 위치설정

몬스터 스크립트에서 캔버스에 체력바 프리팹을 생성시키고 체력바 위치값을 몬스터의 현재 위치를 넣어준다.

실행결과

참고자료

https://youtu.be/MO_XEHGzDLM