2.7 NGUI UIScrollView (스크롤뷰)

NGUI UIScrollView (스크롤뷰)

 

이번 강좌를 공부하시면,
아래 그림과 같이 NGUI의 UIScrollView(스크롤뷰)를 사용해서 여러 개의 아이템을 드래그하는 스크롤뷰 예제를 만들 수 있습니다.

 

2.7 NGUI UIScrollView (스크롤뷰)

스크롤 뷰는 화면 크기보다 보여줄 컨텐츠기 많을 때 스크롤을 통해서 볼 수 있도록 해줍니다.
NGUI도 역시 이러한 스크롤 뷰를 지원합니다. 스크롤 뷰는 가로방향 또는 세로방향으로 스크롤 할 수 있도록 구성 할 수 있는데, 예제에서는 세로 방향으로 구성하는 방법을 살펴보겠습니다.

스크롤 뷰를 생성해 보도록 하겠습니다.
유니티 에디터 메뉴에서 NGUI -> Create -> Scroll View메뉴를 선택해서 스크롤 뷰를 생성합니다.

 

하이어라키 뷰에서 생성된 Scroll View 게임 오브젝트를 선택한 뒤에 인스펙터 뷰를 확인합니다.
아래 그림과 같이 많은 파라미터들을 설정할 수 있도록 구성되어 있는 것을 확인할 수 있습니다.

 

UIScrollview 컴포넌트의 각 파라미터들의 내용은 아래 표와 같습니다.

파라미터	설명
Content Origin	스크롤 뷰의 피봇을 설정할 때 사용합니다.
Movement	스크롤 뷰의 방향을 지정합니다.
Drag Effect	스크롤 뷰를 드래그할 때 자연스러운 멈춤 효과를 사용하기 위한 메뉴입니다.
Scroll Wheel Factor	마우스 스크롤 버튼을 이용해서 스크롤할 때 사용되는 값 입니다. 0 이상의 값을 입력합니다.
Moventum Amount	스크롤 뷰를 드래그하고 놓았을 때의 적용 할 탄력을 지정합니다.
Restrict Within Panel	스크롤 뷰 내의 UI 위젯들이 패널을 벗어나지 않도록 할 때 사용합니다.
Cancel Drag If Fits	스크롤 뷰 내의 UI 위젯들이 패널 영역안에 모두 위치한 경우에는 스크롤을 사용하지 않고, 패널 영역을 벗어난 경우에만 스크롤이 가능하도록 할 때 사용합니다.
Smooth Drag Start	드래그가 시작될 때 UI 위젯들이 차례대로 드래그될 수 있도록 할 때 사용합니다. UI 위젯을 건너뛰는 현상을 방지하기 위해서 사용됩니다.
IOS Drag Emulation	스크롤 되는 UI 위젯들이 패널 영역을 넘어갈 때 드래그되는 속도가 감소합니다.
Scroll Bars	이 항목은 스크롤 바를 사용할 때 지정하는 항목입니다. –       Horizontal: 가로방향 스크롤 바를 지정합니다. –       Vertical: 세로방향 스크롤 바를 지정합니다. –       Show Condition: 언제 스크롤 바를 보여줄 지에 대한 상태를 지정합니다.

 

 

먼저 스크롤 뷰의 패널 크기를 조절하겠습니다.
하이어라키 뷰에서 Scroll View 게임 오브젝트를 선택하고 UIPanel 컴포넌트에 있는 Size 항목을 각각 500 / 600으로 값을 입력합니다.

 

그리고 아래 그림처럼 UIScroll View 컴포넌트에서 Movement 항목을 Vertical로 변경을 합니다.

 

이제 화면 크기를 벗어나는 컨텐츠들을 만들어 보겠습니다.
간단하게 스프라이트 위젯 여러 개를 세로로 일정한 간격으로 배치를 시켜보겠습니다.

일정한 간격으로 배치할 때에는 직접 스프라이트들의 간격을 트랜스폼의 y값을 이용해서 조절해도 되지만 NGUI의 UIGrid 컴포넌트를 이용하면 쉽게 배치할 수 있습니다. 그래서 보통 NGUI를 이용해서 스크롤 뷰를 구성할 때는 UIGrid 컴포넌트와 같이 사용하는 경우가 대부분입니다.

