[TIL][C++] 250724 MMO 서버 개발 65일차: 언리얼에서 UI 전환하는 법: 위젯 스위처, mata = (BindWidget) 유의해야 할 점?

주의사항: 해당 글은 일기와 같은 기록용으로, 다듬지 않은 날것 그대로인 글입니다. 

언리얼에서 UI 전환하는 법: 위젯 스위처

• 로그인 화면 UI를 만들던 중, UI 간 전환이 필요하다는 것을 느꼈다. 기존 작업은 ID, Password만 입력해서 회원가입/로그인만 진행했는데, 다음 UI인 캐릭터 선택 창으로 전환되어야 하는 상황이다.
• 예전에 유니티에서 작업할때에는 무식하게 SetActive를 활용해서 이전 UI를 끄고, 다음 UI를 키는 방식을 사용했었다. 제대로 배우지 않았던 상황에서 생각해 낼 수 있는 직관적인 방법이었기 때문이다. 그래서 언리얼에서도 그렇게 해야 하나 싶었지만, 다행히 위젯(UI) 간 전환을 쉽게 할 수 있는 “위젠 스위처(Widget Switcher)”라는 걸 활용할 수 있었다.

 

위젯 스위처(Widget Switcher)?

• 위젯 스위처는 텍스트 박스, 이미지와 같이 컴포넌트 종류 중 하나로, 하위 계층에 등록한 각 컴포넌트간 전환을 쉽게 할 수 있도록 도와주는 컴포넌트이다.
  • 수직 정렬을 도와주는 컴포넌트 “Vertical Box”, 수평 정렬을 도와주는 컴포넌트 “Horizontal Box”, 컴포넌트 간 전환을 도와주는 컴포넌트 “Widget Swithcer”와 같은 느낌이라고 보면 된다.
• 위젯 스위처는 SetActiveWidgetIndex() 함수를 통해 위젯을 전환할 수 있다. 이때 index는 위젯 스위처 아래에 배치된 자식 컴포넌트의 idx를 의미한다.

 

블루프린트 예시

• 위와 같이 이전 위젯에 존재하는 버튼(CS_CreateBtn)을 눌러 다음 위젯(index = 2)으로 넘어가려면, 첫 번째 블루프린트처럼 작성하면 된다.
• 반대로, 이전 위젯으로 돌아가고 싶다면, 넘어온 위젯의 버튼(CC_CancelBtn)을 클릭하여 돌아올 수 있도록 두 번째 블루프린트처럼 작성한다.

 

위젯 스위처의 초기 탭은 어떻게 설정할 수 있는가?

• 블루프린트를 사용해도 되고, C++을 활용해도 되지만 C++로 제작했기 때문에 C++ 방식으로 설명하겠다.
• 방법은 간단하다. 해당 위젯이 상속받은 C++ 클래스에 가서 위젯 스위처를 BindWidget을 통해 바인딩하고, NativeConstruct()에서 SetActiveWidgetIndex(idx)를 호출해 주면 된다. 코드는 아래와 같다.

// LoginWidget.h
UPROPERTY(meta = (BindWidget), BlueprintReadWrite)
UWidgetSwitcher* WidgetSwitcher;

// LoginWidget.cpp
void ULoginWidget::NativeConstruct()
{
    Super::NativeConstruct();

    ...

		// 위젯 스위처의 초기 idx를 설정
    if (WidgetSwitcher)
    {
        WidgetSwitcher->SetActiveWidgetIndex(0); // 0번 위젯으로 시작
    }
}

 

 

mata = (BindWidget) 유의해야 할 점?

WidgetSwitcher가 뜨지 않는다...

• 정확한 이유는 모르겠지만, meta = (BindWidget)으로 컴포넌트를 바인딩하면 블루프린트에서 해당 컴포넌트의 디테일 패널에서 IsVariable을 체크해도 그래프 탭의 왼쪽 패널인 VARIABLES에 나타나지 않는다. 블루프린트에서 검색해도 나오지 않는다.
• 그래서 BindWidget으로 바인딩한 컴포넌트를 블루프린트에서 사용하려면, 지정자로 BlueprintReadWrite 또는 BlueprintReadOnly를 추가해야 한다. 해당 지정자를 추가하면 VARIABLES에 나타나지는 않지만, 블루프린트에서 get으로 가져올 수는 있게 된다.

블루프린트에서 검색해도 잘 뜬다.