[Unity] Slider를 이용하여 간편하게 체력바 만들기 (1)

1) Slider 생성

Hierarchy 창에서 우클릭 → UI → Slider

Canvas, EventSystem 등 Slider를 이용할 때 필요한 요소들을 자동으로 생성해줍니다.
(Slider를 막 생성했을 때의 Game 화면에서의 모습)

이것이 Slider 컴포넌트입니다.
우리는 체력바를 만들 것이기에 Transition과 Navigation은 None으로 설정해줍니다.
또한, 위의 GIF처럼 버튼을 잡고 움직일 것이 아니기에 Handle Rect에 있는 이미지를 없애줍니다.

2) 선행 작업

1, Transition, Navigation → None

2, Handle Rect 클릭 후 키보드에 delete 키 눌러서 None으로 만들기

3, Handle Slide Area 삭제 (필요없기에 삭제)

4, Interactable 해제 (Handle 역할을 하는 이미지를 없앤다고 하여서 Slider를 마우스로 못 움직이는 것이 아니기에, Interactable을 해제하여 마우스와의 상호작용을 막아줍니다.)

선행 작업 후의 모습

저는 준비한 이미지로
이렇게 만들어봤습니다.

3) 코드

다음으로는 코드입니다.
체력바의 가장 기본적인 코드입니다.

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

public class velogSlider : MonoBehaviour
{
    public float MaxHP;
    public float currentHP;
    public Slider HPBar;

    void Start()
    {
        currentHP = MaxHP;
        HPBar.maxValue = MaxHP; //slider의 MaxValue를 우리가 원하는 체력 최대치로 초기화
        HPBar.value = currentHP; //slider의 value 값을 현재의 HP 값으로 초기화
    }

    void Update()
    {
        HPBar.value = currentHP;
    }
}

체력바의 가장 기본적인 코드입니다.

using UnityEngine.UI;
using UnityEngine.EventSystems;

이 두개의 코드는 UI와 Slider를 이용하기 위해서 필수적인 코드이기에 빼먹지 않도록 주의합니다.

Inspector 창에서 값을 조정해주고 HPBar 변수에 Slider 컴포넌트를 드래그 & 드랍해줍니다
(currentHP 변수는 Inspector 창에 띄울 필요는 없지만, 원활한 테스트를 위해서 띄어놨습니다.)

4) 테스트

여기까지 하셨다면, 잘 작동되는지 테스트해봐야겠죠.
버튼과 위의 간단한 코드를 사용하여 테스트 해보겠습니다. (Attack 버튼을 클릭했을 때 HP를 10 줄입니다.)

로그에 뜨는 것처럼 HP도 10 줄어들고, 인터페이스에서도 HP가 줄어드는게 잘 보입니다.
잘 작동하네요.

참고 : How to make a HEALTH BAR in Unity!