[유니티] UNITY 게임 시작 화면에 간단하게 마우스에 반응하는 메뉴목록을 넣는 방법은 무엇입니까?

[유니티] UNITY 게임 시작 화면에 간단하게 마우스에 반응하는 메뉴목록을 넣는 방법은 무엇입니까?

안녕하세요. 오늘도 평화로운 가을을 재촉하는 역대급 태풍이 지나간 9월 초입니다.

게임 시작화면을 구성하다가 보면 시작화면의 메뉴들(시작하기 , 끝내기 , 설정 등)이 마우스가 올라가거나 할 때 크기가 커지거나 또는 색깔이 바뀌는 효과가 있으면 게임이 보다 다이나믹하게 느껴질 수 있습니다.

이때 사용하면 편리한 것이 Animation 과 마우스에 대한 Event Trigger 컴포넌트입니다.

How??? 어떻게 간단한 애니매이션을 만들고 사용하는지 알아보겠습니다.

다음의 순서로 진행하면서 각각의 다른 글자들이나 오브젝트에 적용하겠습니다.

1. 첫번째로 Animation을 만들고 Text 오브젝트에 적용
2. Animator에 Animation을 적절히 구성
3. Event Trigger의 Add New Event Type을 클릭해서 PointEnter를 Text 오브젝트에 추가
4. Event Trigger의 Add New Event Type을 클릭해서 PointExit를 Text 오브젝트에 추가


자세한 방법은 아래의 예제를 통해서 얘기하겠습니다.

---

[예제] 시작 화면에 간단한 마우스효과 넣기

먼저, 아래와 같이 화면을 구성하였습니다. Panel을 추가해서 이름을 ' Menu ' 로 하고 , 그 하위에 텍스트를 3개를 추가해서 각각 이름을 ' Start , End , SetUp ' 이라고 했습니다.

시작화면 구성

1. 첫번째로 Animation을 만들고 Text 오브젝트에 적용
; Assets / Animation 폴더를 만들고 그 하위에 마우스 우 클릭해서 Animation을 생성합니다.

Animation 생성

그리고, Animation을 2개 만들어서 , 이름을 ' SizeUp ' 과 ' SizeDown ' 으로 하고 이것을 ' Start ' 텍스트 오브젝트에 드래그앤드랍해서 연결합니다. 그러면 , Animator가 ' Start ' 라는 이름으로 자동으로 생성된 것을 확인 할 수있습니다.

Animator 생성

먼저, SizeUp을 더블 클릭하면 아래와 같이 Animation 창이 열립니다. 그리고 , ' Start ' 텍스트 오브젝트를 클릭하면 화살표 부분의 빨간 점 모양이 활성화가 됩니다. 이것을 클릭하면 Recording 모드가 되어 쉽게 애니메이션을 만들 수있습니다.

Animation recoding 모드

Recording 모드에서 세로줄을 드래그하여 0.2초 위치에 놓고 Text scale을 X:1.2 , Y:1.2 로 변경하면 아래와 같이 다이아몬드 모양의 키프레임이 자동으로 생성됩니다. 그리고 다시 빨간 점을 눌러서 Recording 모드를 해제하면 애니메이션이 생성이 끝이 납니다.

Animation SizeUp 생성

그리고 ' SizeUp '을 눌러서 ' SizeDown ' 을 선택한 다음에 빨간 점을 눌러서 Recording 모드로 만든 다음에 0초에서 Text scale을 X:1.2 , Y:1.2 로 변경하고, 0.2초 위치에 놓고 Text scale을 X:1 , Y:1 로 변경하고 다시 빨간 점을 눌러서 Recording 모드를 해제하면 애니메이션이 생성이 끝이 납니다.

Animation SizeDown 생성

2. Animator에 Animation을 적절히 구성
; Start 라는 이름의 Animator를 더블클릭하면 아래와 같이 Animator 창이 열립니다.

animator 창

마우스 우클릭을 해서 빈 state를 생성합니다.

empty state 생성

그리고 나서 빈 state를 최초 상태인 Default State 로 설정하기위해서 마우스 우클릭해서 ' Set as Layer Default State ' 를 선택합니다.

Set as Layer Default State 상태 설정

그리고, 마우스 우클릭을 해서 Make Transition을 클릭한다음에 SizeUp을 클릭해서 서로 연결해줍니다.

