[Unreal Engine C++] UI IMAGE Animation 적용

UI Image FadeIn을 적용해보자

개요

 

게임 제작 프로젝트를 진행하면서 상호작용 스크립트를 사용자가 고를 수 있게 시스템을 만들었다.
이 스크립트에서 연출을 위해 캐릭터가 고를 수 있는 선택지가 바로 등장하는 것보단 천천히 드러나게 하는 것을 원했다.
그러므로 스크립트 양 옆의 선택지를 서서히 등장해서 그 뒤에 고를 수 있게 할 것이다.

이를 위해 위젯 블루프린트 애니메이션 기능을 활용해서 FadeIn 기능을 구현해보도록 하자.

 

---

클래스 생성 및 기본 설정

 

언리얼 에디터 좌측 상단의 파일 > 새로운 C++클래스 생성을 눌러 UserWidget을 상속받는 NScript라는 이름의 Class파일을 만든다.

현재 스크립트 표시를 담당하는 위젯 블루프린트는 다음과 같다.여기서 양 옆의 Border인 이파리와 그 안의 텍스트, 위에 감정 수치를 변화해주는 총 8개의 이미지박스, Q와 E 버튼을 애니메이션을 이용해 FadeIn할 것이다.

바로 아래에 애니메이션 추가를 눌러 FadeIn 애니메이션을 만들어주고, 변화시킬 위젯들을 타임라인에 추가해준다.
2초동안 FadeIn할 것이므로 타임라인을 0.00 ~ 2.00으로 드래그하여 적용시켜 준다.

트랙에서 0.00초 일 때 오파시티의 알파값을 0.0, 2.00초 일 때 1.0으로 설정해준다.
다른 모든 위젯들도 위와 같이 동일하게 값을 부여해준다.

우측 상단 그래프 > 메뉴바에 클래스 세팅 을 차례로 눌러 들어가준 다음, 부모를 NScript로 지정해준다.

 

---

작동 코드 추가

 

NScript에서는 이 스크립트를 불러왔을 때 데이터 값을 읽어 선택지와 본문의 텍스트를 정해주고, 애니메이션을 실행시켜 줄 것이다.

// NScript.h

#include "ProjectN.h"
#include "Blueprint/UserWidget.h"
#include "NGameInstance.h"
#include "NScript.generated.h"

/**
 * 
 */
UCLASS()
class PROJECTN_API UNScript : public UUserWidget
{
	GENERATED_BODY()
	
public:
	...
    
	void StartVisibleAnimation();

	...

	UPROPERTY(Meta = (BindWidgetAnim), Transient)
		class UWidgetAnimation* FadeIn;
};

// NScript.cpp

// Fill out your copyright notice in the Description page of Project Settings.


#include "NScript.h"
#include "UMG.h"

...

void UNScript::StartVisibleAnimation()
{
	PlayAnimation(FadeIn);
}

// NPlayerController.cpp

...

void ANPlayerController::ShowScript()
{
	ScriptWidget->SetVisibility(ESlateVisibility::Visible);
	ScriptWidget->StartVisibleAnimation();
}

이 후 원할 때에 UI를 띄우고, StartVisibleAnimation 함수를 불러와주면 애니메이션이 작동된다.
필자는 캐릭터가 E로 상호작용을 할 때 불러오길 원했으므로 NPlayerController에서 불러와주도록 하였다.

결과는 다음과 같다.