2.6 NGUI UISlider (슬라이더)
NGUI UISlider (슬라이더)
이번 강좌를 공부하시면,
아래 그림과 같이 NGUI의 UISlider(슬라이더)를 사용해서 스프라이트의 알파 값을 조절하는 예제를 만들 수 있습니다.
2.6 UISlider (슬라이더)
Slider 위젯은 사용자가 드래그를 해서 값을 지정할 수 있도록 할 때 사용하는 위젯입니다.
Slider 위젯은 Widget Tool 창의 Template 을 Slider로 선택하고 아래 항목을 보면 Empty / Full / Thumb 3가지 항목이 있습니다.
각 항목들은 아래에 정리한 내용과 같은 기능을 담당합니다.
– Empty: Slider 위젯의 뒷면, 슬라이더의 배경이되는 이미지 입니다.
– Full: Slider 위젯의 값이 줄어들거나 채워질 때, 움직이는 부분을 표현할 이미지 입니다.
– Thumb: Slider 위젯에서 슬라이더 값의 끝 부분을 가르키고 또한 슬라이더를 드래그 할 때 잡고 드래그 하는 부분에 해당하는 이미지 입니다.
Empty / Full / Thumb 각 부분에 맞는 스프라이트 이미지를 선택하고 AddTo 버튼을 눌러서 Slider 위젯을 생성합니다.
지금까지 살펴봤던 다른 UI 위젯들과 마찬가지로 Slider 위젯 역시 여러가지 위젯들을 사용합니다.
하이어라키 뷰에서 생성된 Slider 위젯의 구조를 보면 아래 그림과 같이 Slider 게임 오브젝트 하위에 Background / Foreground / Thumb 세 개의 게임오브젝트가 Slider 게임 오브젝트의 자식 오브젝트로 포함되어 있는 것을 확인할 수 있습니다.
하이어라키 뷰에서 Slider 게임 오브젝트를 선택하고, 인스펙터 뷰에서 UISlider 컴포넌트를 살펴보면 아래 그림과 같이 여러가지 파라미터들을 설정할 수 있도록 구성되어 있습니다.
UISlider의 각 파라미터들을 살펴 보겠습니다.
| 파라미터 | 설명 |
| Value | 현재 Slider 위젯의 값을 나타냅니다. 0 – 1 사이의 값을 가집니다. |
| Alpha | Slider 위젯의 투명도를 나타냅니다. 0 – 1 사이의 값을 가집니다. |
| Steps | Slider를 조절해서 값을 변경할 때의 간격을 지정합니다. |
| Foreground | Slider의 겉 이미지 즉 값이 채워질 때 화면에 나타나는 스프라이트를 지정합니다. |
| Background | Slider의 배경이 되는 스프라이트를 지정합니다. |
| Thumb | Slider 값을 조절하는 핸들이 되는 스프라이트를 지정합니다. |
| Direction | UISlider 위젯의 방향을 지정합니다. Horizontal / Vertical 두 가지 방향을 지원합니다. |
| Notify | Slider 값이 변경되었을 때 특정 함수를 호출하게 할 때 사용합니다. 실행 될 함수를 가진 게임 오브젝트를 드래그해서 설정합니다. |
이번에는 Slider 위젯을 이용해서 다른 스프라이트의 알파 값을 조절하도록 스크립트를 작성하고 결과를 확인해보겠습니다.
먼저 Slider 위젯을 생성합니다.
유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard(Legacy) 메뉴를 선택합니다. Widget Tool 창이 나타나면 Template 항목은 Slider, 그리고 Empty / Full / Thumb 은 각각 Dark / Light / Highlight로 설정하고 AddTo 버튼을 클릭해서 Slider 위젯을 생성합니다.
이번에는 Widget Tool의 Template 항목을 Sprite로 설정하고 Sprite 항목은 NGUI로 설정합니다. 그리고 AddTo 버튼을 클릭해서 스프라이트 위젯을 생성합니다.
이렇게 생성된 Slider 위젯과 스프라이트 위젯의 위치를 씬뷰에서 아래 그림과 같이 조절합니다.
위젯 생성을 했으니, 스크립트를 작성할 차례 입니다.
프로젝트 뷰에서 Create -> C# Script 메뉴를 선택해서 C# 스크립트를 생성하고 스크립트 이름을 ChangeAlpha라고 지정합니다.
생성된 ChangeAlpha 스크립트를 더블 클릭해서 모노디벨롭 에디터를 실행시킨 뒤, 아래 스크립트를 작성합니다.
using UnityEngine;
using System.Collections;
public class ChangeAlpha : MonoBehaviour
{
// 알파 값을 변경할 스프라이트.
public UISprite sprite;
// 스프라이트의 알파 값을 변경하는 슬라이더.
public UISlider slider;
public void OnSliderChange()
{
sprite.alpha = slider.value;
}
}
이제 작성한 스크립트를 Slider 위젯 그리고 스프라이트와 연결할 차례 입니다.
유니티 에디터 메뉴에서 GameObject -> Create Empty 메뉴를 선택해서 빈 게임 오브젝트를 생성합니다.
생성된 게임 오브젝트 이름을 ChangeAlpha라고 변경합니다. 그리고 위에서 작성한 ChangeAlpha.cs 스크립트를 드래그해서 컴포넌트로 추가합니다.
위 그림의 오른쪽 부분, 즉 ChangeAlpha 컴포넌트를 보면 Sprite 와 Slider 항목이 각각 None 으로 아직 값이 설정되어 있지 않은 것을 볼 수 있습니다. 이 값들을 각각 연결해서 설정해 보겠습니다.
아래 그림과 깉이 위에서 생성한 Slider 위젯과 스프라이트 위젯을 드래그해서 연결합니다.
이제 Slider 위젯의 값이 변경되면 위에서 작성한 OnSliderChange 함수가 실행될 수 있도록 Slider 위젯과 연결해 보겠습니다.
하이어라키 뷰에서 Slider 게임 오브젝트를 클릭하고 아래 그림과 같이 UISlider 컴포넌트의 Notify 항목에 ChangeAlpha 게임 오브젝트를 드래그 합니다. 이렇게 드래그를 해서 연결해주면 Method 항목이 나타나는 데 이 부분을 클릭해서 OnSliderChange 함수를 선택합니다.
유니티를 실행하고 Slider의 값을 변경해보면 NGUI 스프라이트의 알파값이 변경되는 것을 확인할 수 있습니다.
Slider 위젯의 값을 변경하면 스프라이트의 투명도가 변하는 것을 확인할 수 있습니다.
Slider 위젯은 이처럼 슬라이더 값을 조절하고 이 값에 따라서 다른 게임오브젝트의 상태를 변경하려고 할 때 활용할 수 있습니다.
내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂
