[UE5 라이라(Lyra) 샘플로 오버워치 만들기] 10. 크레딧 화면에 액션 버튼 추가하기(1)

언리얼 Lyra 프로젝트에 크레딧 화면 액션 버튼 추가하기

이번 시간에는 크레딧 위젯에 액션 버튼을 추가해서 유저가 크레딧을 느리게 재생하거나 빠르게 스킵할 수 있도록 기능을 구현해보겠습니다.
기능 자체는 단순하지만, Lyra의 CommonUI 시스템을 활용한 인풋 바인딩 방식을 경험할 수 있는 좋은 예제입니다.

 

1. 새로운 크레딧 화면 클래스 만들기

 

먼저 ULyraActivatableWidget을 상속받는 C++ 클래스 UJHCreditScreen을 하나 생성해줍니다.
위치는 UI 폴더로 두는 것이 좋습니다.

 

2. 헤더에 멤버 변수 및 함수 정의

🧩 헤더 변수 선언:

protected:

	UPROPERTY(EditDefaultsOnly)
	FDataTableRowHandle BackInputActionData;

	UPROPERTY(EditDefaultsOnly)
	FDataTableRowHandle SlowInputActionData;

	UPROPERTY(EditDefaultsOnly)
	FDataTableRowHandle FastInputActionData;

	FUIActionBindingHandle BackHandle;
	FUIActionBindingHandle SlowHandle;
	FUIActionBindingHandle FastHandle;

기능 요약:

• 백 버튼 누르면 위젯 닫기
• 슬로우/패스트 버튼 누르면 크레딧 속도 제어

🧩 함수 선언:

 

public:

	virtual void NativeOnInitialized() override;

	void HandleBackAction();
	UFUNCTION(BlueprintImplementableEvent)
	void HandleSlowAction();
	UFUNCTION(BlueprintImplementableEvent)
	void HandleFastAction();

 

BlueprintImplementableEvent는 블루프린트에서 구현할 수 있는 함수로, 크레딧 속도 변경을 블루프린트에서 자유롭게 처리할 수 있게 합니다.

 

3️⃣ 바인딩 등록 – NativeOnInitialized 구현

void UJHCreditScreen::NativeOnInitialized()
{
	Super::NativeOnInitialized();

	BackHandle = RegisterUIActionBinding(FBindUIActionArgs(BackInputActionData,true,FSimpleDelegate::CreateUObject(this,&ThisClass::HandleBackAction)));
	SlowHandle = RegisterUIActionBinding(FBindUIActionArgs(SlowInputActionData,true,FSimpleDelegate::CreateUObject(this,&ThisClass::HandleSlowAction)));
	FastHandle = RegisterUIActionBinding(FBindUIActionArgs(FastInputActionData,true,FSimpleDelegate::CreateUObject(this,&ThisClass::HandleFastAction)));
}

🔸 두 번째 인자인 true는 액션 바(ActionBar)에 버튼을 노출시키는 설정입니다.
즉, UI 하단에 표시되는 버튼을 자동으로 생성해줍니다.

 

 

 

 

4️⃣ 백 액션 기능 구현

void UJHCreditScreen::HandleBackAction()
{
	DeactivateWidget();
}

백 버튼을 눌렀을 때 현재 크레딧 화면을 닫도록 구성했습니다.
슬로우/패스트 기능은 블루프린트에서 구현할 예정입니다.

 

 

📁 전체 코드 요약

헤더 파일 (JHCreditScreen.h)

// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "UI/LyraActivatableWidget.h"
#include "JHCreditScreen.generated.h"

/**
 * 
 */
UCLASS()
class LYRAGAME_API UJHCreditScreen : public ULyraActivatableWidget
{
	GENERATED_BODY()

public:

	virtual void NativeOnInitialized() override;

	void HandleBackAction();
	UFUNCTION(BlueprintImplementableEvent)
	void HandleSlowAction();
	UFUNCTION(BlueprintImplementableEvent)
	void HandleFastAction();
	

protected:

	UPROPERTY(EditDefaultsOnly)
	FDataTableRowHandle BackInputActionData;

	UPROPERTY(EditDefaultsOnly)
	FDataTableRowHandle SlowInputActionData;

	UPROPERTY(EditDefaultsOnly)
	FDataTableRowHandle FastInputActionData;

	FUIActionBindingHandle BackHandle;
	FUIActionBindingHandle SlowHandle;
	FUIActionBindingHandle FastHandle;
};

C++ 파일 (JHCreditScreen.cpp)

 

// Fill out your copyright notice in the Description page of Project Settings.


#include "UI/JHCreditScreen.h"

#include "Input/CommonUIInputTypes.h"

void UJHCreditScreen::NativeOnInitialized()
{
	Super::NativeOnInitialized();

	BackHandle = RegisterUIActionBinding(FBindUIActionArgs(BackInputActionData,true,FSimpleDelegate::CreateUObject(this,&ThisClass::HandleBackAction)));
	SlowHandle = RegisterUIActionBinding(FBindUIActionArgs(SlowInputActionData,true,FSimpleDelegate::CreateUObject(this,&ThisClass::HandleSlowAction)));
	FastHandle = RegisterUIActionBinding(FBindUIActionArgs(FastInputActionData,true,FSimpleDelegate::CreateUObject(this,&ThisClass::HandleFastAction)));
 
}

void UJHCreditScreen::HandleBackAction()
{
	DeactivateWidget();
}

마무리

이번 시간에는 Lyra의 ULyraActivatableWidget을 기반으로 UI 인풋 액션 바인딩을 구현하는 기본 구조를 익혔습니다.
다음 시간에는 에디터에서 UI 디자인 작업 및 블루프린트로 슬로우/패스트 기능 구현을 이어서 해보겠습니다.