RPG 게임 UI - 2) OverlayWidgetController 생성 및 설정

- 개요

UI와 Data를 이어주는 WidgetController 클래스를 수정하여 Controller를 쉽게 설정할 수 있도록 개선한다

또 Overlay 위젯을 위한 Controller를 추가하고 추가한 Controller를 HUD에서 설정할 수 있도록 한다

마지막으로 수정한 C++ 코드를 블루 프린트로 제작하여 애셋으로 만들어 사용한다

 

1) AuraWidgetController 클래스

 

WidgetControllerParams 구조체를 추가하여 Controller에 필요한 인자들을 한번에 관리할 수 있도록 설정한다

인자는 각각 PlayerController / PlayerState / ASC / AttributeSet으로 구성하였다

 

 

기존의 클래스에서 변경한 부분을 위와 같이 수정하였다

수정한 부분을 크게 정리하면 다음과 같다

• 파란색 : 클래스를 BlueprintType, Blueprintable 속성으로 지정하여 블루 프린트에서 변수로 사용
• 빨간색 
  • SetWidgetControllerParams 함수 : 각 Controller에 맞는 WidgetControllerParams를 설정
  • BroadcastInitialValues 함수 : 각 Controller에서 Data의 초기값을 브로드캐스트
• 초록색
  • 프로퍼티 : 프로젝트에 맞게 확장한 Controller에 필요한 인자들
  • 메서드 : 추가한 각 프로퍼티들을 가져오기 위한 Getter 함수

 

 

SetWidgetControllerParams 함수는 위와 같이 동작한다

인자로 들어온 WidgetControllerParams의 데이터를 프로퍼티로 설정한다

 

 

BroadcastInitialValues 함수는 오버라이드한 버전을 사용하기 위해 비워둔다

 

 

각 Getter 함수들은 갖고 있는 프로퍼티를 Cast하여 프로젝트에 맞게 확장한 프로퍼티로 가져온다

 

2) OverlayWidgetController 클래스

 

Float 인자를 받는 OnAttributeChangedSignature 델리게이트를 정의한다

해당 델리게이트는 AttributeSet의 데이터가 변경되면 호출한다

 

따라서 현재 존재하는 Attribute들에 대한 델리게이트를 추가하였다

각각 Health / MaxHealth / Mana / MaxMana로 구성하였다

 

 

BroadcastInitalValues 함수를 오버라이드하여 위와 같이 구성하였다

호출하면 Attribute들에 대한 델리게이트를 Broadcast하여 연결된 모두에게 값을 전달한다

 

3) AuraHUD 클래스

 

HUD의 역할을 하는 AuraHUD 클래스에 Overlay 위젯의 Controller와 관련한 설정을 추가하였다

프로퍼티를 통해 Overlay 위젯의 Controller의 클래스를 오브젝트로 생성할 수 있다

 

 

GetOverlayWidgetController 함수에서는 Overlay 위젯의 Controller의 오브젝트를 확인하고

생성되어 있지 않다면 Overlay 위젯의 Controller의 클래스로부터 생성한다

 

 

기존의 InitOverlay 함수를 수정하여 Overlay 위젯의 Controller와 관련된 설정을 진행한다

HUD에서 생성한 Overlay 위젯에 Controller를 설정하고 BroadcastInitialValues 함수를 호출하여

Attribute의 초기값을 UI에 반영한다

 

4) AuraCharacter 클래스

 

InitAbilityActorInfo 함수에서 호출한 InitOverlay 함수에 인자를 추가한다

 

5) 블루 프린트

5 - 1) Overlay 위젯 컨트롤러 블루프린트

 

위와 같이 Overlay 위젯의 컨트롤러의 블루 프린트를 생성한다

 

5 - 2) HUD 블루프린트

 

HUD 클래스에 필요한 프로퍼티를 위와 같이 설정한다

 

5 - 3) Overlay 위젯 블루프린트

 

Overlay 위젯의 컨트롤러가 설정된 후에 포함되어 있던 체력 구슬과 마나 구슬의 WidgetController를 설정한다

 

5 - 4) 체력 구슬 & 마나 구슬 UI 블루 프린트

 

Overlay 위젯에서 각각의 WidgetController가 설정된 후 시퀀스를 통해 각각 다음의 로직을 수행한다

 

 

설정된 WidgetController를 캐스트하여 프로퍼티로 저장한다

 

 

프로퍼티로 저장한 WidgetController의 Attiribute와 관련한 델리게이트에 이벤트를 바인드한다

이벤트는 관련된 Attribute의 수치를 실제 UI에 반영하는 용도로 사용한다

따라서 델리게이트가 브로드캐스트되면 바인드된 이벤트를 호출한다

 

- 최종 실행 결과