[Unity] 유니티 기초 탈출기 - Part.02 - UI 편 ( Slider, Scrollbar )

---

---

✔ 유니티 기초 탈출기 - Slider, Scrollbar

Slider 학습 예제를 통해 따라해보자!

---

---

 

안녕하세요.

이번시간에는 Scrollbar와 Slider에 대해서 배워볼게요.

Scrollbar도 일상생활에서 흔히 볼 수 있어요. 인터넷 사용하다보면 스크롤바 있잖아요? 그거랑 같은 기능입니다.

Slider는 Scrollbar와 거의 비슷합니다. Slider 기능으로 Scrollbar를 만들수도 있고 Scrollbar로 Slider기능을 만들 수 있어서 두개는 사용방법과 편의성에 따라서 그때그때 사용합니다.

위 두개의

차이점이 보이시나요?

하나는 왼쪽이 채워지고 하나는 안채워지고 포인트만 이동되있습니다.

첫번째 이미지가 Scrollbar고 그 아래가 Slider입니다.

차이점은 거의 없기에 이번시간에는 Slider 기준 예제를 통하여 진행해보겠습니다.

먼저 스크롤을 만들어볼게요.

 

● Slider 생성

이제 말안해도 생성은 다 아시죠~?

Hierarchy 창에서 마우스 우클릭 -> UI -> Slider 선택

생성된 Slider를 펼쳐보면 위 이미지처럼 구성되어있어요.

Slider 아래 항목의 구성을 하나하나 설명을 드릴게요.

Background	해석 그대로입니다 ㅎㅎ 뒤의 배경입니다. (위의 이미지는 빨간색으로 배경색을 해봤어요)
Fill Area	채워질 영역의 범위 입니다.
Fill	Fill Area 범위에서 Slider 값의 비율만큼 채워지게 만들어주는 개체
Handle Slide Area	사용자가 컨트롤러(위의 이미지에서는 동그란거)가 움직일 수 있는 범위
Handle	사용자가 컨트롤러 - Slider 값에 따라 변경

Slider의 구성은 알았으니 이제 사용법을 알아볼까요?

Slider를 눌러 Inspector 창을 봅시다.

이부분도 뭔가 알고 넘어가야겠죠?ㅎㅎ 너무 쉽습니다.

Direction	기준방향을 설정하는 겁니다. 디폴트는 왼쪽을 기준으로 오른쪽으로 채워짐.
Min Value	제일 왼쪽의 최소값이에요.
Max Value	제일 오른쪽의 최대값이에요.
Whole Numbers	Min Value, Max Value 사이의 값을 소수점을 버리고 정수로만 계산함 예) Min :0, Max : 2일때 Value는 0, 1, 2의 3가지 값으로만 변경할 수 있음
Value	현재 슬라이더 값
On Value Changed	슬라이더에 이벤트를 부여 (이전시간에도 많이 봤었죠? 이벤트 등록하는 함수)

이제 시작을 눌러서 Value 값을 조정하거나 Game View에서 Handle(동그란거)를 잡고 왔다갔다 해보세요. 

Value 값과 Handle이 서로 동기화되어 잘 움직이죠?

자 이제 활용을 해볼 시간입니다.

 

● Slider 활용 예제

이전에 배웠던 Toggle 버튼과 Slider를 활용하여 소리 조절화면을 만들어봅시다

Toggle 버튼을 먼저 생성하고 이름을 음소거로 해줍시다.

그리고 처음부터 음소거일 필요가 없으니 isOn은 False로 합니다.

그리고 Slider를 생성하고 위치를 음소거 밑에 놔둡니다.

Min Value : 0 으로 하고 Max Value : 100로 합니다.

Whole Numbers는 체크 합니다. 음량이 소수점일 필요는 없으니까요 ㅎㅎ

다음은 음소거가 눌러졌을때 음량이 0으로 되어야겠죠?

이벤트를 등록해봅시다.

토글이 눌러졌을때 이벤트가 발생되니 토글에 관련된 이벤트를 만들어야겠군요!

스크립트를 하나 생성합니다. 이름은 SoundManager 가 좋겠군요.

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

public class SoundManager : MonoBehaviour
{
    //슬라이더 등록될 변수
    public Slider sound_slider;

    //이전 사운드값 저장변수
    private float prevSoundValue;

    //음소거 이벤트 
    public void OnMuteClieck(bool isOn)
    {
        //Toggle이 체크되었을때
        if(isOn)
        {
            //음소거 되기전 값 저장
            prevSoundValue = sound_slider.value;

            sound_slider.value = 0;
        }
        else  //Toggle 체크 해제되었을때
        {
            //음소거 취소시 이전에 저장된 값으로 변경
            sound_slider.value = prevSoundValue;
        }
    }
}

위와 같이 스크립트를 입력합니다.

스크립트를 상위 객체인 Canvas에 등록하고 Slider를 등록해줍니다.

그리고 이번에는 토글에 이벤트를 등록!

OnValueChanged에서 + 버튼을 눌러 이벤트 생성 후 아래와 같이 등록

이제 Play 버튼을 눌러서 GameView에서 이리저리 움직여도 보고 음소거 버튼 눌러봅니다.

이렇게 된다면 완성!!!

 

앗! Slider 이벤트 등록하는것을 안하고 Toggle 이벤트 등록이 되어버렸네요.

이벤트 등록과 함수 생성은 비슷하니까 한번 만들어서 등록해보세요~

Slider 음량이 0이 되었을때 자동으로 음소거 버튼이 활성화되면 되지 않을까요? (반대로 0이상이면 음소거 버튼 해제)

아래는 정답 코드입니다.

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

public class SoundManager : MonoBehaviour
{
    //음량조절 슬라이더
    public Slider sound_slider;

    //음소거 토글버튼
    public Toggle mute_toggle;

    //이전 사운드값 저장변수
    private float prevSoundValue;

    //음소거 이벤트 
    public void OnMuteClieck(bool isOn)
    {
        if(isOn)
        {
            //음소거 되기전 값 저장
            prevSoundValue = sound_slider.value;

            sound_slider.value = 0;
        }
        else
        {
            //이전 음량값이 0이 아닐때만 음소거 취소시 이전에 저장된 값으로 변경. 
            if(prevSoundValue != 0)
                sound_slider.value = prevSoundValue;
        }
    }

    //음량 확인후 음소거 활성화 이벤트
    public void OnMuteCheck()
    {
        //음량이 0이되고 음소거 상태가 아닐때 -> 음소거 상태로 변경
        if(sound_slider.value == 0 && !mute_toggle.isOn)
        {
            mute_toggle.isOn = true;
        }
        //음소거 상태에서 음량 조절을 했을때
        else if (sound_slider.value != 0 && mute_toggle.isOn)
        {
            mute_toggle.isOn = false;
        }
    }
}