[ 퍼온 글 ] [Unity3D 강좌] NGUI Example 7 - Scroll View (Panel)

[Unity3D 강좌] NGUI Example 7 - Scroll View (Panel)

 

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

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

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

 

1. 새로운 씬을 만들고 기본 카메라를 제거합니다. 메뉴>NGUI>Open the UI Wizard 항목을 선택해서 UI Tool 화면을 띄우고 Create Your UI 버튼을 클릭해서 NGUI 기본 뼈대를 만듭니다. 패널 하나에 다 구현 해도 되지만, 원본 예제는 디스플레이 화면과 스크롤 뷰 화면을 분리하고 있습니다. 똑같이 진행하겠습니다. 먼저 Panel을 하나 더 만듭니다. 기존 Panel을 선택하고 Ctrl+D 키를 누르면 복사됩니다. 첫 번째 패널은 "Panel (Clipped View)"로 이름을 바꾸고 두 번째 패널은 "Panel (Window)"로 바꿉니다.

 

2. 디스플레이 레이이아웃을 먼저 잡겠습니다. "Panel (Window)" 오브젝트의 하위로 Tiled Sprite 한장을 추가합니다. Wooden Atlas의 Wooden Background sprite를 사용했습니다. Depth는 충분히 뒤로 빼 놓습니다.

 

3. 다음 단계로 진행하기 전에 윗 화면을 자세히 보세요. Game 화면을 보면 배경 타일 스프라이트에 시커먼 줄이 나 있습니다. Scaling Style을 FixedSize로 설정하면 디바이스 해상도에 맞게 UI가 확대 축소 되는데, 스케일링 되면서 텍스쳐 스프라이트의 인접픽셀을 보간하는데 사용하기 때문입니다. 이 문제는 아주 고전적인 문제로 Unity3D나 NGUI의 문제가 아닙니다. 물론, PixelPerfect 옵션을 사용하면 해결이 되지만 모바일 환경처럼 다양한 디바이스를 지원하려면 어쩔 수 없이 PixedSize를 사용해야 합니다. 위 문제를 해결하는 전통적인 방법은 스프라이트에 보더 마진을 주는 방법입니다. 아래 그림처럼 Wooden Atlas를 선택하고 Border 마진을 주면 해결됩니다. Dimensions를 직접 입력해서 안쪽으로 마진을 주셔도 됩니다. 중요한 점은 그래픽 디자이너와의 협력이 필요한 부분이므로 사전에 약속해야 뒤가 편합니다.

 

4. 다시 본론으로 돌아가서, 스크롤 뷰 화면 영역을 스프라이트로 추가합니다. Wooden Atlas와 Highlight - Shadowed sprite를 사용했습니다. 추가한 스크롤 뷰 화면은 유저 입력을 받아 드래그 슬라이딩 할 영역 이므로 메뉴>Component>NGUI>Interaction>Drag Panel Contents 항목을 선택해서 UIDrag Panel Contents 컴포넌트를 추가합니다. Draggable Panel 필드는 Panel (Clipped View) 오브젝트를 할당할 예정입니다. 물론 아직 준비가 안되어서 할당 할 수 없습니다. 다음 단계에서 처리 해 보겠습니다.

 

5. Draggable Panel을 등록하기 위해 "Panel (Clipped View)" 오브젝트를 선택하고 UIDraggable Panel 컴포넌트를 추가합니다. 메뉴>Component>NGUI>Interaction>Draggable Panel 항목을 선택하면 됩니다. Transform은 이전 단계에서 만든 스크롤 뷰 화면의 중앙이 되도록 조절합니다. 스크롤링은 가로 방향으로만 할 예정이므로 Scale 필드의 y, z 속성은 0으로 지정합니다. Horizontal Scroll Bar 필드는 다음 단계에서 넣어 보겠습니다. 그 외 속성은 아래 그림처럼 입력 해 주세요.

 

6. 단계 4에서 약속한대로 Panel (Clipped View)를 Draggable Panel 필드에 드래그 드랍합니다. 이제 스크롤 뷰와 드래그 뷰와의 인터랙션 준비가 완료 되었습니다. 이 과정이 없으면 아이템 영역을 드래그 해야만 스크롤이 가능 합니다. 뷰의 어느 곳을 드래그 해도 스크롤이 가능하려면 이 과정이 필요합니다.

 

