APP 개발 온라인 강좌 제7강 [7-2]-Drag Label 만들기(Panel설정)

  (4)  Draggable Panel 설정

‘Panel’오브젝트를 선택하고 Inspector에 있는 Add Component 버튼을 눌러서 NGUI > Interaction > Draggable Panel을 선택하여 컴포넌트로 추가합니다.

그리고 ‘Label’의 드래그가 세로축 방향으로만 일어나야만 하므로 Scale에서 Y의 값만 1로 놔두고, 나머지는 모두 0으로 변경해줍니다.

 

[그림 7-3]

 

(5)  ‘Label’의 Drag Panel Contents 설정

이번에는 Drag를 위한 Collider 영역을 따로 생성하지 않고 ‘Label’ 자체를 클릭 & 드래그 인식이 가능하게 만들어 사용해보겠습니다.

‘Label’ 오브젝트의 Inspector창으로 가서 Add Component 버튼을 눌러서 NGUI > Interaction > Drag Panel Contents 를 선택해서 컴포넌트를 추가합니다.

 

생성된 UIDrag Panel Contests (Script)에서 Draggable Panel에 자동으로 설정되어 있는 ‘Panel’을 클릭해서 실제로 우리가 드래그하고자 하는 패널이 제대로 설정되어 있는 것인지 확인해봅니다.

 

위의 그림과 같이 자동으로 설정되어 있는 ‘Panel’을 클릭해보면 Hierarchy창에서 설정된 객체를 표시해줍니다.

 

[그림 7-4]

그리고 ‘Label’ 오브젝트의 Inspector창에서 Add Component를 클릭해서 Physics > Box    Collider를 클릭해서 Collider 컴포넌트를 하나 추가해줍니다.

생성된 Box Collider 컴포넌트에서 Y Size를 50으로 변경해줍니다. (숫자가 50까지 줄 바꿈으로 들어갔으므로)

 

[그림 7-5]

 

설정이 끝났다면, 플레이 버튼을 눌러서 드래깅이 제대로 일어나는지 확인해봅시다.

 

(6)  ‘Panel’의 UIPanel 컴포넌트 설정

‘Panel’오브젝트를 선택하고, Inspector창에 있는 UIPanel (Script)컴포넌트에서 Clipping을 Soft Clip으로 변경시켜줍니다. 그리고 Size를 X = 28, Y = 450으로 변경시켜준 뒤에, Softness에서 X = 1, Y = 210으로 설정해줍니다.

 

[그림 7-6]