Unreal Engine 위젯 메뉴에 애니메이션을 적용하는 방법

 

이번 글에서는 메뉴 애니메이션에 대해 알아보고 위젯에 애니메이션을 적용하는 방법을 배우게 됩니다.

 

메뉴 위젯 설정

가장 먼저, 애니메이션을 적용하기 전에 **캔버스 패널(Canvas Panel)**을 설정해야 합니다.

1. 캔버스 패널 추가 및 배치: 팔레트에서 캔버스 패널을 가져와서 모든 하위 아이콘(Living Room, Sitting Room 등)을 담을 수 있도록 크기를 조절합니다.
2. 아이콘을 캔버스 패널로 이동: 이전에 만든 아이콘(버튼)들과 **탭 숨기기(Tab Hide)**를 포함하여 새 캔버스 패널 안으로 옮깁니다.
3. 캔버스 패널 이름 변경: 이 캔버스 패널의 이름을 **Menu Bar(메뉴 바)**라고 지정합니다.
4. 올바른 정렬: 중요한 점은 Menu Bar 캔버스 자체를 이동하는 것이 아니라, 그 안에 있는 버튼들과 Tab Hide를 선택하여 왼쪽으로 이동시키고 높이 참조에 따라 고정시키는 것입니다. 이렇게 하면 모든 요소가 올바르게 그룹화되고 정렬됩니다.

---

메인 메뉴 애니메이션 생성 및 설정

이제 메인 메뉴 애니메이션을 만들어 보겠습니다.

1. 애니메이션 바 열기: 창(Windows) 메뉴에서 **애니메이션 바(Animation bar)**를 엽니다. 저는 항상 애니메이션 바를 아래쪽에 두는 것을 선호합니다.
2. 새 애니메이션 생성: 애니메이션 바에서 Menu Animation이라는 새 애니메이션을 만듭니다.
3. 트랙 추가: Menu Bar 캔버스를 선택하고 애니메이션에 **트랙(Track)**을 추가합니다. **변형(Transform)**에서 **스케일(Scale)**의 X & Y를 선택합니다.

1. 키 프레임 설정 (좌우 애니메이션):

• 0초 지점에서 스케일 값을 0으로 설정하고 **키(Key)**를 만듭니다 (메뉴가 숨겨진 상태).
• 0.5초 지점(재생 시간 단축)으로 이동하여 스케일 값을 1로 설정하고 키를 만듭니다 (메뉴가 완전히 보이는 상태).
• **컴파일(Compile)**하고 **저장(Save)**하여 간단한 좌우 애니메이션을 완성합니다.

---

하위 메뉴(Sub-Tabs) 애니메이션 생성 및 복제

이제 각 방에 대한 하위 메뉴가 아래에서 위로 나타나는 애니메이션을 만들고 다른 메뉴에 복제하겠습니다.

1. 첫 번째 하위 메뉴 애니메이션 생성 (Living Animation):
   • Living Room 캔버스(하위 메뉴)를 선택하고 새 애니메이션 Living Animation을 만듭니다.
   • 트랙 추가: Transform에서 Scale을 선택합니다. 이번에는 Y축만 사용할 것입니다 (아래에서 위로 움직임).
   • 키 프레임 설정 (상하 애니메이션):
   • 0초 지점에서 Y 스케일을 0으로 설정하고 키를 만듭니다 (숨겨진 상태).
   • 1초 지점(재생 시간)으로 이동하여 Y 스케일을 1로 설정하고 키를 만듭니다 (보이는 상태).
   • **피벗(Pivot)**을 0으로 설정하여 아래쪽에서 위로 확장되도록 합니다.
   • 컴파일하고 저장합니다.

1. 애니메이션 복제:
   • Living Animation을 마우스 오른쪽 버튼으로 클릭하고 **복제(Duplicate)**를 선택합니다.
   • 이름을 Sitting Animation으로 바꾸고, 트랙을 마우스 오른쪽 버튼으로 클릭한 다음 Sitting 캔버스로 바꿔치기(Replace with) 합니다.
   • 마찬가지로 Kitchen Animation과 Meta Animation을 복제하고 해당 캔버스(Kitchen, Meta Hole)로 바꿔치기합니다.
2. 피벗 수정: 복제된 애니메이션들(Sitting, Kitchen, Meta)의 피벗이 1로 올바르게 설정되었는지 확인합니다. (이렇게 하면 애니메이션이 위에서 아래로 오는 것이 아니라 아래에서 위로 나타납니다).