7. 단계 5에서 약속한 스크롤바를 연결 해 보겠습니다. 먼저 스크롤바를 만들어야죠. "Panel (Window)"를 선택하고 하위 위젯으로 스크롤바를 추가합니다. Background로 Highlight - Shadow를 사용하고 Foreground로 Button을 사용합니다. 위치는 적당히 스크롤 뷰 하단으로 옮깁니다.

 

8. Panel (Clipped View) 오브젝트를 선택하고 UIDraggable Panel 컴퍼넌트의 Horizontal Scroll Bar 필드에 전 단계에서 만든 스크롤바를 드래그 드랍해서 할당합니다. 이제 드래그 스크롤 뷰와 스크롤바의 인터랙션이 준비되었습니다. 제대로 작업 했다면 스크롤바는 화면에서 사라지게 됩니다. 왜냐하면 리스트 아이템이 없고 UIDraggable Panel 컴포넌트의 Show Scroll Bars 필드 속성이 OnlyIfNeeded로 설정되어 있기 때문입니다.

 

9. 이제 리스트 아이템을 만들어 보겠습니다. 아이템은 UIGrid 컴포넌트 위에 올라가야 합니다. "Panel (Clipped view)" 오브젝트를 선택하고 하위 빈 오브젝트를 만듭니다. 이름은 "UIGrid"로 변경합니다. 이어서 UIGrid 오브젝트를 선택하고 메뉴>Component>NGUI>Interaction>Grid 항목을 선택해서 UIGrid 컴포넌트를 추가합니다. Cell Width를 150, Height를 200으로 설정해서 디스플레이 될 아이템의 크기를 지정 해 주세요. 주의해야 할 점은 UIGrid의 피봇이 왼쪽이므로 x축 값을 -280 해 줍니다. (아래 캡쳐화면에는 안 나왔네요 ㅠㅠ)

 

10. 아이템을 만들어 봅시다. "UIGrid" 하위로 빈 오브젝트를 하나 만들고 이름을 "Item"으로 변경합니다. 이어서, 단계 4에서 했던 방법과 같이 UIDrag Panel Contents 컴포넌트를 추가합니다. Draggable Panel 필드는 자동으로 할당됩니다. 혹시 제대로 할당이 안 되어 있으면 Panel (Clipped View) 오브젝트를 드래그 드랍 하세요.

 

11. 디스플레이 테스트를 위해 "Item" 오브젝트의 하위로 Sliced Sprite를 한장 추가합니다. Fantasy Atlas의 Flat Outline 스프라이트를 사용합니다. 크기는 가로 세로 128 픽셀로 잡습니다. 아틀라스가 다르므로 배경과의 레이이웃을 조절하는데 Depth 시스템을 사용할 수 없습니다. Z축을 -1로 빼 주세요.

 

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

 

13. 게임을 실행하고 아이템을 드래깅 해 보면 얼추 그럴사하게 동작합니다. 이제 마무리를 해 보겠습니다. 동작 시켜보면 알겠지만, 아이템들이 스크롤 뷰 화면 영역 밖에서도 보입니다. 뷰 화면 영역으로 디스플레이를 제한 해 보겠습니다. "Panel (Clipped View)" 오브젝트를 선택하고 UIPanel 컴포넌트의 Clipping 필드를 Soft Clip으로 설정합니다. Center, Size, Softness 속성을 입력해야 하는데, 아래 그림처럼 값들을 설정합니다. 왼쪽 오른쪽 테두리가 부드럽게 클리핑되는 모습을 확인 할 수 있습니다.

 

14. 다 완성한것 같지만 버그가 하나 있습니다. 아이템 영역을 드래깅 해야만 스크롤링이 됩니다. 스크롤 뷰 영역을 드래깅 해도 같은 효과가 나게 하려면 어떻게 해야 할까요? 눈치 빠른분은 짐작 하셨겠지만, 단계 4에서 이미 스크롤뷰 영역에 UIDrag Panel Contents 컴포넌트를 추가 해 놨습니다. 그런데, 왜 동작 안 하는 걸까요? 사용자 입력을 체크 할 컬라이더가 없어서 그렇습니다. "Sprite (Highlight - Shadowed)" 오브젝트를 선택하고 메뉴>NGUI>Attach a Collider 항목을 선택하면 영역에 맞는 Box Collider가 자동으로 생성됩니다. 실행하면 스크롤뷰 영역을 마우스 드래깅 해도 스크롤링됩니다.

 

15. 완성 했습니다. 동적으로 아이템을 추가하거나 삭제하는 기능을 넣어 보는것도 좋겠습니다.