NGUI 3.x Tutorial Step7 - Slider

 NGUI 버튼을 추가하고 클릭 이벤트 핸들링을 해봤습니다. 이번에는 슬라이더 컨트롤을 추가해보겠습니다. 이전 버튼 튜토리얼에서 만들었던 버튼은 삭제하고 시작합니다.

 빈 게임오브젝트를 만들고 Slider - Horizontal이라고 이름을 지어줍니다. 그리고 이하 나오는 것들을 모두 자식으로 해줍니다.

 아래와 같이 슬라이더 컨트롤의 백그라운드로 사용할 UISlicedSprite - BG라는 NGUI SlicedSprite를 만듭니다.

 방금 만든 백그라운드 스프라이트를 복제해서 아래와 같이 포그라운드용으로 설정합니다.

 다음으로 슬라이더 컨트롤에 보여질 NGUI 라벨을 아래와 같이 만들어줍니다.

 슬라이드 컨트롤의 버튼을 만들기 위해 역시나 만들었던 SlicedSprite를 하나 복제해서 아래와 같이 작업해줍니다. 이때 버튼의 이벤트 처리를 위해 NGUI - Attach - Collider와 버튼의 색상 변경을 위해 Button Color 컴포넌트를 더 추가해줬습니다. Collider과 Button Color은 추가 안해줘도 슬라이더 작동에는 문제가 없습니다.

 

 마지막으로 슬라이더 오브젝트입니다. NGUI - Attach - Slider Script를 추가해주고 이벤트 처리를 위해 Box Collider를 추가해줍니다. Appearance부분에 위에서 만들었던 하위 자식 오브젝트를 각각 바인드 시켜줍니다.

 슬라이드 컨트롤의 Thumb값이 변경되는 콜백을 받기위해 UITest라는 C# 스크립트를 만들고 아래와 같이 OnValueChange 함수를 만들어줍니다.

public class UITest : MonoBehaviour {

UISlider testSlider;

public void OnValueChange()
{
Debug.Log("OnValueChange " + testSlider.value);
}

// Use this for initialization
void Start () {
testSlider = GetComponent<UISlider>();

}
}


 마지막으로 UITest 컴포넌트를 슬라이드 오브젝트에 추가하고 UISlider의 On Value Change 인스펙터 속성에 드래그 & 드롭해 바인드 시켜줍니다. Method에서 위에서 만들었던 함수를 선택해준 후 실행하면

 아래와 같은 결과를 볼 수 있고 슬라이드 컨트롤을 움직이면 로그가 찍히는 것을 확인할 수 있습니다.

 UISlider의 인스펙터 속성중 Direction을 변경하면 세로 슬라이더도 만들 수 있습니다. 다음에는 NGUI 체크박스 컨트롤을 추가해보겠습니다.

참고

NGUI Tutorial Step 7: Slider