06.26 Unreal 본캠프) UI 애니메이션 효과 및 3D 위젯 UI 구현하기

 

 오늘 배운 것

 

1. UI 애니메이션 효과 디자인하기

 1) UMG와 Animation에 대해 이해하기

 : 언리얼 엔진에서 UI를 만들 때 주로 UMG (언리얼 모션 그래픽스, Unreal Motion Graphics)를 사용한다.

   UMG에는 Animation 기능이 탑재되어 있어, 예를 들어 버튼이 클릭될 때 색이 바뀌거나, 텍스트가 화면 위로 등장했다가 사라지는 등 다양한 연출을 쉽게 구현할 수 있다.

- Animation 패널
   - UMG 에디터 내에서 메뉴 상단에서 Window - Animations를 클릭하면 애니메이션을 다루는 창이 뜬다.
   - UMG 에디터 왼쪽 하단 (기본 레이아웃 기준)에 위치한 패널이다.
   - 여기서 새 애니메이션을 생성하거나, 이미 만든 애니메이션을 선택해 타임라인을 확인할 수 있다.
- Keyframe (키 프레임)
   - 특정 시간대에 UI 속성(크기, 위치, 투명도, 색상 등)을 어떻게 바꿀지를 기록하는 지점이다.
   - 여러 개의 키 프레임을 연결하여 하나의 애니메이션 타임라인을 완성한다.

 

 2) Text 위젯에 애니메이션 적용하기

 : 이제 실제로 "Game Over" 텍스트를 사용해 화면에 서서히 떠올랐다가 사라지는 연출을 만들어 본다.

- 위젯 블루프린트 내에서 텍스트 배치하기
   - WBP_MainMenu를 열어서 디자이너 화면에 TextBlock 하나를 추가해 이름을 GameOverText라고 하고, 또 하나 TextBlock을 추가해 이름을 TotalScoreText라고 한다.
   - 두 TextBlock 모두 기본 Text를 설정해준다. (Content - Text 카테고리에 입력)

- 평소에는 GameOverText와 TotalScoreText를 Hidden (또는 Opacity=0) 상태로 배치한다.
- 이 텍스트가 게임 시작 시 바로 보이지 않도록, TextBlock의 Visbility를 Hidden으로 설정해 둔다.
  우리는 애니메이션으로 텍스트를 천천히 보이게 할 것이므로, 기본 상태를 숨기는 편이 좋다.

- 애니메이션 트랙 생성
 : 에디터 왼쪽 하단에 Animation 패널에서 + Animation 버튼을 클릭해 새 애니메이션을 만든다.
   "Anim_TimeOver" 라고 이름을 붙인다.

- 아래쪽 타임라인 영역에서 Track을 추가할 수 있는데, 여기서 + Add를 클릭하고 GameOverText를 선택한다.

- Keyframe (키 프레임) 설정
 : 추가된 GameOverText에서 옆에 희미하게 보이는 + 버튼을 누르면 추가할 수 있는 트랙들이 있다.
   여기서 Render Opacity (투명도)를 트랙에 추가하여, 이 값이 시간에 따라 어떻게 변하는지 기록할 수 있도록 설정한다.

- 시간 바를 옮기면서 각각 Render Opacity 값을 변경하면 자동으로 트랙에 Key가 등록된다.

- 처음 (0초 지점)
 : Render Opacity 를 0 (완전히 투명)으로 설정하고, 타임라인 상에서 Key을 찍는다.
- 1초 지점
 : Render Opacity 를 0.2로 변경하고, 다시 Key를 찍는다.
   이 구간 (0초 ~ 1초) 동안 텍스트가 서서히 나타나는 애니메이션이 만들어진다.
- 2초 지점
 : Render Opacity를 다시 1 (완전히 보이도록) 설정하고, Key를 찍는다.
- 3초 지점
 : 다시 Render Opacity를 0.2 로 변경하고, 다시 Key를 찍는다.
