[ 퍼온 글 ] [Unity3D 강좌] NGUI Example 5 - Lights and Refraction

[Unity3D 강좌] NGUI Example 5 - Lights and Refraction

 

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

UI 화면에 조명을 다루는 흥미로운 주제입니다. 때로는, 일부 UI 화면이 번쩍이거나 빛나는 애니메이션을 연출하고 싶을 때가 있습니다. 파티클을 이용해서 어느정도 표현할 수 있겠지만, 독립적인 재질을 가진 오브젝트 연출 이므로 UI화면과 조화된 모습이 나오기 힘듭니다. 이 예제는 Point Light와 Normal Map을 사용해서 입체적인 빛나는 효과를 연출 해 봅니다. 또한 Animation 클립과 Point Light를 결합하여 조명을 애니메이션 시키는 환상적인 연출을 시도 해 봅니다.

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

 

1. 새로운 씬을 생성하고, 카메라의 속성을 아래와 같이 설정합니다.

 

2. 메뉴>Component>NGUI>UI>Camera 항목을 선택해서 UICamera를 추가합니다. 특별히 변경할 속성은 없습니다.

 

3. Perspective 공간에 UI를 표현할 예정이므로 메뉴>GameObject>Create Other>Directional Light 항목을 선택해서 조명을 하나 추가합니다. Transform을 아래 그림처럼 재 설정합니다.

 

4. 카메라가 Perspective로 설정되어 있습니다. 이 상태로 NGUI 위젯을 추가하면 화면에 너무 크게 보입니다. 해서, 0.0025 스케일을 가진 빈 오브젝트를 추가합니다. 이름은 "3D UI"로 하겠습니다. 이어서, UIPanel 컴포넌트를 추가합니다. 메뉴>Component>NGUI>UI>Panel 항목을 선택합니다. UI 배경에 노말맵 텍스쳐를 사용할 예정이므로 Normals 필드는 체크합니다. 

 

5. Tiled Sprite를 배경 UI로 추가합니다. Refractive 아틀라스의 Honeycomb 스프라이트를 사용했습니다. 조명의 효과를 확실히 보여주기 위해 노말맵을 가진 스프라이트를 선택했습니다. Color Tint를 조절해서 배경 색상을 검은색으로 맞추어주세요.

 

6. 그런데, 게임화면이 시커멓게 나옵니다. 셰이더를 설정하지 않아서 그렇습니다. 3D UI 오브젝트를 선택하고 메뉴>Component>NGUI>Examples>Shader Quality 항목을 선택해서 Shader Quality 컴포넌트를 추가합니다. 다음으로 버튼 위젯을 추가하고 버튼의 Background 스프라이트 하위로 Point Light 오브젝트를 추가합니다. 속성은 아래 그림처럼 입력합니다.

 

7. 버튼 주변에 그럴싸한 녹색 조명이 등장했습니다. 하지만, 우리가 하고자 하는 연출은 버튼에 마우스를 올리면 조명이 켜지는 연출이므로 Light의 Color 속성을 검은색으로 설정해서 조명을 일단 꺼 놓습니다.

 

8. 버튼 오브젝트를 선택하고 메뉴>Component>NGUI>Interaction>Button Color 항목을 선택해서 UIButton Color 컴포넌트를 추가합니다. Tween Target으로 좀 전에 만들어놓은 Point Light를 할당합니다. 게임을 실행하면 버튼이 마우스 롤오버 되었을 때 조명이 들어오는 연출을 확인 할 수 있습니다.

 

9. 이제 Animation 클립과 Point Light를 결합하여 조명을 애니메이션 시켜 보겠습니다. 먼저, 3D UI 하위로 빈 오브젝트를 하나 만들고 이름을 "Logo"로 지정합니다. 또한, Refractive 아틀라스의 NGUI 스프라이트를 사용하는 심플 스프라이트 위젯을 하위 오브젝트로 추가합니다. 이어서 Logo의 하위 오브젝트로 Point light 조명도 하나 추가합니다. 조명의 속성은 아래 그림과 같이 입력합니다.

 

10. 조명의 애니메이션을 위해 메뉴>Component>Miscellaneous>Animation 항목을 선택해서 Animation 컴포넌트를 추가합니다. 이어서 아래 그림과 같이 Logo 애니메이션 클립을 할당합니다. 애니메이션은 게임 시작시에는 연출되지 않을 예정이므로 컴포넌트 체크박스는 해제합니다.

 

11. "Logo" 상위 오브젝트로 다시 돌아가 봅시다. 우리는 NGUI 스프라이트에 마우스가 롤오버되면 애니메이션을 연출할 계획을 가지고 있습니다. Logo는 빈 오브젝트 이므로 마우스 처리를 위해 먼저 컬라이더를 만들어야 겠습니다. 메뉴>NGUI>Attach a Collider 항목을 선택해서 컬라이더를 생성합니다. 다음으로 마우스 롤오버를 핸들링 하기 위해 메뉴>Component>NGUI>Interaction>Button Play Animation 항목을 선택해서 UIButton Play Animation 컴포넌트를 추가합니다. Target은 좀 전에 만들어 놓은 Point light를 할당합니다. Trigger는 OnHoverTrue로 설정합니다.

 

12. 게임을 실행하고 NGUI 로고 위에 마우스를 올리면 글자 엣지를 따라 이동하는 멋진 조명 효과를 볼수 있습니다.