[ 퍼온 글 ] [Unity3D 강좌] NGUI Example 8 - Scroll View (Camera)

[Unity3D 강좌] NGUI Example 8 - Scroll View (Camera)

 

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

인터넷에 올라온 NGUI를 설명하는 예제로 가장 많은 포스트가 Scroll View 입니다. 그만큼 활용도가 높고 퀄리티 있는 결과를 만들어 낸다는 이야기입니다. 스크롤 뷰는 N개 위젯 아이템을 담을 수 있는 UI 구조와, 드래깅을 통해 스크롤링 할 수 있는 기능을 제공해야 합니다. NGUI는 Mac(IPhone) UI에서 볼 수 있는 스프링 슬라이딩 효과도 지원합니다. 또한, 클리핑되는 경계면을 부드럽게 잘라내어 감성있는 UI를 만들어 낼 수 있습니다. 여기서는 카메라를 이동하는 방식으로 스크롤 뷰를 구현하고 있습니다. 패널을 이동하는 방식으로도 스크롤 뷰를 구현할 수 있습니다. 패널을 이용하는 방식은 Example 7 - Scorll View (Panel) 포스트를 참고하세요.

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

 

1. 새로운 씬을 만들고 기본 카메라를 제거합니다. 메뉴>NGUI>Open the UI Wizard 항목을 선택해서 UI Tool 화면을 띄우고 Create Your UI 버튼을 클릭해서 NGUI 기본 뼈대를 만듭니다. "UI Root (2D)" 오브젝트 이름을 "2D UI"로 바꾸고, "Panel" 오브젝트 이름을 "Window"로 바꿉니다. 설명을 쉽게 하기 위해 변경하는 것이므로 바꾸지 않아도 문제는 없습니다. 특별히 변경 할 다른 속성은 없습니다.

 

2. 디스플레이 레이아웃을 먼저 잡겠습니다. Window 오브젝트의 하위로 Sliced Sprite 한장을 추가합니다. Fantasy Atlas의 Window sprite를 사용했습니다. 이름은 "Background"로 변경합니다. 아래 그림과 같이 그 외 속성들을 입력 해 주세요.

 

3. 스크롤 뷰 화면 테두리 영역을 잡습니다. Window 오브젝트의 하위로 Sliced Sprite 한장을 추가합니다. Fantasy Atlas의 Window sprite를 사용했습니다. 이름은 "View-Border"로 변경합니다. 아래 그림과 같이 그 외 속성들을 입력 해 주세요.

 

4. 스크롤 카메라와 연결할 뷰 화면 영역을 잡습니다. Window 오브젝트의 하위로 Tiled Sprite 한장을 추가합니다. Fantasy Atlas의 Paper Background sprite를 사용했습니다. 이름은 "View-ScrollCamera"로 변경합니다. 아래 그림과 같이 그 외 속성들을 입력 해 주세요.

 

5. View-ScrollCamera 오브젝트는 Draggable Camera와 연결되어 유저가 직접 드래깅 하는 영역입니다. 메뉴>Component>NGUI>Interaction>Drag Camera 항목을 선택해서 UIDrag Camera 컴포넌트를 추가합니다. Draggable Camera 필드는 나중에 할당할 예정입니다. 또한, 유저의 드래깅 입력을 받아야 하므로 Box Collider를 하나 추가합니다. 메뉴>NGUI>Attach a Collider 항목을 클릭하면 자동으로 생성됩니다. 애래 그림과 같이 컴포넌트가 추가 되었는지 확인 해 주세요.

 

6. 나중에 스크롤 카메라를 만들고 뷰포트 영역을 적용 해야 합니다. 이 때 필요한것이 화면 영역인데, 이에 대한 정보를 여기에서 만들어 줍니다. View-ScrollCamera 오브젝트의 하위로 빈 오브젝트를 두 개 만듭니다. 이름은 "TopLeft"와 "Bottom Right" 로 변경합니다. 이름 그대로 좌측상단, 우측하단에 각 오브젝트의 Transform을 위치 시킵니다. BottomRight(0.5, -0.5, 0), TopLeft(-0.5, 0.5, 0). 두 오브젝트는 나중에 스크롤 카메라의 뷰포트 영역에 할당 될 예정입니다.

 

