Unreal Engine - UI Animation

progress bar를 통해 구현한 타이머 UI의 시간이 일정 시간보다 적어진 경우 애니메이션을 실행하는 것을 구현한 내용이다.

1. BP에서 애니메이션 생성 (디자이너 탭)

---

• 애니메이션을 주고 싶은 UI를 클릭 후 애니메이션 탭에서 +애니메이션 선택
• +추가를 눌러서 애니메이션을 주고 싶은 UI 선택

• 추가된 UI의 오른쪽 +버튼을 눌러 원하는 효과(동작) 을 선택한다.

• 아래 사진은 랜더 오파시티(투명도 조절)와 트랜스폼을 선택한 모습이다.
  • 추가적으로 아래 사진에 보이는 + 버튼을 통해 효과를 바꾼 후(오파시티를 바꾸는 등)
  • 빨간점을 찍어서 표시를 할 수 있다. (프레임을 저장하는 것)

 

 

2. 그래프 탭

---

• 함수를 하나 추가한 후 PlayAnimation 노드와 연결해주면 된다.
  • Progress Bar라는 노드는 위에서 애니메이션을 만들면, 자동으로 변수에 추가되어있는 
  • 애니메이션 타입의 변수이다.
  • 추가적으로 Loop를 5번으로 바꿔서 반복해서 보이도록 구현하였다.

 

 

3. cpp 세팅

---

• 먼저 UI 관련 세팅이므로 애니메이션을 실행하는 함수는 PlayerController에서 구현하였다.
  
  • 주의할 점) ProgressBarAnimation 이라는 이름으로 받아왔는데, 이 이름은 위에서 BP의 그래프 탭에서 만든 함수의 이름이다.

void APlayerCharacterController::PlayBarAnimation()
{
	UFunction* PlayBarAnim = HUDWidgetInstance->FindFunction(FName("ProgressBarAnimation"));
	if (PlayBarAnim)
	{
		HUDWidgetInstance->ProcessEvent(PlayBarAnim, nullptr);
	}
}

• 위에서 구현한 함수를 실행하는 로직은 GameState에 UpdateHUD이다. 
  • if 문을 통해, 애니메이션을 실행한다.
    • value 값이 0.3 보다 작아지면 실행하며,
      • (0.001보다 크게 한 이유는 처음으로 시작되는 경우 0.3f보다 작은 조건을 만족해버리는 오류가 있어서 추가한 내용이다.)
    • bPlayBefore라는 flag를 통해 함수가 여러 번 call되는 것을 방지하였다.

void ADefaultGameState::UpdateHUD()
{
	...
    if (UProgressBar* ProgressBar = Cast<UProgressBar>(HUDWidget->GetWidgetFromName(TEXT("TimeBar"))))
	{			
            RemainingTime = GetWorldTimerManager().GetTimerRemaining(LevelTimerHandle);
            float value = RemainingTime / LevelDuration;
            ProgressBar->SetPercent(value);

            if (!bPlayBefore && value > 0.001f && value < 0.3f)
            {
                PlayerCharacterController->PlayBarAnimation();
                bPlayBefore = true;
            }
	}	
}

• 실행 모습