유니티5 독학하기 그 39번째 걸음-칩터3의 시작, 버튼 변화와 게임종료 구현

안녕하세요?

드디어 벼르고 벼르다가 NGUI에 관련된 책의 챕터3를 들어가고자 합니다. 이번 포스팅에서는 메인 메뉴의 메뉴 버튼위에 커서가 있으면, 버튼의 크기가 변하도록 설정을 하도록 하고, 다음으로는 게임종료 버튼을 구현한 내용을 포스팅 하고자 합니다.

먼저 Main이라는 UI Root 아래에 있는 게임 오브젝트의 위 스크린샷에 보이는 비활성화 된 부분을 다시 활성화를 시키도록 합니다.

그리고 이전까지 활성화가 되어 있던 UI Root의 Options 게임 오브젝트의 활성화 체크를 도로 끄도록 합니다.

이제 UI Root아래에 있는 Buttons의 자식 오브젝트인 play, Options, Exit등을 shift키를 눌러서 동시에 선택을 하도록 합니다.

Add Component라는 항목을 눌러서, Button Scale을 선택해서 위 스크린샷과 같이 만들어 주도록 합니다. 여기서 있는 Tween Target이라는 항목은 무엇을 타켓으로 해서 버튼의 스케일을 바꿀 것인가를 이야기하는데, none이라고 되어 있으면 이 컴포넌트가 주가된 게임 오브젝트를 기준으로 합니다.

Hover: 버튼 위에 커서가 있는 Hover상태일 때 버튼의 크기를 X,Y,Z 축을 기준으로 설정한다고 합니다.

Pressed: 버튼을 눌렀을 때 버튼의 크기를 설정 하도록 합니다.

Duration: 크기 변화에 걸리는 시간을 초 단위로 설정을 하도록 합니다.

그리고 여기서 짚고 넘어가야 하는 것이 이 Tween인데, start와 end사이에 중간값을 자동으로 입력을 해서 마치 크기가 자연스럽게 커지거나 줄어드는 것처럼 움직이게 해주는 효과를 줍니다. 이 속도도 일정하지 않고, 이래저래 중간값이 자동으로 매겨지는 속도까지 NGUI는 조절할 수 있다고 합니다.

이번에는 UI Root아래에 있는 Main 오브젝트를 선택하도록 해서, Add Component로 Tween Scale을 추가하도록 합니다. 이번에는 위 스크린샷에 보이는 요소들이 다음의 의미를 지닌다고 합니다.

From: Tween이 시작될 때 로컬 스케일의 X,Y,Z값

To: Tween이 끝날 때 X,Y,Z의 값

Play Style->once: Tween이 단 한번만 실행된다.

           ->loop: Tween이 무한히 반복되면서 실행된다.

           ->PingPong: Tween이 한번 실행되고 꺼꾸로 실행되는 것을 반복 합니다.

Animation Curve: Tween의 가속도를 설정하는 곡선이라고 합니다.

Duration: Tween의 시작에서 끝까지 걸리는 시간입니다.

Start Delay: Tween이 시작되기 전의 딜레이를 지정할 수 있습니다.

Tween Group: 그룹지정인데, 일종의 Tween의 ID와 같다고 할 수 있습니다. 나중에 나오지만, 동시에 실행되면 안되는 Tween은 이 값을 다르게 지정해야 합니다.

Ignore TimeScale: 이 옵션이 설정되면 언제나 정상 속도로 실행이 된다고 합니다.

On Finished: 트윈이 종료되었을 때 실행할 메소드를 선택할 수 있습니다.

그리고 관련된 수치들을 위 스크린샷과 같이 입력을 하도록 합니다. 이렇게 해서 설정을 하고 나면, 아래의 화면과 같은 결과를 볼 수 있습니다.

이것으로 제대로 메뉴위에 커서가 위치하면 버튼의 크기가 커지는 것을 볼 수 있습니다. 이렇게 해서 작업이 일달락은 되었고, 이제 게임을 종료하게 할 수 있는 Exit버튼을 구현하러 가 보도록 합니다.

이제 계층뷰에서 UI Root > Button > Exit를 선택해서 Add Component에서 위 스크린샷과 같이 Play Tween을 선택하도록 합니다. 

