[ 퍼온 글 ] [Unity3D 강좌] NGUI Example 4 - Controller Input

[Unity3D 강좌] NGUI Example 4 - Controller Input

 

written by icoder(http://icoder.tistory.com)

윈도우즈 GUI 시스템을 사용해 본 경험이 있다면, TAB키나 화살표 방향키로 컨트롤(위젯)의 포커스를 이동한 경험이 있을겁니다. 이 예제는 이와 같은 키보드 컨트롤러 입력을 NGUI가 어떻게 처리 하는지 보여줍니다. 키 입력에 UI 포커스를 반응하게 하려면, 단순히 Widget 오브젝트에 UIButtonKeys 컴포넌트를 추가하고 키 입력에 대응하는 포커스 받을 컨트롤을 지정하면됩니다.

필요한 부분만 만들면서 설명 하겠습니다. 또한 원본 예제와는 달리, 버튼등의 간단한 UI는 Widget Tool을 사용해서 만들겠습니다. Widget Tool을 사용하는 기본적인 방법은 [NGUI 튜토리얼]을 참고하세요.

 

1. 새로운 씬을 생성하고 기본 카메라를 지웁니다. 메뉴>NGUI>Open the UI Wizard 항목을 선택해서 Create Your UI 버튼을 클릭합니다. 하이어러키 패널에 NGUI 기본 뼈대가 구성됩니다.

 

2. Panel의 하위 오브젝트로 배경으로 사용할 Sliced Sprite를 한장 추가합니다. SciFi 아틀라스와 Light 스프라이트를 사용했습니다. Depth는 충분히 뒤로 빼 놓습니다.

 

3. Widget Tool을 이용해서 버튼 2개, 슬라이더 2개를 만들고 적당히 배치해 보겠습니다. 아래 그림과 같은 모양이 되도록 배치 해 보세요. 예제를 설명하는게 목적이므로 예쁘게 만들지는 않았습니다.

 

4. 추가한 모든 위젯에 메뉴>Component>NGUI>Interaction>Button Keys 항목을 선택해서 UIButton Keys 컴포넌트를 추가합니다. 각 필드의 속성 의미는 아래와 같습니다.

Starts Selected	선택된 상태로 화면에 보여지는지 유무
Select On Click	클릭 했을 때 선택할 위젯(UIButton Key)을 지정합니다.
Select On Up	UP 방향키를 눌렀을 때 선택할 위젯을 지정합니다.
Select On Down	DOWN 방향키를 눌렀을 때 선택할 위젯을 지정합니다.
Select On Left	LEFT 방향키를 눌렀을 때 선택할 위젯을 지정합니다.
Select On Right	RIGHT 방향키를 눌렀을 때 선택할 위젯을 지정합니다.

TAB키를 누르면 Select On Down에 지정된 위젯으로 선택이 이동됩니다. 아래 그림처럼 Button1의 UIButton Keys 컴포넌트 속성을 채웁니다. 대상 위젯 오브젝트를 간단히 드래그 드랍 하면됩니다.

 

5. 다른 위젯들도 같은 방법으로 속성을 지정합니다. Starts Selected 항목은 언체크 하면 되겠습니다. 게임을 실행하고 TAB 키를 누르거나 화살표 방향키를 누르면 선택 포커스가 이동하는 모습을 볼 수 있습니다. 하지만, 슬라이더 위젯의 경우는 선택 모습이 보이지 않습니다. 선택이 안 된것은 아닙니다. 선택시 표현될 컬러 정보가 없기 때문입니다. 슬라이더 위젯을 선택하고 메뉴>Component>NGUI>Interaction>Button Color 항목을 선택해서 UIButton Color 컴포넌트를 추가한 후, 아래 그림처럼 Tween Target을 Background로 지정합니다.

 

6. 나머지 슬라이더 위젯도 같은 방법으로 선택 색상을 지정합니다. 한가지 의문이 생깁니다. 슬라이더 위젯은 좌우 화살표 입력으로 썸을 이동시킬 수 있습니다. 그러면 UIButton Keys 컴포넌트의 Select On Left(Right) 필드에 다른 위젯을 지정했다면 동작이 어떻게 될까요? 한번 해 보시기 바랍니다.