---

초기 숨김 및 상호작용 설정 (블루프린트)

1. 하위 메뉴 초기 숨김 (이벤트 구성)

1. 그래프 열기: 위젯의 그래프(Graph) 탭으로 이동합니다.
2. 변수로 만들기: 모든 하위 메뉴 캔버스 패널(Living, Sitting, Kitchen, Meta Hall)을 선택하고 **변수로 만들기(Is Variable)**에 체크합니다.
3. Event Construct 노드: Event Construct 이벤트에서 시작합니다.
4. Set Render Opacity: 각 하위 메뉴 캔버스(Living, Sitting, Kitchen, Meta Hall)에 대해 Set Render Opacity(렌더링 불투명도 설정) 노드를 가져옵니다.
5. 불투명도 설정: 모든 Set Render Opacity의 불투명도(Opacity) 값을 0으로 설정하여 위젯이 시작될 때 모두 숨겨지도록 합니다.
6. 컴파일하고 저장하여 확인합니다.

2. 메인 메뉴 표시/숨기기 상호작용 (클래스 블루프린트)

이 상호작용은 **메인 메뉴 위젯 블루프린트(Main Menu Widget Blueprint)**에서 설정합니다.

1. 입력 이벤트: Tab 키 입력 이벤트를 사용합니다. 
2. 메뉴 애니메이션 노드: Menu Animation을 가져와서 **Play Animation Forward(애니메이션 정방향 재생)**와 Play Animation Reverse(애니메이션 역방향 재생) 노드를 사용합니다.

1. 불투명도 제어:
   • Play Animation Forward가 실행될 때, Menu Bar에 대한 Set Render Opacity를 가져와 불투명도를 1로 설정합니다 (메뉴 표시).
   • Play Animation Reverse가 실행될 때, Menu Bar에 대한 Set Render Opacity를 가져와 불투명도를 0으로 설정합니다 (메뉴 숨기기).
2. 하위 메뉴 숨기기 추가: 메뉴가 닫힐 때 (Play Animation Reverse 실행 시), 모든 하위 메뉴(Living, Sitting 등)에 대한 Set Render Opacity 노드를 가져와 불투명도를 0으로 설정하여 모두 숨겨지도록 합니다.

1. 디버그 및 수정: 뷰포트 문제(앵커 문제)가 발생할 경우, **앵커(Anchor)**를 **하단(Bottom)**으로 고정하여 문제를 해결합니다.

 

3. 하위 메뉴 표시/숨기기 상호작용 (버튼 클릭)

각 방 버튼을 클릭했을 때 해당 하위 메뉴가 나타나도록 설정합니다.

1. 버튼 클릭 이벤트: But Live 버튼(Living Room)을 선택하고 On Clicked(클릭 시) 이벤트를 추가합니다.
2. Flip Flop 노드: Flip Flop 노드를 사용하여 클릭할 때마다 A와 B를 번갈아 가며 실행하도록 합니다.
3. Living Animation 제어:

• A 핀: Living Animation에 대한 Play Animation Forward와 Living 캔버스에 대한 **Set Render Opacity(1)**를 연결합니다 (하위 메뉴 표시).
• B 핀: Living Animation에 대한 Play Animation Reverse와 Living 캔버스에 대한 **Set Render Opacity(0)**를 연결합니다 (하위 메뉴 숨기기)

1. 코드 정리: **Reroute Node(재경로 노드)**를 사용하여 코드를 깔끔하게 정리합니다.
2. 다른 버튼으로 복사: 이 로직을 Sitting, Kitchen, Meta Hall 버튼에도 복사하고 해당 하위 메뉴 캔버스 및 애니메이션 변수로 대체하여 모든 하위 메뉴에 대해 동일하게 작동하도록 합니다.

---

요약

이 강의의 주된 목표는 다음과 같은 애니메이션을 메뉴에 적용하는 방법을 보여주는 것입니다.

• 수평(Horizontal) 애니메이션 (메인 메뉴)
• 수직(Vertical) 애니메이션 (하위 메뉴)
• 다른 애니메이션에 종속된 메인 애니메이션 또는 하위 애니메이션

이제 여러분의 메뉴는 완전히 **기능적(functional)**이며 애니메이션이 적용되었습니다. 다음 강의에서 뵙겠습니다!