유니티 강좌2014. 6. 16. 11:51

8.    WebToon UI 만들기

 

 

<만들 예정인 결과물>

 

[그림 8-1]

이 예제를 만들기 위해서는 웹툰 이미지가 필요합니다.

이미지는 IdeaLink 홈페이지(http://www.idealink.kr)에서 Groups 메뉴의 Smart Academy Board를 클릭해서, 게시물들 중에 Web Toon Image 게시물을 안에 있는 Webtoon.zip 압축파일을 다운 받으시면 됩니다.

 

 

(1)  WebToon UI 구성

1)    스크롤 화면

NGUI에서 스크롤링이 가능한 화면을 만들기 위해서는 Sprite, Button 등의 실질적인 이미지 Widget들을 모두 포함하는 PanelDraggable되어야 합니다.

 

2)    스크롤 바

        Panel이 드래깅 되는 것을 제어하거나, 드래그 된 위치를 스크롤 바로 표현해야 합니다.

 

(2)  씬 만들기

이전 강좌에서 사용했던 ‘NGUI Control Sample’프로젝트에서 새로운 씬(File > New Scene)을 엽니다.

‘Main Camera’를 지우고 ‘WebToonUI’라는 이름으로 씬을 저장(Ctrl+S)합니다.

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 4. 16:51

(7)  스크롤 바 만들기

Widget Tool 창에서 TemplateScroll Bar로 두고 AnchorAdd To 버튼을 눌러 오브젝트를 생성합니다.

 

 

[그림 7-7]

 

[그림 7-8]

 

      그리고 생성한 ‘Scroll Bar’의 포지션을 X = 50, Y = 210값을 넣어 ‘Label’의 옆에 오도록 조정을 해줍니다.

 

다음으로는 ‘Panel’의 드래깅과 연계가 되도록 ‘Panel’을 선택해서 UIDraggable Panel (Script) 컴포넌트에 있는 Vertical Scroll Bar 기능에 Hierarchy창에 있는 ‘Scroll Bar’를 드래그해서 넣어줍니다.

         

[그림 7-9]

 

그리고 플레이 버튼을 눌러서 스크롤 바가 드래깅에 맞춰서 잘 반응을 하는지 체크해봅시다.

 

  (8)  ‘Label’ 포지션 조정

플레이를 시작했을 때, ‘Label’의 시작부분이 1부터 화면에 보이도록 ‘Label’의 포지션을 변경합니다. 이때 플레이 한 상태에서 값을 바꾸면 플레이모드에서 빠져나오면 사라지게 되니 플레이모드에서 동작을 확인하고 플레이모드를 끄고 값들을 수정합니다.

‘Label’을 선택하고 Transform에서 Y 포지션 값을 -474로 수정해줍니다.

 

