유니티 체력바 구현하는 법

 

 

썸네일

게임에서 체력바는 매번 구현할 때마다 템플릿이 필요하다고 생각했습니다.

물론 이 글의 체력바는 모두 UI로 구현하고 있고 Sprite로 구현 가능합니다.

참고로 이글에 있는 체력 UI는 WorldSpace 렌더 모드의 캔버스로 만들었습니다.

 

자세한 WorldSpace 렌더모드 설정은 아래 글에 ↓

유니티 Canvas의 World Space 렌더 모드로 UI 만들기

 

 

---

#1 기본 체력바_Slider

 

우선 가장 기본적인 체력바입니다.

유니티의 UI에 있는 기본적인 Slider를 사용한 방법입니다.

먼저 슬라이더 하나를 생성해줍니다 ↓

UI -> Slider

 

 

Slider를 생성하면 사진처럼 하이어라키와 Scene에 기본 슬라이더 템플렛 하나가 생성됩니다.

 

이걸 개조하면 우리가 아는 HP바가 되는데 다음과 같은 과정을 거치면 됩니다.

 

1. 하이어라키에 있는 Handle Slide Area 오브젝트를 삭제합니다.

2. 하이어라키에 있는 Fill 오브젝트를 눌러 색상을 빨강으로 바꿉니다.

 

그러면 사진처럼 HP바가 만들어졌을겁니다.

 

여기서 사진의 빨강색 게이지는 어떻게 변경될까요?

Slider -> Value

바로 슬라이더 컴포넌트에 있는 Value 값을 변경하면 됩니다.

 

이제 스크립트에서 저 Value 값을 바꿔 제대로 작동하는 HP바를 구현해봅시다.

 

using UnityEngine.UI;

네임스페이스 참조

protected float curHealth; //* 현재 체력
public float maxHealth; //* 최대 체력
public void SetHp(float amount) //*Hp설정
{
    maxHealth = amount;
    curHealth = maxHealth;
}

변수를 선언해준 뒤 SetHp로 초기 체력을 셋팅해줍니다.

public Slider HpBarSlider;

public void CheckHp() //*HP 갱신
{
    if (HpBarSlider != null)
        HpBarSlider.value = curHealth / maxHealth;
}

public void Damage(float damage) //* 데미지 받는 함수
{
    if (maxHealth == 0 || curHealth <= 0) //* 이미 체력 0이하면 패스
        return;
    curHealth -= damage;
    CheckHp(); //* 체력 갱신
    if (curHealth <= 0)
    {
		//* 체력이 0 이하라 죽음
    }
}

위와같이 체력을 갱신해줄 때  Slider의 value 값에 체력값을 표시해주면 됩니다.

 

그러면 데미지 받을 때마다 갱신되는 체력바이 완성됩니다.

 

 

---

#2 기본 체력바_Image

 

이번엔 UI의 기본적인 Image의 속성을 이용한 방법입니다.

테두리는 밑에서 설명할 것이고 우선 빨간색 게이지를 구현해봅시다.

 

단순한 1x1 픽셀의 화이트 이미지

위는 이번 체력바에 사용할 이미지의 셋팅입니다.

이제 Canvas 아래에 Image 오브젝트 하나를 생성해서 위의 이미지를 넣어줍시다.

그러면 처음에 Image 컴포넌트가 이렇게 되어있을겁니다.

 

1. Image Type의 설젇을 Simple -> Filled로 바꿔줍니다.

2. 밑에 Fill Method 옵션 생기면 Horizontal로 바꿔줍니다.

 

이렇게 하면 아래와 같은 모양이 나옵니다.

 

이제 색깔만 빨강색으로 바꾸면 게이지 완성입니다.

이제 테두리 바탕을 구현할껀데 여기서 Outline 컴포넌트를 사용합니다.

 

1. 우선 위의 게이지 이미지의 오브젝트를 복붙해서 BG라고 이름을 지정합니다.

2. 같은 크기인 상태에서 오브젝트에 Add Component를 눌러 Outline 컴포넌트를 붙여줍니다.

 

 

위와같이  Outline 컴포넌트를 붙여준 뒤 아래처럼 세팅하면됩니다.

 

그럼 이렇게 간단한 체력바 UI가 만들어집니다.

테두리 크기는 Effect Distance를 통해 조절하면됩니다.

 

이제 코드에서 HP바 이미지의 게이지를 조절해서 사용해봅시다.

using UnityEngine.UI;

[SerializeField] private Image barImage;

private void ChangeHealthBarAmount(float amount) //* HP 게이지 변경 
{
    barImage.fillAmount = amount;

    //* HP가 0이거나 꽉차면 HP바 숨기기
    if (barImage.fillAmount == 0f || barImage.fillAmount == 1f)
    {
        Hide();
    }
}

위와같이 체력을 갱신해줄 때  Image의 fillAmount값에 체력값을 할당해주면됩니다.

 

이렇게 Image와 간단한 Outline으로 갱신되는 체력바가 완성됩니다.

 

 

---

#3 번외) 카메라를 항상 바라보는 HP바로 만들어주기

 

잘못된 예

위 사진처럼 카메라를 바라보지 않는다면 HP를 확인하기 어렵습니다.

때문에 항상 카메라를 바라보도록 HP바에 코드를 추가하도록 합시다.

 

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

public class LookAtCamera : MonoBehaviour
{
    private void LateUpdate() {
            case Mode.CameraForward:
                //* 카메라 방향으로 Z축 (앞뒤)을 바꿔주기
                transform.forward = Camera.main.transform.forward;
                break;
            default :
                break;
        }
    }
}

 

ENG FRN

 

대상 UI가 항상 카메라를 바라보는거 외에 다양한 모드가 있습니다.

 

 

유니티 오브젝트를 항상 카메라 바라보게 만들기

유니티 오브젝트를 카메라 바라보게 만들기

 

 

+) UI가 아닌 Sprite Renderer으로 체력바 구현

https://chopchops.tistory.com/8

[Unity] Unity2D Sprite Renderer를 이용한 캐릭터 체력바 구현