[UE5] Shop UMG - C++ 코드 연동하기

 

 

이전 글에서 만들었던 UMG를 이제 작동하도록 만들려고 한다. 블루프린트를 일부 사용하고, 데이터 저장과 로직이 들어가야 하는 부분은 C++ 을 사용해서 작업할 예정이다.  

 

 

오늘은 이 큰 Shop을 하기전에 커스텀해서 만들었던 Tab을 먼저 작업하려고 한다.

 

 

Tab 의 UMG 하이어라키는 이렇게 구현되어있다. 이 Tab UMG가 할 역할은 다음과 같다.

 

1. Shop에서 각 탭마다 부여받는 이름과 번호가 존재한다.

2. 클릭된 Tab에 따라 다른 아이템을 보여줄 수 있도록 Clicked 된 탭이 몇 번인지 Shop UMG에 알려준다.

3. 클릭된 Tab은 On , 클릭되지 않은 Tab은 Off 상태를 유지할 것이다. 

 

그래서 이 Tab은 데이터가 들어오면 어떤 이름을 세팅하고 현재 부여받은 내 번호가 몇 번인지 알 수 있는 멤버변수가 필요하다.

 

또한 버튼은 클릭 이벤트를 통해 Shop UMG에 데이터를 넘겨야 하므로 Button_Tab을 C++ 코드에서 직접 선언해 사용해보려고 한다.

 

 

 

 

우선 UUserWidget을 상속받은 UserWidgetBase 를 하나 만들었다. 앞으로 UMG는 이 UserWidgetBase를 상속받아서 코드작업을 하려고 한다.

 

 

 

공통적으로 사용하게 될 함수로는 Init과 Release가 있고, 자식 클래스에서 재정의 할 수 있도록 virtual 키워드를 붙여주었다.

 

UserWidgetBase를 상속받은 UMG_Tab c++ 클래스를 만들자.

 

 

 

UMG_Tab C++에서는 아래와 같은 함수를 만들어서 사용한다.

 

 

데이터를 세팅하거나 가져다 쓸 수 있는 getter와 setter를 만들고

 

 

 

블루프린트에서 호출할 용도의 함수와 버튼 클릭 콜백을 받을 함수 등이 필요하다. 

 

UPROPERTY에 meta = (BindWidget) 을 사용하면, 코드와 연동되어있는 블루프린트에서 같은 이름을 사용하고 있는 위젯을 인식한다.  만약 Button_Tab이라는 이름을 가진 UButton 위젯이 UMG에 존재하지 않는 경우 UMG에서 오류를 뱉어내기 때문에 어떤 UMG를 코드에서 사용하고 있고, 그 위젯을 찾을 수 없어 에러가 발생했다면 UButton을 하이어라키에 가져다 넣고 Button_Tab이라는 이름을 지정해주어야 한다는 사실을 알 수 있기도하다.

 

언리얼 공식문서에 들어가면 많은 meta 지정자들을 볼 수 있는데, UMG의 위젯 바인딩을 할 때에는 UPROPERTY를 붙이면 된다. 

 

 

 

Cpp에서는 함수들을 정의했다.

 

버튼을 코드에서 쓰려면

#include "Components/Button.h" 를 추가해야 한다.

 

버튼에는 Clicked 이벤트 바인딩을 해주고 버튼 클릭 이벤트가 발생되면 콜백 받을 함수를 지정해준다. 

 

 

 

다른 클래스에서 사용할 때 쓸 수 있는 getter, setter도 정의하고.

 

 

블루프린트에서 호출 했을 때 사용할 함수들과 버튼 클릭시 로직도 작성해준다.

 

이제 엔진으로 돌아가서 UMG블루프린트와 코드를 연동해보자.

 

UMG 상단 bar에서 File - Reparent Blueprint 를 누르면 UUserWidget을 상속받은 클래스 목록이 뜬다. 그 중에서 현재 블루프린트의 부모로 지정해줄 클래스를 지정해주면 된다.

 

 

 

내가 만든 UMG_Tab을 부모클래스로 지정해주면,

 

 

부모 클래스가 UMG Tab으로 잘 연동된 것을 볼 수 있다. 이제 Graph에서 UI 작업을 해보자

 

 

 

그래프로 들어오면 위 사진과 같은 화면이 보일텐데, 우리는 여기서 BlueprintImplementableEvent 라는 것을 사용해 블루프린트에서 구현하기로 했던 함수가 있다.

 

 

바로 이 함수를 구현하려고 한다.

 

 

 

왼쪽 탭에서 Function 이라는 곳을 찾을 수 있을텐데 그 곳에 마우스를 가져다대면 override라는 버튼이 생길것이다. 그 override를 누르면 블루프린트에서 호출할 수 있는 함수를 쭉 보여준다. 우리는 UMG_Tab의 UpdateTabUI를 클릭해주자.

 

 

 

그러면 이렇게 노드가 하나 생긴다. 

 

 

그리고 왼쪽에서 위젯 스위쳐를  Get 해온다.

 

위젯 스위쳐에는 Active widget index라는 함수가 존재하는데 만약 clicked가 true라면 Img_Bg_on이 있는1번을, 아니라면 Img_Bg_Off가 있는 0번을 Active하도록 UI 를 변경해줄 예정이다.

 

 

Get해온 WidgetSwitcherBg 오른쪽 핀을 끌어다 빈 곳에 놓으면 검색할 수 있는 창이 나온다.

 

 

 

이렇게 사용하려는 함수를 호출하자

 

 

 

이번에는 빈곳을 우클릭해서 우리가 코드에서 만들었던, BlueprintPure라는 지정자를 넣었던 함수 중 GetIsClickedBP라는 함수를 찾아온다.

 

GetIsClickedBP의 return value와 SetActiveWidgetIndex의 Index를 연결하면 자동으로 컨버팅되어 연결될 것이다.

true == 1 false ==0으로 인식되어 내가 생각하는대로 세팅이 될 것이라 믿는다. 이제 저 값을 서로 연결해주면된다.

 

이걸 확인하기 위해서는 Shop UMG가 모두 적용 되어야 한다.  그리고 또 한가지는 TabName을 설정하는 것인데 빈번하게 TabName을 변경하게 될 것 같아 이부분은 코드로 작업을 할까 고민하고 있다.

 

오늘은 코드와 연결해보는 작업을 하는 것이 목표이므로 여기까지. 

 

작업을 하면서 궁금했던 부분과 알아본바에 대해서는 따로 포스팅을 하려고 한다.