[그림 7-10]

 

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 4. 16:25

  (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 Size50으로 변경해줍니다. (숫자가 50까지 줄 바꿈으로 들어갔으므로)

 

[그림 7-5]

 

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

 

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

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

 

[그림 7-6]

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 4. 14:09

7.    Drag Label 만들기

 

 

<만들 예정인 결과물>

[그림 7-1]

 

(1)  씬 만들기

이전 강좌에서 사용했던 ‘NGUI Control Sample’프로젝트에서 새로운 씬(File > New Scene)을 엽니다.

‘Main Camera’를 지우고 ‘Drag Label’이라는 이름으로 씬을 저장(Ctrl+S)합니다.

 

 

(2)  UI Root (2D) 생성

UI Tool(상단의 NGUI > Create a New UI 메뉴로 오픈)에서 Create Your UI 버튼을 눌러서 UI Root (2D), Camera, Anchor, Panel 오브젝트를 생성합니다.

생성된 ‘Camera’ 오브젝트의 Camera 컴포넌트에서 Clear FlagsSolid Color로 설정합니다.

 

 

(3)  Label 생성

Widget Tool에서 AtlasScifi, FontScifi Font – Normal로 지정하고, TemplateLabel로 지정한 뒤, Add To 버튼으로 ‘Panel’에 생성합니다.

 

 

[그림 7-2]

 

 

생성한 ‘Label’을 선택하고 UILabel (Script) 컴포넌트에서 ‘New Label’이라고 적혀있는 내용을 지우고, 숫자를 1부터 ~ 50까지, 매 숫자를 적을 때마다 엔터를 쳐서 줄을 바꿔 적어 넣습니다.

 

※  숫자를 적게 적어 넣어서 화면의 Y축 범위를 넘어설 만큼 ‘Label’의 범위가 길어지지 않으면, 한 화면에 오브젝트가 모두 보여서 드래깅이 일어날 필요가 없기 때문에 드래깅이 일어날 수 없게 됩니다.


 

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 4. 13:38

6. 버튼으로 오브젝트 움직이기 

   (6)  FSM Templates 만들기

‘Left Button’을 선택한 상태에서 Playmaker Editor창의 빈 곳을 우 클릭 > Save Template을 클릭합니다.

 

 

[그림 6-16]

 

그리고 나타나는 팝업 창에서 ‘Label Move(Button).asset’ 이라는 이름으로 저장합니다.

 

 (7)  Label 이동 FSM 만들기 – Left Button

‘Right Button’을 선택하고 Playmaker Editor창의 빈 곳을 우 클릭 > Add Template > General > Label Move(Button)을 클릭합니다.

 

  

[그림 6-17]

 

그러면 앞서 저장해두었던 ‘FSM MOVE TO LEFT’ 템플릿이 로드 되어 있는 것을 볼 수 있습니다. 이것을 ‘Right Button’에 맞게 수정을 하겠습니다.

 먼저 FSM의 이름을 ‘FSM MOVE TO RIGHT’로 변경시켜줍니다.

 

 

[그림 6-18]

  

그리고 ‘Move To Left’ State 이름을 ‘Move To Right’로 고쳐주고, iTween Move Add 액션의 Vector 값에서 X 값에 들어있는 -0.5 0.5로 변경시켜줍니다.

 

[그림 6-19]

 

마지막으로 Hierarchy창에 있는 ‘Right Button’을 클릭하고 Inspector창에서 UIEvents To Playmaker FSM (Script) 컴포넌트를 찾은 뒤, Target FSM에서 [None(Play maker FSM)]이라고 되어 있는 곳에 Hierarchy창에 있는 ‘Right Button’을 드래그하여 넣어줍니다.

 

이제 플레이 버튼을 눌러서 ‘Right Button’이 제대로 동작하는지 확인해보세요.

 

Tip.

1)     ‘Right Button’ 버튼이 클릭이 잘 되지 않는다면, UIEvents To Playmaker FSM (Script) 컴포넌트가 있는지 확인해보세요.

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 3. 17:04

6. 버튼으로 오브젝트 움직이기

 

   (5)  Label 이동 FSM 만들기 – Left Button

Hierarchy창에서 ‘Left Button’을 선택하고, Playmaker Editor(상단의 PlayMaker > PlayMaker Editor 메뉴를 사용해서 열 수 있습니다.)에서 마우스 우 클릭 > Add FSM 클릭을 하여 FSM을 생성합니다.

그리고, 생성한 FSM의 이름을 ‘FSM MOVE TO LEFT’라고 지어주고, State 1의 이름을 ‘Listen Click’ 이라고 변경해줍니다.

 

[그림 6-6]

 그리고 버튼에 있는 UIEvents To Playmaker FSM 컴포넌트의 OnClick 이벤트를 사용해야 하므로, Playmaker EditorEvents탭에 있는 Add Event 칸에 ‘OnClick’(대소문자 정확하게)을 타이핑 후, Enter키를 눌러서 이벤트를 생성합니다.

 

[그림 6-7]

 

     UIEvents To Playmaker FSM 컴포넌트는 NGUI로 생성된 오브젝트가 특정한 상황일 때, 연결된 FSM에 상황에 맞는 Event 명이 있으면, 그 이벤트를 발동시키는 역할을 합니다.

지금의 예제에서는 버튼을 클릭해서 Label을 움직여야 하므로, 버튼 오브젝트가 클릭이라는 상황일 때, UIEvents To Playmaker FSM 컴포넌트에서 ‘OnClick’이라는 Event 명을 찾아서 발동시킬 수 있게 해야 하기 때문에 ’Listen Click’ State‘OnClick’ Event를 만들어 넣은 것입니다.

 

Playmaker Editor창에서 ‘Listen Click’ State를 마우스 우 클릭했을 때 나오는 Add Transition 에서 방금 생성한 ‘OnClick’ 이벤트를 찾아 연결시켜줍니다.

 

