Unreal Engine - 3D UI

캐릭터가 특정 아이템을 먹으면, 이미지 UI가 뜨고 해당 효과가 사라지면 UI가 보이지 않도록 하는 것을 구현할 것이다.

1. Widget BP 만들기

---

• 유저인터페이스 -> 위젯블루프린트 -> 사용자 위젯 -> 원하는 내용을 팔레트에서 선택하여 넣기
• 이번 구현에 있어서는 캐릭터의 상태를 나타내는 이미지 UI를 띄워주는 것이기 때문에 이미지를 추가했다.
• 로직
  • 처음 이미지의 투명도를 0으로 해서 안보이는 상태로 시작
  • 아이템을 먹은 경우 투명도를 1로 하고
  • 아이템 효과가 끝난 경우 투명도를 다시 0으로 적용

 

 

2. cpp세팅

---

• 헤더 파일
  • 캐릭터 상태를 캐릭터의 머리 위에 띄워줄 것이기 때문에, 캐릭터 클래스에 WidgetComponent를 추가해야 한다.
    • WidgetComponent 변수 추가
    • 업데이트 하는 동작을 하는 함수 추가

//PlayerCharacter.h
UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "UI")
TObjectPtr<UWidgetComponent> OverheadWidget;

void UpdateOverheadWidget();

• cpp 구현부
  
  • SetWidgetSpace를 통해 widget이 존재할 위치를 설정할 수 있다.
    • EWidgetSpace::Screen;
    • EWidgetSpace::World;
  • UpdateOverhead 함수는
    • Reverse 아이템을 먹은 경우 실행할 것이기 때문에 ReverseMove 함수에서 실행해 주고, 
    • 아이템 효과가 끝난 경우는(Restore 함수) 반대 로직을 적어주었다 (투명도 0 만들기)

#include "Components/Image.h"
#include "Components/WidgetComponent.h"

APlayerCharacter::APlayerCharacter()
{
	...
	OverheadWidget = CreateDefaultSubobject<UWidgetComponent>(TEXT("OverheadWidget"));
	OverheadWidget->SetupAttachment(GetMesh());
	OverheadWidget->SetWidgetSpace(EWidgetSpace::Screen);
}

//캐릭터가 Reverse 아이템을 먹은 경우 call되는 함수
void APlayerCharacter::ReverseMove()
{
	bIsReverseMove = true;
	UpdateOverheadWidget(); //overheadwidget 업데이트

	GetWorldTimerManager().SetTimer
	(
		ReverseMoveTimerHandle
		,this
		,&APlayerCharacter::RestoreMove
		,ReverseMoveDelayTime
		,false
	);
}

//아이템 효과가 사라지는 상황
void APlayerCharacter::RestoreMove()
{
	bIsReverseMove = false;

	if (!OverheadWidget)
		return;

	UUserWidget* OverheadWidgetInstance = OverheadWidget->GetUserWidgetObject();
	if (!OverheadWidgetInstance)
		return;

	if (UImage* Image = Cast<UImage>(OverheadWidgetInstance->GetWidgetFromName(TEXT("OverHeadWidget"))))
	{
		Image->SetOpacity(0.f);	//투명도를 0으로 해서 안보이게 구현
	}
}

//아이템 효과가 발생하는 상황
void APlayerCharacter::UpdateOverheadWidget()
{
	if (!OverheadWidget)
		return;

	UUserWidget* OverheadWidgetInstance = OverheadWidget->GetUserWidgetObject();
	if (!OverheadWidgetInstance) 
		return;

	if (UImage* Image = Cast<UImage>(OverheadWidgetInstance->GetWidgetFromName(TEXT("OverHeadWidget"))))
	{
		Image->SetOpacity(1.f); //투명도를 1로 해서 보이도록 구현
	}		
}

• 시연 영상