Make Transition 설정

같은 방식으로 해서 아래와 같이 Make Transition을 설정해 줍니다.

Make Transition 설정

Parameters의 ' + ' 를 클릭해서 Bool을 선택해 주면 Bool Parameter가 생성됩니다.

생성된 Bool Parameter의 이름은 ' Up ' 으로 하겠습니다.

Parameter 생성

SizeUp과 연결된 선을 클릭하면 아래와 같이 Inspector 창이 나오는데, Conditions 의 ' + ' 를 클릭해서 아래와 같이 Up Parameter 를 true로 설정합니다.

SizeDown과 연결된 선을 클릭하면 아래와 같이 Inspector 창이 나오는데, Conditions 의 ' + ' 를 클릭해서 아래와 같이 Up Parameter 를 false로 설정합니다.

Inpector 창 설정

그리고 , 마지막으로 new State와 연결된 선을 클릭해서, Conditions 의 ' + ' 를 클릭해서 위와 같이 Up Parameter 를 false로 설정합니다.

3. Event Trigger의 Add New Event Type을 클릭해서 PointEnter를 Text 오브젝트에 추가
; Parameter 값을 변경할 수 있는 스크립터를 만들도록 하겠습니다.

' TestSize ' 라는이름으로 스크립터를 만들고 아래와 같이 추가했습니다.

using UnityEngine;

public class TestSize : MonoBehaviour
{
    Animator anim; // Anomator 변수 생성

    private void Start()
    {
        anim = GetComponent<Animator>(); //Animator 컴퍼넌트를 찾아서 변수에 넣어둠
    }

    public void TestOut() // 텍스트 오브젝트에서 마우스가 빠져 나왔을 때 동작용 함수
    {        
        anim.SetBool("Up", false); // Animator 의 ' Up ' Parametor 값을 false로 변경함. 
    }

    public void TestEnter() // 텍스트 오브젝트에서 마우스가 들어갔을 때 동작용 함수
    {        
        anim.SetBool("Up", true); // Animator 의 ' Up ' Parametor 값을 true로 변경함.
    }
}

이렇게 작성된 스크립터를 드래그앤드랍으로 Start 텍스트 오브젝트에 추가합니다. 그리고 ' Add Component ' 를 클릭해서 ' Event Trigger ' 를 추가하고 ' Add New Event Type / PointerEnter ' 를 클릭해서 PointerEnter 이벤트를 추가합니다.

PointEnter 추가

아래와 같이 '+' 를 눌러서 이벤트를 아래와 같이 등록합니다.

Event Trigger 넣기

4. Event Trigger의 Add New Event Type을 클릭해서 PointExit를 Text 오브젝트에 추가

같은 방법으로 Add New Event Type을 눌러서 PointExit 이벤트도 아래와 같이 추가해 줍니다.

Event Trigger 추가

5. 실행화면

다른 2개의 텍스트 오브젝트에도 똑같이 적용한 다음에 실행을 하면 아래와 같이 잘 동작 하는 것을 확인 할 수 있습니다.

Mouse에 반응하는 글자

클릭했을 때 일어나는 동작들은 PointerClick을 하거나 PointerDown을 Event Trigger에 넣어서 처리할 수 있습니다.

마우스에 반응하는 목록에 대한 원리들은 다양하게 이용할 수 있는 요소가 있어서 게임을 만들 때 유용할 것 같습니다.

---

* 참고 : Event Trigger 요소는 아래와 같이 있습니다.
PointEnter : 마우스/터치가 오브젝트영역에 들어왔을 때
PointExit : 마우스/터치가 오브젝트영역에 나갈 때
PointDown : 마우스/터치가 오브젝트영역에 눌러졌을 때
PointUp : 마우스/터치가 오브젝트영역에 떼어 졌을 때
PointerClick : 오브젝트영역에 마우스클릭/터치했을 때

---

이번에 Event Trigger 방식으로 했지만, UnityEngine.EventSystems 네임스페이서를 추가해서 IPointerDownHandler, IPointerUpHandler 등의 인터페이스를 통해서도 똑같이 구현이 가능합니다. 이것은 다음 번에 다뤄보도록 하겠습니다.


그럼 오늘도 즐유!(즐거운 유니티) ^^