[그림 6-8]

  Playmaker Editor창의 비어 있는 부분을 마우스 우 클릭 > Add New State 클릭을 해서 새 State를 만들고 State 이름을 Move To Left 라고 지어줍니다. 그리고 ‘Listen Click’ State ‘OnClick’ 이벤트를 클릭 & 드래그해서 나온 이벤트 경로 화살표를 ‘Move To Left’ State에 연결시켜서, ‘OnClick’ 이벤트 타겟이 ‘Move To Left’ State가 되도록 지정해줍니다.

 

‘Move To Left’ State를 우 클릭했을 때 나오는 Add Transition 에서 FINISHED를 찾아 클릭해서 이벤트로 등록해준 뒤, FINISHED이벤트의 경로 화살표를 ‘Listen Click’ State에 연결시켜줍니다.

 

[그림 6-9]

 

‘Move To Left’ State를 선택하고, Action Brower 버튼을 클릭해서 iTween > iTween Move Add 액션을 찾아서 더블 클릭하여 ‘Move To Left’ State에 추가합니다.

  

[그림 6-10]

 

‘Move To Left’ State를 선택하고 Playmaker Editor창의 State탭을 보면, iTween Move Add 액션이 State에 들어가 있는 것을 볼 수 있습니다.

     iTween Move Add 액션은 오브젝트를 움직이는 액션 중 하나로써 현재의 오브젝트의 위치에서 특정 Vector3 값을 더하거나 빼는 것으로 이동시킬 때, 시간이나 속력을 지정하고, 오브젝트가 움직이는 방향으로 자연스럽게 턴을 할 수 있는 기능까지 갖춘 고급액션입니다.

처음에 iTween Move Add 액션을 보면 움직일 Game ObjectUse Owner로 되어 있는데, 이것을 클릭해서 Specify Game Object로 변경시켜줍니다. (움직여야 하는 대상이 자신이 아니라 타겟으로 한 오브젝트이기 때문입니다.)

그리고 아래에 None (GameObject)라고 붉은색 칸이 나타나면, Hierarchy창에서 움직여야 할 Label을 찾아서 드래그인 하여 넣습니다.

 

[그림 6-11]

 

 아래로 내려가보면 Vector라는 항목이 있는데, 이 항목은 위에서 설정한 GameObject를 어느 방향으로 얼만큼 이동시킬 것인지 지정하는 부분입니다.

우선 옆에 줄무늬 2개가 있는 버튼을 눌러서 Use Variable 상태를 Off시킵니다. 그리고 아래에 나타난 X, Y, Z 값을 입력하는 곳에서 X-0.5를 입력합니다.

 

 

[그림 6-12]

 

, x축 방향으로 -0.5만큼 이동시키겠다는 의미입니다. 아래로 내려가 Time에는 0.5를 입력하고, Look At은 사용하지 않을 것이므로 체크가 해제되어 있는지 확인을 합니다. 그리고 Events에서 Finish EventFINISHED로 설정해주고 세팅을 마칩니다.

 

 [그림 6-13]

 

      Time에 넣은 0.5의 의미는 0.5초 동안 Vector에 입력된 값만큼 이동시키겠다는 의미입니다.

     Look At을 사용하게 되면, 버튼이 움직이면서 우리가 보고 있는 버튼의 면이 -0.5지점의 방향(좌측방향)을 바라보도록 회전을 하게 됩니다.

  그렇게 되면 버튼이 옆으로 돌아가서 클릭을 하지 못하는 사태가 발생하므로 사용하지 않는 것입니다.

 

마지막으로 Hierarchy창에 있는 ‘Left Button’을 클릭하고 Inspector창에서 UIEvents To Playmaker FSM (Script) 컴포넌트를 찾은 뒤, Target FSM에서 [None(Play maker FSM)]이라고 되어 있는 곳에 Hierarchy창에 있는 ‘Left Button’을 드래그하여 넣어줍니다.

 [그림 6-14]

 이제 플레이 버튼을 눌러서 ‘Left Button’을 클릭했을 때, 어떤 현상이 일어나는지 확인해보겠습니다.

 

[그림 6-15]

 

 이 그림과 같이 가운데 있던 Label이 좌측으로 잘 이동을 했다면 정상입니다.

