(9) ‘Panel’ Scroll 방향 설정
앞서서 설정한 것을 플레이 해서 이미지를 움직여보면 상하뿐만이 아니라 좌우로도 이미지가 움직이는 것을 확인할 수 있었습니다.
[그림 8-14]
WebToon은 상하로만 드래그가 일어나야 하므로, ‘Panel’ 오브젝트를 클릭해서 UIDraggable panel (Script)컴포넌트를 통해서 이를 수정해보겠습니다.
UIDraggable panel (Script)컴포넌트를 보면 Scale이라는 항목이 있습니다.
이 항목을 열어서 보면, X, Y, Z 값이 1, 1, 1로 들어있는 것을 볼 수 있습니다.
여기서의 Scale은 일반적으로 생각하는 사이즈가 아니라, X, Y, Z 축 방향으로 스크롤이 일어날지 말지를 On/Off 해주는 기능이라고 생각하면 됩니다.
즉, 현재 만들고 있는 WebToon UI예제에서는 상하로만 스크롤이 가능하도록 Y만 1로 해둔 채, 다른 값은 모두 0으로 변경시켜줍니다.
[그림 8-15]
그리고 플레이 버튼을 눌러서 이미지를 드래그하면서 움직여보면, 상하로만 이미지가 스크롤 되는 것을 볼 수 있습니다.
(10) ‘Panel’의 View영역 설정
다음으로는 Web Toon을 볼 수 있는 영역을 설정해보겠습니다.
‘Panel’ 오브젝트를 선택하고 Inspector창에서 UIPanel (Script) 컴포넌트의 Clipping을 None 에서 Hard Clip으로 바꿔줍니다.
그리고 Cliping될 사이즈를 X = 480, Y=640으로 설정해줍니다.
[그림 8-16]
설정을 끝내고 Scene View창을 보면, 클립으로 보일 영역이 자주색 선이 보일 것입니다.
그런데, 가장 위에 있는 이미지의 윗부분이 자주색 선 안에 온전히 다 들어가있지 않고, 위로 조금 올라가있는 것을 볼 수 있습니다.
[그림 8-17]
이는 Panel의 Y좌표와 Grid의 Y좌표가 동일하게 0인 상태에서 Panel의 높이를 이미지의 원래 크기인 1024가 아니라, 640으로 클립 했기 때문에 나타나는 현상입니다.
이러한 문제를 해결하기 위해서는 Grid를 아래로 조금 내려서 자주색 선에 그림의 윗부분이 온전히 들어오도록 조정을 해주면 됩니다.
‘Grid’ 오브젝트를 선택하고 Y 포지션을 -192로 변경시켜줍니다.
[그림 8-18]
그리고 다시 Scene창을 보면 Grid의 첫번째 이미지가 클립 View영역에 윗부분부터 정상적으로 들어가 있는 모습을 볼 수 있습니다.
이제 플레이 버튼을 눌러서 이미지를 위아래로 드래깅해보시길 바랍니다.
드래깅을 하다보면 가장 윗부분에서 이미지가 더 이상 존재하지 않는 윗부분을 보려고 드래깅을 하거나, 가장 아랫부분에서 이미지가 더 이상 존재하지 않는 아랫부분을 보려고 드래깅을 하는 행동을 할 경우, 이미지가 스프링이 튀듯이 움직이며, 다시 화면 안쪽으로 들어오는 모습을 볼 수 있습니다.
이는 Clip기능이 가진 또하나의 요소로써, 이렇게 스프링이 튀듯이 들어오게 만드는 효과는 UIDraggable Panel (Script) 컴포넌트의 Drag Effect 기능에서 지원합니다.
(None, Momebtum, MomentumAndSpring 이렇게 3가지 효과가 제공되고 있으니, 하나씩 바꿔가면서 플레이해서 확인해보시길 바랍니다.)
※
'유니티 강좌' 카테고리의 다른 글
| APP 개발 온라인 강좌 제8강 [8-5]-WebToon UI 만들기(Draggable Panel, Panel Collider 설정) (0) | 2014.07.21 |
|---|---|
| APP 개발 온라인 강좌 제8강 [8-4]-WebToon UI 만들기(Web Toon Image 넣기) (0) | 2014.07.17 |
| APP 개발 온라인 강좌 제8강 [8-3]-WebToon UI 만들기(UI Root (2D), Grid 생성) (0) | 2014.07.14 |
| APP 개발 온라인 강좌 제8강 [8-2]-WebToon UI 만들기(Atlas 만들기) (0) | 2014.07.10 |
| APP 개발 온라인 강좌 제8강 [8-1]-WebToon UI 만들기 (1) | 2014.06.16 |
