APP 개발 온라인 강좌 제6강 [6-3]-버튼으로 오브젝트 움직이기(Label이동 FSM 만들기)

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 Editor의 Events탭에 있는 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 Object가 Use 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 Event를 FINISHED로 설정해주고 세팅을 마칩니다.

 

 [그림 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 액션의 설정 값들이 잘못 들어간 부분이 없어야 합니다.