- 4초 지점
 : Render Opacity 를 다시 1 (완전히 보이도록) 설정하고, Key를 찍는다.
- 이렇게 하면, 2초 안에 텍스트가 서서히 나타났다 다시 사라졌다가 서서히 4초 지점 완전히 나타나는 부드러운 애니메이션이 완성된다.

 

 3) 애니메이션을 Blueprint 재생 함수로 묶어두기

 : 이 애니메이션을 재생하기 위해서는 그 동안의 작성한 게임 로직들 즉, C++에서의 UMG의 애니메이션 재생이라는 흐름이 필요하다.

   C++에서 블루프린트의 함수를 호출해야하는 반대 상황인것이다.

- 이벤트 그래프에서 PlayGameOverAnim Function을 만든다.
- 시작시 GameOverText을 visible로 처리하고, Play Animation을 연결한다.
  즉, "PlayTimeOverAnim"을 호출하면 "Anim_TimeOver" 애니메이션이 재생되도록 구성한다.
- 애니메이션 재생이 끝나면 자연스럽게 점수가 뜰 수 있도록, TotalScoreText를 visible 처리를 하도록 연결한다.

 

2. 게임 오버 UI 애니메이션 효과 추가하기

 1) 최종 점수 표시 애니메이션 호출하기

SpartaPlayerController.cpp

 

3. WidgetComponent로 캐릭터 체력 표시하기

 1) WidgetComponent 개념 이해하기

 - WidgetComponent란?

- UMG(언리얼 모션 그래픽)로 만든 위젯(텍스트, 이미지, 버튼 등)을 3D 월드에 붙일 수 있게 해주는 컴포넌트이다.
  (예 : "NPC 머리 위 체력바", "아이템 위에 'F키를 누르세요' 텍스트" 등이 가능해진다.)
- 언리얼 엔진에서 WidgetComponent를 사용하면, 2D로만 보이던 UI를 공간 내 특정 위치에 붙여 놓고, 카메라 각도에 따라 회전하거나 크기가 달라지는 모습을 만들 수 있다.
- WidgetComponent는 Actor에 부착(Attach)할 수 있는 컴포넌트이며, 특정 UUserWidget(UMG Blueprint 클래스)을 3D상에 표시하게 해 준다.
   - 보통은 SetWidgetSpace(EWidgetSpace::World)로 설정하여, 월드 공간에 UI가 존재하게 만든다.
   - 초기 상태에서 SetVisibility(false)로 해 두고, 플레이어가 가까이 왔을 때 SetVisibility(true)로 변경하여 표시할 수 있다.

 

 2) Widget Blueprint 준비하기

- Contents Browser에서 UI - Widgets 폴더에서 우클릭하고 User Interface > Widget Blueprint로 Parent는 User Widget을 선택해서 새 위젯 블루프린트를 하나 만든다.
- 열어서 Palette에서 Common - Text를 선택해서 끌어다 놓고 OverHeadHP라는 이름으로 설정한다.
  '10 / 100' 과 같이 예시 텍스트를 임시로 입력해놓는다.
  폰트 종류, 크기, 색상 등은 자유롭게 설정한다.

 

 3) Character 클래스에 WidgetComponent 추가하기

 : 아래와 같이 OverHeadWidget WidgetComponent를 멤버 변수로 선언한다.

SpartaCharacter.h

SpartaCharacter.cpp

 

 4) Character 클래스에서 WidgetComponent 위치 설정

- BP_SpartaCharacter 클래스에 들어가서 User Interface 카테고리에서 Widget Class를 WBP_HP로 설정한다.

- Space는 World로 우선 셋팅을 한 후 위젯의 위치를 조정해준다.
  (Screen으로 설정해 놓으면 블루프린트 상에서 위젯이 보이지 않을 수 있다.)

- Space를 다시 Screen으로 설정한다.

 

 5) 캐릭터 사망하였을 시 처리 로직 추가

SpartaCharacter.cpp

SpartaGameState.cpp