[ 퍼온 글 ] [Unity3D 강좌] NGUI Example 2 - Interaction
[Unity3D 강좌] NGUI Example 2 - Interaction
written by icoder(http://icoder.tistory.com)
이 예제는 UI에 동적인 시각 효과를 주기 위해 NGUI Tween 컴포넌트들를 어떻게 적용 하는지 설명하고 있습니다. Tween Transfrom 또는 Tween Position으로 움직임의 시작과 끝을 지정하고 UIButton Tween으로 애니메이션을 실행 해 보겠습니다. 카메라의 Projection 모드를 Perspective로 설정하므로 UI 디스플레이는 3D 공간 상에서 이루어집니다.
필요한 부분만 만들면서 설명 하겠습니다. 또한 원본 예제와는 달리, 버튼등의 간단한 UI는 Widget Tool을 사용해서 만들겠습니다. Widget Tool을 사용하는 기본적인 방법은 [NGUI 튜토리얼]을 참고하세요.
1. 새로운 씬을 생성하고, 카메라의 속성을 아래와 같이 설정합니다.
2. 메뉴>Component>NGUI>UI>Camera 항목을 선택해서 UICamera를 추가합니다. 특별히 변경할 속성은 없습니다.
3. 3D 오브젝트도 표현할 예정이므로 메뉴>GameObject>Create Other>Directional Light 항목을 선택해서 조명을 하나 추가합니다. Transform을 아래 그림처럼 재 설정합니다.
4. 빈 오브젝트를 하나 생성하고 이름을 Cubes로 변경합니다. 이어서, 메뉴>GameObject>Create Other>Cube 항목을 선택해, 자식 아이템으로 Cube를 두개 생성합니다. 적당한 Material을 설정하고 아래 표와 같이 큐브의 Transform을 입력합니다. 사실, 지금 단계에서 Position을 입력하는 건 의미가 없습니다. 나중에 Tween Position 컴포넌트를 추가하면 리셋되어 버리기 때문입니다.
Cube1 | Rotation : 320, 0, 0 |
Cube2 | Rotation : 344.72, 354.90, 317.62 |
5. 큐브에 위치 이동 Tween 기능을 추가해 봅시다. 메뉴>Component>NGUI>Tween>Position 항목을 선택해서 아래 그림과 같이 Tween Position 컴포넌트를 추가합니다. Method는 EaseInOut 방식을 적용하고, Duration을 0.5로 지정 하여 0.5초동안 애니메이션 시키도록 합니다.
6. Tween Position 컴포넌트는 시작점과 종료점을 입력하여 두 지점을 Method에 지정한 방식으로 Duration 시간동안 애니메이션 시킵니다. 시작점(From)과 종료점(To)은 아래 표와 같이 입력합니다. 또한, Transform의 Position 좌표를 Tween Position의 From 으로 입력한 좌표와 동일하게 맞춥니다.
Cube1 | Position : -1.27, -0.31, -1.16 |
Cube2 | Position : -2.78, 3.93, 2.82 |
프로그램 시작시에는 애니메이션이나 큐브를 보일 필요가 없으므로 Cubes 빈 오브젝트와 Cube1, Cube2의 비져블 상태를 언체크합니다. 또한, Tween Position 스크립트를 실행하면 안되므로 마찬가지로 언체크합니다.
7. UI 화면을 담을 루트 Panel을 추가해 보겠습니다. 빈 오브젝트를 하나 만들고 이름을 Message Root로 변경한 후, 메뉴>Component>NGUI>UI>Panel 항목을 선택해서 UIPanel 컴포넌트를 추가합니다. 특별히 변경 할 속성은 없습니다.
8. 3D Cube를 표현하기 위해 카메라가 Perspective로 설정되어 있습니다. 이 상태로 NGUI 위젯을 추가하면 화면에 너무 크게 보입니다. 해서, Message Root의 하위 오브젝트로 0.0025 스케일을 가진 빈 오브젝트를 추가합니다. 전에 만들어 놓은 Cubes 오브젝트도 드래그 해서 Message Root 하위로 가져 옵니다.
9. 큐브의 트위닝은 Tween Position 컴포넌트를 이용해서 위치를 이동하는 연출이였습니다. UI는 Tween Transform 컴포넌트를 사용해서 이동, 회전, 스케일 변환을 모두 해 보겠습니다. Tween Transform을 사용하기 위해서는 위치정보를 가진 오브젝트가 필요합니다. 3D UI 하위로 Window - Active, Window - Inactive 빈 게임 오브젝트 두개를 추가합니다. Transform 정보는 아래 테이블과 같이 입력합니다.
Window - Active | Position : 140, 12, -75 |
Window - Inactive | Position : 0, 0, 0 |
10. 자, 이제 트랜스폼 트위닝을 만들어 봅시다. 3D UI 하위에 Window 이름의 빈 오브젝트를 하나 만들고 아래 그림과 같은 초기 Transform 정보를 입력합니다. 다음으로, 메뉴>Component>NGUI>Tween>Transform 항목을 선택해서 Tween Transform 컴포넌트를 추가합니다. Method는 EaseInOut 방식을 적용하고, Duration을 0.5로 지정 하여 0.5초동안 애니메이션 시키도록 합니다. Cube와 마찬가지로 프로그램 시작시에는 애니메이션 하면 안되므로 Tween Transform 컴포넌트를 언 체크합니다. 이 예제는 버튼을 눌렀을 때만 트위닝 애니메이션을 시작합니다.
아! 제일 중요한걸 까먹었네요. 아래 그림처럼 미리 만들어 놓은 Active, Inactive 오브젝트를 드래그 드랍해서 From, To에 적용합니다. 이렇게 하면 애니메이션의 시작, 종료 트랜스폼이 지정됩니다.
11. 스프라이트 한장을 추가해서 간단한 UI 화면을 만들어 보겠습니다. 아래 그림처럼 Window의 하위로 Sliced Sprite를 한장 추가 해 주세요. Fantasy Atlas의 Window 스프라이트를 사용했습니다.
12. 트위닝을 시작하는 버튼을 하나 만들어 보겠습니다. 간단히 Widget Tool을 이용하여 버튼을 생성하겠습니다. 적당한 위치에 버튼을 배치한 후 메뉴>Component>NGUI>Interaction>Button Tween 항목을 선택해서 UIButton Tween 컴포넌트를 추가합니다. 먼저 큐브를 트위닝 하기 위해 하이어러키 패널의 Cubes 오브젝트를 드래그 드랍해서 Tween Target 필드에 설정합니다. Cube의 초기 비져블 상태를 언 체크 했으므로, If Disabled On Play 항목은 EnableThenPlay로 설정합니다. 또한, Cubes 오브젝트는 단순히 부모 컨테이너 이므로 Include Children 항목을 체크합니다. 버튼을 클릭하면, Cube가 트위닝 되는 모습을 확인 할 수 있습니다.
13. 이번에는 UI의 트위닝을 시작 해 보겠습니다. 위와 마찬가지 방법으로 UIButton Tween 컴포넌트를 추가한 후 아래 그림처럼 설정합니다. 달라진 부분은 Tween Target을 Window로 설정했다는 점과 Include Children이 언체크 되었습니다. 버튼을 누르면 UI 화면이 벌러덩 눕습니다. Window 오브젝트의 Tween Transform 컴포넌트 속성 중 To 필드에 지정된 Transform으로 보간 애니메이션 된 연출입니다.
14. 다시 원 상태로 복귀하는 버튼을 만들어 보겠습니다. 전 단계에서 만든 Button을 Ctrl+D 키를 눌러서 복제합니다. 오른쪽으로 적당히 옮기고 라벨 텍스트는 Hide로 하겠습니다. UIButton Tween 컴포넌트의 속성은 아래 그림과 같이 입력합니다. 간단히 정리하자면, Play Direction을 Reverse하여 역으로 애니메이션 시키고, 큐브의 경우 애니메이션이 끝나면 Disable 시킨다는 의미입니다.
15. 다 만들었습니다. 원본 NGUI Example에는 좀더 많은 UI 요소들이 있지만, 핵심에 집중하기 위해 생략하고 필요한 부분만 만들었습니다. 하지만, 본 예제에 적용되어 있는 Pan With Mouse 컴포넌트나, 애니메이션 버튼등은 한번 살펴보시는게 좋을듯 합니다. 이상으로 Interaction 예제 설명을 마칩니다.
