[Unity] 유니티 슬라이더로 HP UI 만들기 (Slider HP)

안녕하세요.

 

간단하게 캐릭터의 HP를 유니티 슬라이더로 제작하려고 합니다.

 

일단 전에 만들었던 방식으로 Slider를 생성합니다.

 

 

1. Hierarchy에서 오른쪽 클릭해서 UI - Slider로 슬라이더 오브젝트를 생성

 

2. Background, Fill Area, Handle Slide Area 설정

Silder에는 Background, Fill Area, Handle Slide Area로 구성되어있는데,

Handle Slide Area는 슬라이더 조절이 필요하지 않기 때문에 이건 비활성화(disable)합니다.

 

 

 

3. 배경색과 채워졌을 때 색을 설정합니다.

(1) 배경색 변경(Canvas-Silder-Background)

 

(2) 채워졌을 때 색 변경(Canvas-Silder-Fill Area-Fill)

4. 값이 다 채워졌을 경우를 위해 Cavas - Slider - Fill Area에 Right수치 변경

값을 맥스값으로 설정했을 경우에도 다 채워 지지 않은걸 볼 수 있습니다.

 

 

이 경우에는 Cavas - Slider - Fill Area에 Right수치를 5로 변경하면 다 채워지는 것을 볼 수 있습니다.

 

 

5. 슬라이더 값이 0일 때 처리

슬라이더 값이 채워질때 사용하는 소스 이미지 모양이 네모난 모양입니다.

그로 인해서, 0일 경우에도 이미지가 남아있는 것을 볼 수 있습니다.

 

이것을 해결하기 위해서는 슬라이더가 아닌 직접 만드는 방식을 사용할 수 있습니다.

https://www.youtube.com/watch?v=l11fkFoFfrg

하지만 여기서는 순수 Slider만 사용할 것이기 때문에, 0일 경우 Fill Area를 비활성화시키고, 0 이상일 경우 활성화하는 방식을 사용하겠습니다.

 

스크립트를 추가하겠습니다.

 

Slider에서 Add Component 클릭하여 스크립트를 추가합니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  // Silder class 사용하기 위해 추가합니다.
 
public class TestSlider : MonoBehaviour
{
    Slider slHP;
    float fSliderBarTime;
    void Start()
    {
       slHP = GetComponent<Slider>();
    }
 
 
    void Update()
    {
        if (slHP.value <= 0)
            transform.Find("Fill Area").gameObject.SetActive(false);
        else
            transform.Find("Fill Area").gameObject.SetActive(true);
    }
}

 

Slider에서 값을 임의로 바꿔서 제대로 실행되는 지 확인합니다.