Unreal - 버튼 위젯 사용하기

사용자가 크리스탈에 오버랩되자마자 이동하는것이 어색하다고 판단하여

오버랩되면 이동할것인지 말것인지 마지막으로 확인하는 ui를 만들어보도록 하겠습니다

 

캔버스패널을 ui에 추가후

버튼을 추가합니다

 

버튼의 스타일 -> 노말 , 호버, 눌림 이있습니다

노말은 일반적으로 보여지는 상태

호버는 마우스를 버튼위에 가져다 댔을때

눌림은 마우스가 버튼을 클릭했을때 입니다

각각 알맞은 이미지를 할당해주겠습니다

 

변수로 만들어주겠습니다

 

버튼과 실행될 함수를 선언

public:
	virtual void NativeConstruct() override;

	UPROPERTY(meta = (BindWidget))
	UButton* Button_Yes;

	UPROPERTY(meta = (BindWidget))
	UButton* Button_No;

	UFUNCTION()
	void YesButtonClick();

	UFUNCTION()
	void NoButtonClick();

 

iterator를 사용하기위한 EnginUtils.h와 버튼, 크리고 참조할 액터(텔레포트크리스탈)의 헤더를 추가해줍니다

#include "Components/Button.h"
#include "TeleporterCristal.h"
#include "EngineUtils.h"

 

Native에서 각가 버튼을 OnClicked와 바인딩

NoButtonClick함수에서는 RemoveFromParent로 자기UI를 삭제시키며

YesButtonClick에서는 Iterator로 해당 오버랩된 크리스탈을 찾아 LevelMove함수를 실행시킵니다

void UUserSelectorUI::NativeConstruct()
{
    Super::NativeConstruct();

    if (Button_No)
    {
        Button_No->OnClicked.AddDynamic(this, &UUserSelectorUI::NoButtonClick);
    }
    if (Button_Yes)
    {
        Button_Yes->OnClicked.AddDynamic(this, &UUserSelectorUI::YesButtonClick);
    }
}

void UUserSelectorUI::YesButtonClick()
{
    for (TActorIterator<ATeleporterCristal>it(GetWorld()); it; ++it)
    {
        ATeleporterCristal* teleportCristal = *it;
        if (teleportCristal)
        {
            teleportCristal->LevelMove();
            break;
        }
    }
}

void UUserSelectorUI::NoButtonClick()
{
    RemoveFromParent();
}

 

 

크리스탈에서의 LevelMove함수입니다

페이드아웃을 시키며 델리게이트로 레벨을 오픈시키는 OpenLevel함수를 실행시킵니다

void ATeleporterCristal::LevelMove()
{
	//fade out
	APlayerController* pC = UGameplayStatics::GetPlayerController(this, 0);
	fadeWidgetInstance = CreateWidget<UFadeInOutWidget>(pC, fadeWidget);
	if (fadeWidgetInstance)
	{
		fadeWidgetInstance->AddToViewport();
		FWidgetAnimationDynamicEvent endEvent;
		endEvent.BindDynamic(this, &ATeleporterCristal::OpenLevel);
		fadeWidgetInstance->BindToAnimationFinished(fadeWidgetInstance->FadeOut, endEvent);
	}
	fadeWidgetInstance->PlayFadeOut();
}

 

마우스를 가져다대면 호버 이미지가 나옵니다

 

No를 누르면 UI객체는 삭제됩니다

 

Yes를 누르면 맵의 전환이 일어납니다

 

전체결과물

 

---2025-05-17--

버튼의 가시성을 높이기 위해 버튼을 마우스를 가져다대면 버튼이 커지도록 애니메이션이 나오도록 해보겠습니다

트랜스폼을 변경해주는 애니메이션을 제작합니다

 

hover상황떄 사용할 함수 애니메이션 선언해줍니다

UFUNCTION()
void YesButtonHover();

UFUNCTION()
void NoButtonHover();

UPROPERTY(meta = (BindWidgetAnim), Transient)
UWidgetAnimation* ButtonYesHoverAnim;

UPROPERTY(meta = (BindWidgetAnim), Transient)
UWidgetAnimation* ButtonNoHoverAnim;

 

해당함수에서 애니메이션을 실행

void UUserSelectorUI::YesButtonHover()
{
    PlayAnimation(ButtonYesHoverAnim);
}

void UUserSelectorUI::NoButtonHover()
{
    PlayAnimation(ButtonNoHoverAnim);
}

 

NativeConstruct에서 해당 버튼과 OnHovered로 바인드해줍니다

//hovered
if (Button_No)
{
    Button_No->OnHovered.AddDynamic(this, &UUserSelectorUI::NoButtonHover);
}
if (Button_Yes)
{
    Button_Yes->OnHovered.AddDynamic(this, &UUserSelectorUI::YesButtonHover);
}

 

Unhovered도 작성해주겠습니다

//unhovered
if (Button_No)
{
    Button_No->OnUnhovered.AddDynamic(this, &UUserSelectorUI::NoButtonUnHover);
}
if (Button_Yes)
{
    Button_Yes->OnUnhovered.AddDynamic(this, &UUserSelectorUI::YesButtonUnHover);
}

 

최종결과물