28-7. 로드 메뉴 UI - (5) MVVM - 위젯 상태 교체하기

0. 개요

위젯 슬롯은 위젯 스위쳐로, 세 가지 상태의 하위 위젯을 가진다.

- Vacant : 빈 슬롯, +를 눌러 새로운 슬롯 생성 가능, EnterName 슬롯을 노출

- EnterName : 이름 입력 슬롯, 이름을 입력하고 슬롯을 생성, Taken 슬롯을 노출

- Taken : 게임을 실행하기 위한 데이터가 저장된 슬롯

 

각 하위 위젯의 버튼을 눌러 위젯 스위쳐의 세 가지 상태를 전환하도록 한다.

 

 

1. 

(1) 하위 위젯에 로드 메뉴(Load Screen) 뷰 모델 추가

하위 위젯이 다른 하위 위젯을 호출하려면 그들보다 더 큰 범주에서의 위젯 컨트롤이 필요하다.

따라서, 로드 메뉴의 뷰 모델을 하위 위젯에 추가해 줄 수 있다.

Vacant, EnterName, Taken 슬롯에 로드 메뉴의 뷰 모델을 추가하고, Property Path를 이용하여 블루프린트 함수를 통해 로드 메뉴의 뷰 모델을 찾아 할당시킨다.

 

 

(2) 하위 위젯의 버튼을 변수로 만들기

버튼을 눌러 위젯 스위쳐를 작동시킬 것이므로, 세 하위 위젯의 버튼을 변수로 만든다.

 

 

(3) MVVM_LoadSlot, 슬롯의 뷰 모델에서 델리게이트 선언

#pragma once

#include "CoreMinimal.h"
#include "MVVMViewModelBase.h"
#include "MVVM_LoadSlot.generated.h"

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FSetWidgetSwitcherIndex, int32, WidgetSwitcherIndex);

UCLASS()
class AURA_API UMVVM_LoadSlot : public UMVVMViewModelBase
{
	GENERATED_BODY()
	
public:

	UPROPERTY(BlueprintAssignable)
	FSetWidgetSwitcherIndex SetWidgetSwitcherIndex;

	void InitializeSlot();
};

인덱스를 받는 델리게이트를 만든다.

인덱스를 받으면 블루프린트에서 해당 인덱스를 사용하여 위젯을 전환시킬 것이다.

#include "UI/ViewModel/MVVM_LoadSlot.h"

void UMVVM_LoadSlot::InitializeSlot()
{
	// TODO:: 불러온 데이터에 따른 슬롯 상태 체크
	SetWidgetSwitcherIndex.Broadcast(1);
}

이 함수는 단순하게 해당 델리게이트를 호출하여 1을 넘겨주는 함수이다.

 

 

(4) 각 하위 위젯 버튼의 콜백 함수

public:
	// EnterName 슬롯
	UFUNCTION(BlueprintCallable)
	void NewSlotButtonPressed(int32 Slot, const FString& EnteredName);

	// Vacant 슬롯 - 새 게임 슬롯 생성
	UFUNCTION(BlueprintCallable)
	void NewGameButtonPressed(int32 Slot);

	// Taken 슬롯 - 생성된 게임 선택
	UFUNCTION(BlueprintCallable)
	void SelectSlotButtonPressed(int32 Slot);

 

 

(4-1) 새로운 게임 생성하기 버튼

void UMVVM_LoadScreen::NewGameButtonPressed(int32 Slot)
{
	// 이름 입력 위젯으로 변경
	LoadSlots[Slot]->SetWidgetSwitcherIndex.Broadcast(1);
}

Vacant 슬롯은 단순하게 플러스 버튼을 누르면 EnterName 슬롯으로 변환하는 기능만 가진다.

따라서 델리게이트를 호출하여 1번 인덱스를 전달하도록 한다.

---

- Vacant는 0번, EnterName은 1번, Taken은 2번으로 지정되어 있다.

---

 

(5) WBP_LoadSlot_WidgetSwitcher의 각 하위 위젯에서 Blueprint Initialize Widget (Blueprint Implementable) 함수 호출

각 하위 위젯이 버튼에 OnClicked 이벤트에 콜백 함수를 바인딩할 수 있도록 Blueprint Initialize Widget 함수를 호출한다.

해당 함수는 블루프린트 Implementable 함수이므로 블루프린트에서 정의해야 한다.

 

 

(6) 각 하위 위젯의 Blueprint Initialize Widget 이벤트에서 버튼에 콜백 함수 바인딩

 

(6-1) WBP_LoadSlot_Vacant - 새 슬롯 생성

 

(6-2) WBP_LoadSlot_EnterName - 슬롯에 이름 짓기

Editable Text를 변수로 만들고 텍스트를 가져와 설정하게 한다.

 

 

(6-3) WBP_LoadSlot_Taken - 저장된 슬롯

 

 

(7) 위젯 스위쳐에 델리게이트 - 콜백 함수 바인딩

FSetWidgetSwitcherIndex 델리게이트로 전달받은 값으로 위젯의 순서를 변경해야 한다.

 

(7-1) Blueprint Initialize Widget 함수 호출

위젯 스위쳐가 스스로의 Blueprint Initialize Widget을 호출하게 한다.

 

(7-2) 위젯 스위쳐를 변수화

 

 

(7-3) 이벤트에 Set Active Widget Index 함수 바인딩

 

플러스 버튼을 누르면 EnterName 위젯이 보이게 된다.