[UE] 슬라이드 애니메이션 개선

1. 문제 상황

UMG를 활용해 HUD에서 'Game Over!'라는 문구에 슬라이드 애니메이션을 구현하고자 했습니다. 처음의 의도는 화면 밖에서 문구가 떨어지는 슬라이드 형태였으나, 막상 구현하고 결과물을 보니 게임 오버 메뉴가 뜨는 시점에 순간적으로 화면 가운데에 보인 다음에 위에서 떨어지는 애니메이션이 활성화되는 형태가 되어 문제 발생

 

3~4초 사이에 화면 가운데에 보인 후 슬라이드 애니메이션 활성화

2. 원인 분석

원인 추론

1.화면 가운데에 나타나는 위치가 HUD 상에서 'Game Over!' 문구의 기본 위치에 해당

//게임 오버 메뉴 UI 생성
if (GameOverMenuWidgetClass)
{
	GameOverMenuWidgetInstance = CreateWidget<UUserWidget>(this, GameOverMenuWidgetClass);
	if (GameOverMenuWidgetInstance)
	{
		GameOverMenuWidgetInstance->AddToViewport();

		bShowMouseCursor = true;
		SetInputMode(FInputModeUIOnly());
	}
	UFunction* PlayAnimFunc = GameOverMenuWidgetInstance->FindFunction(FName("PlayGameOverAnim"));
	if (PlayAnimFunc)
	{
		GameOverMenuWidgetInstance->ProcessEvent(PlayAnimFunc, nullptr);
	}
	if (UTextBlock* TotalScoreText = Cast<UTextBlock>(GameOverMenuWidgetInstance->GetWidgetFromName("TotalScoreText")))
	{
		if (USpartaGameInstance* SpartaGameInstance = Cast<USpartaGameInstance>(UGameplayStatics::GetGameInstance(this)))
		{
			TotalScoreText->SetText(FText::FromString(FString::Printf(TEXT("Total Score: %d"), SpartaGameInstance->TotalScore)));
		}
	}
}

2.코드 상에서는 'Game Over'문구의 슬라이드는 당연하게도 게임 오버 메뉴를 호출한 다음 순서로 호출
   (게임 오버 메뉴: GameOverMenuWidgetInstance, 슬라이드 애니메이션: PlayAnimFunc)

3. 게임 오버 메뉴가 먼저 표시가 되고 이후 애니메이션을 호출하기 까지 약간의 Delay가 있을 것

4. 문제의 원인이 3번에서 언급한 Delay일 것으로 추정

3. 해결 과정

해결 방안 모색

1. 코드 상에서 수정하여 해결할 방법은 생각 나지 않음
2. 기본 위치에 잠시 보이는게 문제라면 기본 위치가 아예 화면 밖이라면 해결 가능할 것으로 판단
3. 또는 애니메이션에서 Opacity 값을 적절한 시간대까지 0으로 하여 보이지 않게 했다가 위에서 떨어지는 순간부터 값을 1로 수정하여 보이도록 하여 해결 가능할 것으로 판단

최종 해결 방안

HUD 상에서 'Game Over!' 문구의 기본 위치를 화면 밖으로 설정하여 애니메이션 진행하는 것으로 결정

선택 이유

1. 코드 상에서 할만한 방안은 Visibility 옵션을 애니메이션이 활성화된 직후에 켜주는 것 정도
   ㅡ> 이미 블루프린트에서도 비슷한 방식으로 구현되어 있으나 문제 상황 동일할 것으로 판단
          + 애니메이션에서의 문구 기본 위치 수정이 훨씬 간단
2. Opacity 값을 적절한 시간까지 0으로 하여 위에서 아래로 이동하는 중에 보일 수 있게 조절
   ㅡ> 시간대가 명확하지 않아 시행착오가 많고 확실한 해결 방안인지도 모호

결론: HUD에서 'Game Over!' 문구의 Default(기본) 위치를 화면 밖으로 하여 애니메이션이 활성화되면 떨어지도록 구현

수정된 문구의 위치(화면 밖)

-0.25초에서의 애니메이션 값 세팅

0.75초 후에 원하는 위치에 오도록 Y값 조절

추가로 'Game Over!'와 그 아래의 Text Block에 표시되는 점수의 Visibility 관련 설정들을 Hidden으로 설정하였다가 애니메이션이 실행되면 Visible이 되도록 블루프린트 설정이 되어 있었습니다. 해당 부분도 기본값을 Visible로 하고 삭제하였습니다. 

(이전 글 참고) (https://2h1824.tistory.com/39)

결과

정상 작동하는 게임 오버 애니메이션

4. 고찰

애니메이션 기능을 처음 써보는 것이라서 생각지도 못한 문제를 겪게 되었다. 하지만 문제 상황이 발생하는 원인을 추론하는 과정에서 애니메이션이 구성된 형태와 블루프린트, 소스 코드까지 일련의 흐름을 한 번 되짚어 보는 시간이 돼서 생각지도 못하게 유익한 시간을 보냈다. 여러가지 해결 방안들 중에서 문구의 기본 위치를 화면 밖으로 옮기는 비교적 간단한 방법으로 해결을 하긴 했지만, 내가 생각지 못한 해결 방안이 있을 수 있으니 이에 관해서는 조금 더 자료를 찾아볼 생각이다. 

간단하게 해결을 하긴 했지만, 소스 코드에서 Visibility 관련 옵션을 Hidden에서 Visible로 바꾸는 것을 Animation이 호출된 이후 시점에서 설정하는 방법도 어쩌면 블루프린트에서와는 다르게 작용하지 않았을까 하는 생각이 든다. 이와 관련해서는 따로 실험을 해 봐야겠다.