스프라이트를 일정한 간격으로 배치를 해야하기 때문에 UIGrid 생성을 하겠습니다.

유니티 메뉴에서 NGUI -> Create -> Grid 메뉴를 선택해서 Grid 위젯을 생성합니다.
하이어라키 뷰에서 아래 그림과 같이 배치가 되어야 합니다. Grid 게임 오브젝트가 위에서 새로 생성한 Panel 게임 오브젝트 하위에 위치해 있지 않으면 마우스로 드래그해서 배치합니다.

 

하이어라키 뷰에서 새로 생성된 Grid 위젯을 선택하고 인스펙터 뷰를 확인합니다.
그리고 아래 그림과 같이 Arrangement 항목은 Vertical로 설정하고, Cell Width / Cell Height 항목은 각각 250 / 100으로 설정합니다.
나머지 설정은 기본 설정 그대로 둡니다.

 

이제 스프라이트 여러개를 생성해서 Grid 게임오브젝트의 자식 게임오브젝트들로 만들어 주면 배치가 잘 됩니다.

하이어라키 뷰에서 Grid 게임 오브젝트를 클릭합니다. 그리고 유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard(Legacy) 메뉴를 선택합니다. Widget Tool 창이 나타나면 Template 항목은 Sprite로 Sprite 항목은 NGUI로 설정하고 AddTo 버튼을 눌러서 스프라이트 생성합니다.

 

스크롤 뷰 내에서 스프라이트 등의 위젯이 스크롤 되기 위해서는 NGUI 시스템에 해당 위젯이 스크롤에 사용된다고 알려줘야 합니다.
이 작업은 스크롤 되어야 하는 위젯에 UIDrag Scroll View 컴포넌트를 추가해 주면 됩니다.

생성한 스프라이트에는 아직 UIDrag Scroll View 컴포넌트가 추가되지 않았기 때문에 추가해 주도록 하겠습니다.

하이어라키 뷰에서 Sprite 게임 오브젝트를 선택합니다. 그리고 인스펙터 뷰로 가서 Add Component 버튼을 클릭하고 “Drag Scroll View” 라고 검색을 하고 엔터를 눌러서 컴포넌트를 추가합니다.

Drag Scroll View 컴포넌트가 추가되었으면, 유니티 에디터 메뉴에서 NGUI -> Attach -> Collider 메뉴를 선택해서 Collider를 추가합니다. 이렇게 하면 Sprite 게임 오브젝트에 UIDrag Scroll View 컴포넌트와 Box Collider 컴포넌트, 두 컴포넌트가 추가 된 것을 확인할 수 있습니다.

 

스크롤 뷰를 구성하기 위한 작업이 많습니다.
이제 몇 가지만 더 진행하면 스크롤 뷰를 완성할 수 있습니다.

위 그림에서 UIDrag Scroll View 컴포넌트를 살펴보면 Scroll View 항목이 None으로 설정되어 있지 않은 것을 확인할 수 있습니다. 이 항목에 스크롤 뷰를 드래그해서 설정해 줘야 합니다.

아래 그림과 같이 하이어라키 뷰의 Scroll View 게임 오브젝트를 UIDrag Scroll View의 Scroll View 항목으로 드래그해서 설정합니다.

 

이제 스프라이트 위젯이 스크롤 되기 위한 준비는 끝이 났습니다.
이렇게 구성한 NGUI 스프라이트를 하이어라키 뷰에서 여러 개를 복사합니다. 10개정도를 복사해 보겠습니다.
복사를 하고 하이어라키 뷰를 확인해보면 아래 그림과 같이 배치가 되어 있어야 합니다.

 

복사를 여러 개 했지만 아직 일정한 간격으로 배치가 되지 않고 아래 그림과 같이 스프라이트 하나가 배치 된 것처럼 보입니다.

 