Tip. 잘 되지 않을 경우, 다음 항목을 체크해보시길 바랍니다.

 1)     ‘Left Button’ 오브젝트에 UIEvents To Playmaker FSM (Script) 컴포넌트가 있어야 합니다.

 2)     ‘Left Button’ 오브젝트에 들어있는 ‘FSM MOVE TO LEFT’ FSM 안에서 ‘Listen Click’에 설정되어 있는 이벤트의 명칭이 대소문자까지 정확하게 UIEvents To Playmaker FSM (Script) 컴포넌트에 있는 On Click Event와 연결되는 String(‘OnClick’)과 일치해야 합니다.

 3)     iTween Move Add 액션은 ‘Move To Left’ State 안에 있어야 합니다.

 4)     iTween Move Add 액션의 설정 값들이 잘못 들어간 부분이 없어야 합니다.

 


 


 

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 2. 15:09

 6. 버튼으로 오브젝트 움직이기

 

  (3)  UI Root (2D) 생성

UI Tool(상단 메뉴의 NGUI > Create a New UI로 오픈)에서 Create Your UI 버튼을 눌러서 UI Root (2D), Camera, Anchor, Panel 오브젝트를 생성합니다.

생성된 ‘Camera’ 오브젝트의 Camera 컴포넌트에서 Clear FlagsSolid Color로 설정하고 Background 색상을 검정색으로 변경합니다.

 

[그림 6-2]

 

(4)  Label과 버튼 생성

Widget Tool(상단의 NGUI > Create a Widget 메뉴로 오픈)에서 AtlasSciFi Atlas, 폰트를 SciFi Font – Normal로 지정하고, 앞서 생성한 ‘Panel’의 하위객체로 Label 1개와 버튼 2개를 생성합니다.

 

(SciFi AtlasSciFi Font – Normal Project창의 NGUI > Examples > Atlases > SciFi에서 찾을 수 있습니다.)

 

생성된 Button 2개의 이름을 각각 ‘Left’‘Right’로 변경시키고, Label의 내용을 자유롭게 한 두 개의 단어 구성으로 변경해줍니다.

 

 

[그림 6-3]

 

그리고 버튼 2개의 위치를 아래의 그림처럼 적절한 위치에 배치시켜줍니다.

(그림에서와 같이 Hierarchy창에서 오브젝트 이름을 구분하기 쉽게 바꿔주는 것을 습관화 하는 것이 좋습니다.)

 

그리고 앞서서 다운받아두었던 UIEventsToPlaymakerFSM.cs Project창에 드래그인 하여, Asset으로 등록합니다.

[그림 6-4]

Project창에서 UIEventsToPlaymakerFSM.cs를 드래깅하여 Hierarchy창에 있는 버튼에 각각 한번씩 넣어서 컴포넌트로 등록합니다.

 

[그림 6-5]

※ Project 창에서 오브젝트의 Inspector 창에 드래그인 할 때는, Add Component 버튼의 아래쪽 위치로 드래그인을 해야 컴포넌트로 넣을 수 있습니다 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 2. 14:59

6. 버튼으로 오브젝트 움직이기

 

<만들 예정인 결과물>

[그림6-1]


(1) NGUI Button과 FSM


NGUI로 생성한 Button을 조작했을 때, Playmaker의 FSM을 통해서 특정한 행동을 일으키기 위해서는 NGUI와 Playmaker를 연결시키기 위한 별도의 스크립트가 필요합니다.

그 스크립트의 이름은 ‘UIEventsToPlaymakerFSM.cs’이며 Playmaker를 제작한 Hutonggames社에서 제공하는 스크립트 입니다.

UIEventsToPlaymakerFSM.cs 스크립트를 구하기 위해서는 Hutonggames 홈페이지(http://www.hutonggames.com)에서 접속하여 해당 스크립트를 검색하여 구하거나, IdeaLink 홈페이지(http://www.idealink.kr)에서 Grups 메뉴의 Smart Academy Board를 클릭해서 게시물들을 살펴보면, 그 중에 UI Event To PlayMaker라는 게시물이 있는데, 그 게시물을 안에 있는 UIEventsToPlaymakerFSM.cs압축파일을 다운 받으시면 됩니다.


(2) 씬 만들기


이전 강좌에서 사용했던 ‘NGUI Control Sample’프로젝트에서 새로운 씬(File > New Scene)을 엽니다.
‘Main Camera’를 지우고 ‘Label Move’라는 이름으로 씬을 저장(Ctrl+S)합니다.
(저장 경로는 NGUI Control Sample > Asset > Scenes 폴더로 지정해줍니다.)

그리고 Playmaker 패키지 파일을 Import 시켜서 설치해줍니다.
(상단 메뉴의 Asset > Import Package > Custom Package를 클릭해서 Import 시킵니다.)

Posted by 알 수 없는 사용자