[Unity C#] Dynamic Menu에 따른 카메라 움직임 구현

World Makers에서 제작한 Deceit2 라는 게임의 메인메뉴 구성이 너무 마음에 들었다.
이를 필자의 프로젝트에 적용한 방법을 적어본다

---

시작하기에 앞서

메뉴 선택에 따라 카메라가 특정 공간으로 부드럽게 이동하면서 공간이 전환되는 다이내믹한 메뉴를 만들고 싶었다.

Deceit2의 메뉴 구성을 참고하여 필자의 프로젝트에 다음과 같이 구현해보았다.

 

위에 Setting과 Exit는 공간을 채우기 위한 용도이고, 플레이 와 장비 탭으로만 구현을 하였다.

 

다음과 같이 각각의 기능을 넣어둔 여러개의 캔버스가 존재한다.

상단 Canvas_Bar에서 버튼을 누를 때마다 카메라 이동 및 메뉴 표시가 될 것이다.

---

카메라 이동 애니메이션 구현

배경은 다음과 같은 맵을 준비하였다.

 

프로젝트 창에서 마우스 우클릭 > Create > Animation > Animation Clip을 생성하여 이름을 PlayAnimPos로 명명해준다.

 

하이어라키 창에서 움직일 카메라를 클릭해주고 원하는 위치를 지정해준다.

 

위와 마찬가지로 EquipAnimPos를 생성한 후 원하는 위치를 지정한 Animation Clip을 하나 더 만들어준다.

필자의 프로젝트에서는 메인 메뉴에서 움직이는 카메라는 UICamera이고 시작메뉴가 PlayPos이고, 장비 메뉴가 EquipPos로 진행하였다.

 

이를 구성하여 적용할 Animator Controller를 하나 만들어 이름을 CameraAnimationController로 지정하여 준다.

 

애니메이터 내부에서는 다음과 같이 서로 연결해주고 각각의 이동을 연결해줄 파라미터들을 생성하여준다.

 

이동하는 조건의 파라미터들을 Conditions에 지정해주고 Has Exit Time을 해제해주어 애니메이션 진행중에도 입력에 따라서 바로 바로 이동할 수 있게 해준다.

 

하이어라키 창으로 돌아가 UICamera에 방금 만들어 둔 Animator를 지정해준다.

 

---

기능 스크립트 구현

이 기능들을 적용할 C# Script를 제작하여 준다.

이름은 BarMenuManager로 명명해주었다.

 

// Camera
private Animator CameraObject;

readonly int m_HashPlayPos = Animator.StringToHash("playPos");
readonly int m_HashSettingPos = Animator.StringToHash("settingPos");
readonly int m_HashEquipPos = Animator.StringToHash("equipPos");

// Bar
public GameObject Canvas_Bar;
public TextMeshProUGUI Text_Play;
public TextMeshProUGUI Text_Equip;
public TextMeshProUGUI Text_Setting;

// Play
public GameObject Canvas_Play;

// Equip
public GameObject Canvas_Equip;

// Setting
public GameObject Canvas_Setting;

private TextMeshProUGUI CurrentPos;

관련 버튼과 오브젝트, 트리거에 사용할 해쉬 값들을 변수로 지정하여준다.

 

트리거 변수를 해쉬 값으로 저장해두는 이유는 애니메이터에 트리거를 셋팅할 때엔 매번 해쉬 값으로 바꾼 뒤 그 값을 애니메이터에 전달해주는데 이를 반복하면 성능적으로 아쉬운 면이 존재한다.

이를 해결하기 위해 시작 전 미리 해쉬값을 저장해준 뒤 이를 바로 보내면서 그 과정을 생략해주는 것이다.

 

 void Start()
 {
     CameraObject = GetComponent<Animator>();

     Canvas_Bar.SetActive(true);
     Canvas_Play.SetActive(true);
     Canvas_Equip.SetActive(false);
     Canvas_Setting.SetActive(false);

     CurrentPos = Text_Play;
     CurrentPos.color = Color.cyan;
 }

시작할 때 맨 처음 보여질 Canvas만 Active해주고 나머지는 InActive해준다.

 

public void PlayPos()
{
    CameraObject.SetTrigger(m_HashPlayPos);

    SetCurrentPos(Text_Play);

    Canvas_Play.SetActive(true);
    Canvas_Equip.SetActive(false);
    Canvas_Setting.SetActive(false);
}

public void EquipPos()
{
    CameraObject.SetTrigger(m_HashEquipPos);

    SetCurrentPos(Text_Equip);

    Canvas_Play.SetActive(false);
    Canvas_Equip.SetActive(true);
    Canvas_Setting.SetActive(false);
}

각각의 Pos를 셋팅할 때는 Trigger를 설정해주고 관련 Canvas를 Active해줌으로서 이동 및 Canvas 표시가 되도록 해준다.

 

---

최종 구현

UICamera에 방금 만든 스크립트를 넣어주고, 변수값에 맞는 오브젝트들을 넣어준다.

 

 

스크립트에 기능을 구현해두었으니 이를 버튼 클릭 이벤트에 지정하여 움직임을 보여줄 수 있도록 해준다.

 

결과는 다음과 같다.