이 Play Tween이라는 메뉴가 나오도록 하는데, 여기서 Tween Target은 Tween 컴포넌트가 추가되어 있는 게임 오브젝트를 드레그 해서 위치 시키도록 합니다.

Include Children: 이 옵션이 체크되면 Play Tween컴포넌트가 target의 자식 오브젝트에 있는 Tween컴포넌트를 찾아가서 실행을 시킵니다.

Tween Group: 목표가 된 Tween의 ID를 지정하는 것으로, 타깃 오브젝트에서 같은 ID를 가지는 Tween 오브젝트를 실행시킨다고 합니다.

Trigger condition: 타깃 오브젝트의 Tween을 실행시키기 위한 이벤트를 선택할 수 있습니다.

Play direction->Toggle: 실행될 때마다 반대 방향으로 Tween이 실행된다고 합니다.

               ->Forward: Tween이 항상 정방향으로 실행됩니다.

               ->Reverse: Tween이 항상 역방향으로 실행됩니다.

if target is disabled->Do Nothing: 목표 오브젝트가 비활성화 상태이면 트윈을 실행하지 않는다고 합니다.

                      ->Enable Then Play:목표 오브젝트가 비활성화 상태이면 활성화 시키고 Tween을 실행합니다.

                      ->Ignore Disabled State: 목표 오브젝트가 비호라성화 상태이면, 목표 오브젝트가 보이지않더라도  

                         Tween을 무조건 실행 시킵니다.

On activation: 목표 오브젝트의 Tween이 이미 동작중일 때의 동작을 지정합니다.

                 -> Continue From Current: 현재 실행되고 있는 Tween을 계속해서 실행한다.

                 -> Restart Tween: 현재 실행되고 있는 Tween을 멈추고, 다시 시작한다.

                 -> Restart if not playing: Tween이 실행되고 있지 않은 경우에만 Tween을 다시 시작합니다.

When finished : Tween이 종료되었을 경우의 동작을 지정합니다.

                 -> Do not Disable: Tween이 종료되었을 때 아무 일도 일어나지 않습니다.

                 -> Disable After Forward: Tween이 정방향으로 실행되면, 끝날 때 까지 목표 오브젝트를 시활성화 합니다.

                 -> Disable After Reverse: Tween이 역방향으로 실행되면, 끝날 때 까지 타깃 오브젝트를 바활성화 합니다.

on Finished: Tween이 끝날 때 호출할 메소드를 지정합니다.

그러나 이렇게 Play Tween을 지정했다고 해서 바로 종료 버튼이 구현되는 것이 아니라, 여기서는 C#으로 된 스크립트를 제작해 주어야만 할 필요가 있습니다. 위 스크린샷처럼 일단 새로운 스크립트를 만들도록 합니다.

그래서 위 스크린샷처럼 MenuManager라고 지정을 하도록 합니다. 이렇게 지정이 다 되고나면, 이제 코딩을 할 시간이 되었습니다.

위 스크린샷처럼 일단 C#을 코딩하는데, 지금의 제 레벨로서는 위 코드에서 유저가 임의로 만든 Exit()라는 메소드를 만들었다는 것을 알 수 있지만, 저 if문 앞에 나오는 #이 지금으로서는 무슨 의미인지 모르겠고, 가운데에 있는 코드도 아직은 생소합니다. 다만 4장에서 C#에 대해서 다룬다고 하니, 그때 가서 더 자세히 볼 기회가 있을 듯 합니다.

마지막으로 위에서 추가한 Play Tween의 On Finished에서 먼저 Notify에 UI Root를 지정하도록 하고, Mehtod에서는 앞서 만들어 놓은 스크립트인 MenuManager를 선택, 그리고 하위메뉴로 Exit를 선택하도록 합니다.

이렇게 하는 것으로 일단 종료 버튼까지 구현하는 데는 성공하였습니다. 이제 앞으로 남은 포스팅에서는 Option메뉴 화면을 어떻게 해서 불러올 수 있으며, 메인메뉴 창을 어떻게 사라지게 하는 지에 대해서 포스팅을 할 차례가 남아 있습니다. 포스팅을 이어서 할 수도 있지만, 그렇게 되면 너무 길어진다는 느낌이 들어서, 이번에는 이렇게 중간에 자르도록 했습니다.