NGUI Scroll View (Panel) 분석

NGUI스크롤뷰 분석 

NGUI예제의 Example 7 - Scroll View를 열어 가장 간단하게 수정 하였습니다.

아이폰 3GS에서 테스트 해보기 위해 아이폰 프로젝트, 해상도를 320 * 480에서 작업 하였습니다.

계층구조는 다음과 같습니다.

UI Root 

Camera

Anchor - Center

Window Root 

예제에서 사용된 Tween Rotation은 제거 했습니다. ( 스크롤뷰와는 별개로 동작하는거라..)

Panel View

패널뷰에 실제 아이템들이 들어 있습니다.

UIGrid

Item

예제를 좀 수정 하였습니다.

UIRoot의 자식들의 위치를 0,0으로 마췄습니다.

Camera : 0, 0, 0 

> Anchor - Center 0, 0, 0 

> Window Root 0, 0, 0 

> UIPanel (Clipped View) 0, 0, 0 

> UIGrid 0, 0, 0 

Flash에서도 이와 같은 컴퍼넌트를 자주 만들었었는데요 

플래시를 해보신 분은 아시겠지만 마스크 기능을 넣어서 제작 하곤 합니다.

이 예제에서 마스크 역활을 하는것이 UIPanel인데요 

인스펙터의 UIPanel(Script)를 보시면 Clipping이라는 속성이 있습니다. 

그 속성을 조절하여 마스크의 넓이 위치를 설정 할수 있었습니다.

 하단부분의 Center On Items 의 체크박스는 UIGrid의 인스펙터 컴포넌트중 UICenter On Child(Script)에 영향을 줍니다.

그럼 아래 체크 박스를 제거 하면 깔끔하게 스크롤 뷰만 남게 되었네요 

< 정리 >

많은 게임들에서 이미 많이 쓰고 있는 스크롤뷰 !! 

랭킹, 친구리스트, 아이템리스트등의 많은 부분에서 사용되고 있는 스크롤뷰를 유니티 3D의 서브파트 플러그인인 NGUI를 사용하여 간단히 만들어 보기 위해 분석을 시작했습니다.

UI Root - { UIRoot Script }

 > Camera - { Camera, UICamera Script , Audio Listener, Audio Source }

> Anchor - Center { UIAnchor Script }

> Window Root 

> UIPanel ( Sclipped View ) { UIPanel Script , UIDraggable Panel Script, Spring Panel Script }

> UIGrid { UICenter On Child Script, UIGrid Script }

> Item { Box Collider, UIDrag Panel Contents Script }