이를 세로 방향으로 일정한 간격으로 배치시켜보겠습니다.
하이어라키 뷰에서 Grid 게임 오브젝트를 선택합니다.
그리고 아래 그림과 같이 인스펙터 뷰에 가서 UIGrid 컴포넌트의 이름 부분에 마우스를 가져간 뒤에 마우스 오른쪽 버튼을 누르고 Execute 메뉴를 클릭합니다. 이 메뉴만 눌러주면 스프라이트가 알아서 세로 방향으로 배치 됩니다.

 

Execute 메뉴를 클릭하고 결과를 보면 아래와 같이 스프라이트들이 배치된 것을 확인할 수 있습니다.

 

이제 유니티를 실행하고 화면에 마우스를 대고 클릭을 해서 스크롤을 하거나 또는 마우스 휠을 드래그하면 스프라이트들이 스크롤 되는 것을 확인할 수 있습니다.

 

 

동작을 확인해보면, 스크롤은 되지만 어딘가 스크롤 동작이 어색하게 느껴집니다.
스크롤 동작을 잘 살펴보면, 마우스 커서의 위치가 스프라이트 위에 있어야만 스크롤이 되는 상태입니다.
마우스 커서의 위치가 스프라이트 사이에 위치하면 스크롤이 되지 않습니다.

NGUI의 스크롤 뷰는 스크롤이 진행이 될 때 마우스 커서가 Box Collider 위에 위치해야 스크롤이 되도록 구현이 되어 있기 때문에 지금 상태에서는 스프라이트 위에 마우스 커서가 위치해야만 스크롤이 제대로 동작합니다.

이를 해결하기 위해서는 스크롤 영역을 지정해 줘야 합니다. 스크롤 영역은 패널 크기만큼의 보이지 않는 위젯을 생성하고 생성한 위젯에 Box Collider 와 UIDrag Scroll View 컴포넌트를 추가해 주면 됩니다.

스크롤 영역을 지정하는 보이지 않는 위젯 (Invisible Widget)을 생성을 해보겠습니다.
그 전에 패널을 하나 따로 생성을 합니다. 하이어라키 뷰에서 UIRoot 게임오브젝트를 선택합니다.
그리고 유니티 에디터 메뉴에서 NGUI -> Create -> Panel 메뉴를 선택해서 패널을 생성합니다.

 

패널을 새로 생성한 이유는 스크롤 뷰 패널 밑에 Invisible 위젯을 바로 생성하면 스크롤 되면서 Invisible 위젯도 같이 스크롤되기 때문에 엉뚱하게 동작하게 됩니다. 따라서 패널을 따로 두고 Invisible 위젯을 다른 패널 밑에 위치시켜서 스크롤 뷰의 동작과 관계 없이 영역만 지정해주기 위해서 패널을 새로 생성한 것입니다.

이제 Invisible 위젯을 생성할 차례 입니다.
하이어라키 뷰에서 Panel 게임 오브젝트를 선택합니다. 그리고 유니티 에디터 메뉴에서 NGUI -> Create -> Widget 을 선택합니다.

아래 그림과 같이 Container 라는 이름의 게임 오브젝트가 Panel 게임 오브젝트 밑에 생성된 것을 확인할 수 있습니다.
Container 게임 오브젝트를 선택하고 인스펙터 뷰에 가서 Size 항목을 각각 500 / 600으로 패널의 크기와 맞춰 줍니다.

 

이 상태에서 위에서 스프라이트 위젯에 했던 것과 동일하게 Container 게임 오브젝트에 UIDrag Scroll View 컴포넌트와 Box Collider를 추가합니다.
추가된 UIDrag Scroll View 컴포넌트의 Scroll View 항목도 하이어라키 뷰의 Scroll View 게임 오브젝트를 드래그해서 설정 합니다.

 

이제 동작을 확인해 보겠습니다.

 

이제는 스크롤 영역 안에만 마우스 커서가 위치하면 스크롤이 잘 동작하는 것을 확인할 수 있습니다.

 

내용 끝까지 읽어주셔서 감사합니다.

배너 클릭은 저에게 많은 힘이 됩니다.

감사합니다 🙂