[Unity 개념] 13. 슬라이더 (Slider)에 대하여

※참고사항※
해당 포스트는 본업 개발자가 정성껏 포스팅한 포스트가 아닙니다!
평범한 고등학생이 유니티를 배우면서 적어나가는 포스트라는 점을 이해해 주십사 하고 청하는 바입니다.
(잘못된 정보는 댓글로 감사히 받겠습니다!)

---

 

이 포스팅을 보시기 전에 아래 링크를 타고 이전 포스팅을 보시고 오시면 이해가 더 잘 되실겁니다!

[Unity 기초] 2. 자료형에 대하여

[Unity 개념] 9. UI (User Interface)에 대하여

 

목차

1. Slider에 대하여
2. Slider의 사용법
3. Slider를 사용한 타이머 구현

 

1. Slider에 대하여

우선 Slider는 일정한 값 범위 내에서 값을 설정할 수 있는 컨트롤입니다.

이런 딱딱한 정의로는 이해가 잘 안 되실겁니다.

 

쉽게쉽게 말하자면 게임을 할 때 체력(HP)바나, 타이머, 로딩 게이지 등을 들 수 있을 것 같습니다.

아마도 Slider를 한 번 보시면 "아~ 이거?" 하실 겁니다.

 

이제 생성을 해보곘습니다.

Slider는 UI - Slider로 생성합니다.

 

Slider 컴포넌트입니다.

 

아래의 사진이 Slider입니다.

 

일단 속성과 이벤트들부터 보고 넘어갑시다.

속성	설명	비고
Interactable	슬라이더 사용자와 상호작용이 가능한지 결정합니다.	기본적으로 체크되어 있습니다.
Transition	슬라이더의 값을 변경하려 할 시(Handle 클릭) 색깔을 바꾸거나, 스프라이트를 바꾸거나, 애니매이션을 주거나 할 수 있게합니다.	none : 없음 Color Tint : 색깔을 바꿉니다. (기본 설정입니다!) Sprite Swap : 스프라이트를 바꿉니다. Animation : 애니매이션을 줍니다.
Navigation	컨트롤의 순서를 정합니다.
Fill Rect  ,  Handle Rect	자식 오브젝트인 Fill과 Handle 오브젝트입니다. (정확히 말하자면 Rect Transform, 대충 위치입니다.)	굳이굳이 건들 필요는 없습니다.
Direction	슬라이더가 어디서 시작해서 어디로 갈지 결정합니다.	"왼 -> 오  ,  오 -> 왼  ,  아 -> 위  ,  위 -> 아"가 있습니다.
Min  ,  Max Value	슬라이더가 가질 수 있는 최소, 최댓값입니다.
Whole Numbers	슬라이더의 최소, 최댓값 사이의 값에서 소수점을 버리고 정수로만 계산합니다.	예) Min = 0,  Max = 3일때 값은 0, 1, 2, 3만가능합니다. (0.2같은 건 안 됩니다.)
Value	현재 슬라이더의 값입니다.
On Value Changed	슬라이더의 값이 변할 때마다 호출되는 "이벤트"입니다.

 

이제 하위 오브젝트들을 살펴보겠습니다.

차근차근 알아보겠습니다.

(Area들은 빈 오브젝트며, Area들의 하위 오브젝트가 실질적인 오브젝트입니다!)

오브젝트	설명	비고
Background	슬라이더의 뒷 배경입니다.
Fill	슬라이더의 배경입니다.
Handle	슬라이더의 손잡이입니다.	체력바, 타이머와 같은 것들(사용자가 값을 바꿀 수 없음)은 Handle을 지우고 사용하기도 합니다.

 

< 그림 설명입니다! >

슬라이더에 대한 설명은 이쯤하고 사용하는 법에 대해서 알아보겠습니다!

 

2. Slider의 사용법

간단한 로직부터 짜보겠습니다.

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

// Slider를 사용하기 위한 네임 스페이스
using UnityEngine.UI;

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

    private void Awake()
    {
        // 슬라이더의 상호작용 여부
        slider.interactable = true;

        // 슬라이더의 최솟값
        slider.minValue = 0;

        // 슬라이더의 최댓값
        slider.maxValue = 10;

        // 슬라이더의 값을 정수로 고정할지 말지 결정함
        slider.wholeNumbers = false;
    }

    public void IfValueChanging()
    {
        print("슬라이더의 값이 변하고 있습니다!");
    }
}

 

이제 적용을 시키고 실행시켜보면 아래와 같이 실행됩니다.

 

이번엔 Slider를 이용한 타이머를 구현해보겠습니다.

 

3. Slider를 사용한 타이머 구현

일단 외관은 굳이 바꾸지 않도록 하겠습니다.

로직입니다.

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

// Slider를 사용하기 위한 네임 스페이스
using UnityEngine.UI;

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

    private void Awake()
    {
        // 슬라이더의 상호작용 여부
        slider.interactable = true;

        // 슬라이더의 최솟값
        slider.minValue = 0;

        // 슬라이더의 최댓값
        slider.maxValue = 10;

        // 슬라이더의 값을 정수로 고정할지 말지 결정함
        slider.wholeNumbers = false;

        // 타이머이기 때문에 시작하자마자 슬라이더의 값을 모두 채워줌
        // 현재 값을 최댓값으로 함
        slider.value = slider.maxValue;
    }

    // 슬라이더의 값이 계속 바뀔 것이라 출력을 하지 않게 함 (콘솔창이 잘 안 보여요 ㅠㅠ)
    /*public void IfValueChanging()
    {
        print("슬라이더의 값이 변하고 있습니다!");
    }*/

    private void Update()
    {
        Timer();
    }

    private void Timer()
    {
        // 슬라이더의 값이 0과 같거나 작으면 (타이머가 끝나면) 실행함
        if (slider.value <= 0) { print("타이머 끝!"); }

        // 그게 아니라면 계속 슬라이더의 값을 시간에 맞춰서 줄임
        // Time.deltaTime : 지금은 대충 시간이라고 생각하셔도 좋습니다.
        else { slider.value -= Time.deltaTime; }
    }
}

 

이제 적용 후 실행해보겠습니다.

 

이상으로 포스팅을 마치겠습니다.

다음 포스팅에서는 스크롤 뷰에 대해서 공부해보겠습니다!