7. 이제, 스크롤 뷰 컨텐츠를 만들어 봅시다. 메뉴>NGUI>Open the UI Wizard 항목을 선택해서 UI Tool 화면을 띄우고 Create Your UI 버튼을 클릭해서 NGUI 기본 뼈대를 하나 더 만듭니다. "UI Root (2D)" 오브젝트 이름을 "View UI"로 바꾸고, "Panel" 오브젝트 이름을 "Offset"으로 바꿉니다. 우리가 여기서 하려는 목적은 UI는 그대로 있고 카메라만 움직여서 리스트 아이템을 디스플레이하는 작업입니다. 그런데, Anchor의 기준점이 되는 UI Camera가 View UI 오브젝트의 카메라 입니다. Anchor의 UI Camera 필드를 2D UI 오브젝트의 카메라로 재 설정 해야 합니다.

 

8. 이대로 작업 해도 되지만, 카메라 밑에 리스트 UI가 위치하는 하이어러키 구조가 찝찝합니다. Anchor의 기준 카메라를 변경 했지만, Unity3D의 하이어러키 구조상 쓸데없는 연산을 할 것만 같은 느낌이 듭니다. Anchor를 View UI의 직계 자식으로 이동 시켜둡니다. 카메라는 다른곳을 보도록 아래 그림처럼 Transform을 이동 시킵니다.

 

9. 카메라에 뷰포트 드래깅 카메라 기능을 적용 해 보겠습니다. 먼저, 메뉴>Component>NGUI>UI>Viewport Camera 항목을 선택해서 UIViewport 컴포넌트를 추가합니다. 다음으로 메뉴>Component>NGUI>Interaction>Draggable Camera 항목을 선택해서 UIDraggable Camera 컴포넌트를 추가합니다. 이어서 아래 그림처럼 각 오브젝트를 할당합니다. 가로 스크롤만 할 예정이므로 Scale의 y값은 0으로 지정합니다.

 

10. 스크롤 카메라도 만들었으니 단계 5 에서 약속했던 Draggable Camera를 할당 해 보겠습니다. View-ScrollCamera 오브젝트를 선택하고 아래 그림처럼 드래그 드랍 해 주세요.

 

11. Example7 예제는 아이템 리스트를 구성하기 위해 UIGrid 컴포넌트를 사용했습니다. 여기서는 UITable 컴포넌트를 사용 해 보겠습니다. Offset 오브젝트를 선택하고 메뉴>Component>NGUI>Interaction>Table 항목을 선택해서 UITable 컴포넌트를 추가합니다. Padding x, y는 8, 8 로 잡습니다. Offset 오브젝트의 Transform은 y축을 위로 1150 정도 올려서 스크롤 카메라에 보이도록 합니다.

 

12. Offset 오브젝트 하위로 아이템을 만들어 보겠습니다. 빈 오브젝트를 하나 만들고 이름을 "Item"으로 변경합니다. 이어서 단계 5에서 했던 방법과 같이 UIDrag Camera 컴포넌트를 추가합니다. Draggable Camera 필드는 View UI에 있는 드래그 카메라를 지정합니다.

 

13. 디스플레이 테스트를 위해 "Item" 오브젝트의 하위로 Sliced Sprite를 한장 추가합니다. Fantasy Atlas의 Flat Outline 스프라이트를 사용합니다. 크기는 가로 세로 128 픽셀로 잡습니다.

 

14. "Item" 오브젝트가 스프라이트를 가졌으므로 이제 컬라이더를 자동 생성 할 수 있겠습니다. 메뉴>NGUI>Attach a Collider 항목을 선택해서 Box Collider를 추가합니다. 영역이 자동으로 계산될 꺼에요. 원본 예제를 보면 Item을 좀더 그럴사하게 구성했지만, 설명을 위해 생략하겠습니다. 자, 이제 "Item" 오브젝트를 한 10개 정도 복제하겠습니다. 간단히 Ctrl+D 키를 누르면 복제됩니다. 같은 자리에 복제되고 있습니다. 리스트 형태로 재 배열 해야 하는데, 걱정하지 마세요. Offset(UITable) 오브젝트의 Reposition Now 체크 박스를 클릭하면 자동으로 재 배치 됩니다.

 

15. 완성 했습니다. 동적으로 아이템을 추가하거나 삭제하는 기능을 넣어 보는것도 좋겠습니다. 또한 이전 포스트에서 살펴보았던 Panel 이동 방식 스크롤 뷰와 비교해서 장 단점을 생각 해 보세요.