본문 바로가기
Unreal/Manual

Unreal C++ 위젯(UserWidget) 버튼 클릭 이벤트 (Button OnClick Event)

by Dev_카페인 2023. 12. 11.
반응형

[Unreal/C++] 위젯(UserWidget) 버튼 클릭 이벤트 (Button OnClick Event)

 

이 글에서는 언리얼 엔진 5에서 위젯 블루프린트안에 있는 버튼의 OnClicked 이벤트를 C++ 코드와 연결하는 방법을 설명합니다.

 

이 위젯에서는 Online버튼 등 5개의 버튼이 적절하게 배치되어 있습니다.

이벤트의 연결 방법과는 무관하며 사용자 임의의 버튼 하나만 생성되어 있으면 충분합니다.

 

위젯을 생성하기에 앞서 UUserWidget을 상속받는 클래스를 만들어줍니다.

클래스의 이름은 기호에 따라 작성합니다.

 

클래스 생성시 기본 틀이 생성됩니다. 

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "W_LobbyMain.generated.h"

UCLASS()
class MAINPROJECT_API UW_LobbyMain : public UUserWidget
{
	GENERATED_BODY()
};

코드 작성에 필요한 것은 3가지가 있습니다.

1. 초기화와 이벤트 함수의 연결 

2. 위젯 블루프린트에서 사용할 버튼 변수

3. OnClick 이벤트 발생시 수신할 함수

 

초기화를 위해 여러 생성자를 사용하기도 하지만 언리얼 엔진의 규칙에 따라 Native 함수를 오버라이드 합니다.

초기화를 위한 Native함수는 NativeConstruct() 이며 이와 관련된 여러 Native함수들이 있으니 확인해 보시길 바랍니다.

 

위젯의 버튼은 UButton이며 Button 헤더 파일 안에 있습니다.

#include "UMG/Public/Components/Button.h"

 

전방선언으로 변수를 설정해주는데 위젯에서 버튼을 사용하기 위해 주의할 점이 있습니다.

- 변수의 이름은 위젯에서 사용할 버튼의 이름과 정확히 매칭되어야 합니다.

- 위젯에서 Bind를 위한 선언이 필요합니다. UPROPERTY(meta = (BindWidget))

 

이벤트 발생시 수신될 함수는 UFUNCTION()을 선언해주어 이벤트에서 사용될 함수라는 것을 명시해줍니다.

함수의 이름은 명확하게 작성합니다.

 

위 내용을 따라 헤더파일을 작성하면 아래와 같은 코드가 됩니다.

// MyWidget.h
#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "W_LobbyMain.generated.h"

UCLASS()
class MAINPROJECT_API UW_LobbyMain : public UUserWidget
{
	GENERATED_BODY()
	
private :
	virtual void NativeConstruct() override;

public :
	UFUNCTION()
		void OnlineServerButtonOnClick();

private :
	UPROPERTY(meta = (BindWidget))
		class UButton* Btn_OnlineServer;
};

 

// MyWidget.cpp
#include "Lobby/Widgets/W_LobbyMain.h"
#include "UMG/Public/Components/Button.h"

#include "Utilities/DebugLog.h"

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

	Btn_OnlineServer->OnClicked.AddDynamic(this, &UW_LobbyMain::OnlineServerButtonOnClick);
	DebugLog::Print("NativeConstruct");
}

void UW_LobbyMain::OnlineServerButtonOnClick()
{
	// 내용 작성
}

 

 

코드 작성이 완료되면 위젯 블루 프린트를 만들고 클래스를 상속해줍니다.

실수로 상속받지 못 한 경우 블루프린트 내에서 부모를 변경할 수 있습니다.

 

위젯 블루프린트 내에서 버튼을 만들고 버튼의 이름을 클래스에서 작성했던 변수의 이름과 동일하게 변경합니다.

변수 여부가 체크되어 있는지 확인하고 OnClick 버튼을 확인합니다.

 

이로써 작업이 완료됩니다.

반응형