[UI] 슬라이더 UI

UI중에 슬라이더에 대해서 작성해보겠다. 슬라이더는 보통 경험치 바, 체력 바 이런곳에 쓰인다.

우선 하이어라키 창에 마우스 우클릭 -> UI -> Slider를 추가 해주자. 그럼 다음과 같이 슬라이더 오브젝트가 만들어진다.

하이어라키창에서 Slider를 클릭해서 인스펙터창으로 보면

다음과 같이 되어 있는데 여기서 Value값이 슬라이더의 게이지가 얼마만큼 찼는지를 결정한다. 최댓값은 1이다. 1이 되면 게이지가 가득 찬 것이다. 확인해 볼 것들이 있어서 Value를 0.5로 설정해보겠다. 그리고 하이러카ㅣ 창에서 Back Ground를 눌러서 색상을 변경해보면

채워지지 않은 부분이 검은색으로 변한다. 그 다음

Fill을 누르고 색상을 변경하면

채워진 부분의 색상이 변경된다. 즉, Back Ground는 채워지지 않는 배경, Fill은 채워지는 부분을 뜻한다.

근데 한가지 설명 안한 것이 있는데 바로 Handle이다 핸들은 알기 쉽다. 바로 위 사진에서 흰 동그라미가 Handle이다. 이미즈를 바꿀수도 있고, 지워버릴 수도 있다.

그리고 다음과 같이 Value를 1로 했으면 게이지가 가득 차야하는데 가득 차지 않는 모습이 보인다. 이유는 Fill Area를 클릭해보면 Right에 값이 들어가 있는데 그 값 만큼 크기가 잡혀서 이다.

저 15를 5로 바꿔주면 크기가 딱 맞을 것이다. 그리고 슬라이더에서 중요한 것은 버튼 UI처럼 함수를 등록할 수 있다는 것이다.

Value 밑에 등록할 수 있는데 Value가 변할 때 마다 함수가 호출이 된다.

이제 예시로 플레이거가 버튼을 눌렀을 때 슬라이더의 Value가 1씩 줄어들게 만들어 보겠다. 우선, 하이어라키 창에서 캔버스의 자식 오브젝트로 버튼 오브젝트를 만들자. 그리고 스크립트를 다음과 같이 만든다.

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

public class Teset : MonoBehaviour
{
    [SerializeField] private Slider slider;

    public void Button()
    {
        slider.value -= 1f;
    }
}

코드에 어려운 부분은 없으니 설명은 생략한다. 이제 이 스크립트를 캔버스에 부탁하고 slider를 할당해주고 버튼오브젝트에 OnClick()함수에 캔버스에 있는 Button()를 등록시켜주자. 그럼 플레이하고 버튼을 눌러보면 Value가 1씩 감소하는 걸 볼 수 있다. 그리고 RPG 게임에서 많이 쓰이는 방법으로 플레이어가 독에 감염이 되었으면 체력이 달게 하고 회복아이템을 쓰면 체력이 올라가게 하는 기능은 다음과 같이 구현하면 된다.

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

public class Teset : MonoBehaviour
{
    [SerializeField] private Slider slider;

    float dotTime = 1f; //몇 초 간격으로 Value를 줄일 것인지
    float curTime=0f; //현재 시간이 얼마나 지났는지

    bool isClick; //버튼이 클릭 되었는지
    private void Awake()
    {
        curTime = dotTime; //현재시간을 도트 타임으로 바꾸고
    }
    private void Update()
    {
        if (isClick) //버튼이 클릭 되었을 때
        {
            curTime -= Time.deltaTime; //현재 시간을 계속해서 줄인다
            if(curTime <= 0f) //1초가 지나면
            {
                slider.value-=Time.deltaTime;//Value를 계속해서 줄이고
                if(curTime <= -1f) //1초가 지나면
                {
                    curTime = dotTime; //현재 시간을 다시 초기화 해준다.
                }
            }
        }
    }
    public void Button()
    {
        isClick = true;
    }
}

딱히 어려운 부분은 없다. 즉, 슬라이더 오브젝트는 최소값과 최대값 사이의 값을 비율로 보여준다.

Share this post