스탯창 UI - 1) 스탯창 UI 애셋과 설계 구조

- 개요

AttributeSet의 Attribute를 시각적으로 보여주는 스탯 창 UI를 생성한다

일단 스탯창 UI 애셋을 화면에서 열고 닫을 수 있도록 설정한 뒤에 본격적인 설계 구조를 정리한다

 

1) 스탯창 UI 애셋 열고 닫기

 

Overlay 위젯 블루 프린트에 버튼을 추가하여 버튼을 눌러서 스탯 창 UI를 팝업할 수 있도록 한다

 

 

Event Graph로 이동하여 Construct 함수를 호출하는 시점에 로직을 추가한다

위에서 추가한 버튼을 클릭하면 실행하는 AttributeMenuButtonClicked 이벤트를 바인딩한다

 

 

AttributeMenuButtonClicked 이벤트의 로직은 위와 같다

우선 스탯창 UI를 띄우는 버튼을 비활성화한다

이후 해당 Overlay 위젯 블루 프린트를 소유한 Player를 가져와서 Player의 뷰포트에 스탯창 UI를 팝업한다

이후 스탯창 UI가 닫히면 호출하는 AttrbiuteMenuClosed 델리게이트에

스탯창 UI를 띄우는 버튼을 활성화하는 AttributeMenuClosed_Event 이벤트를 바인드한다

 

2) 설계 구조

현재 설계 구조는 MVC 모델을 사용하고 있다

여기서 MVC 모델의 각 요소를 스탯창 UI에 대입하면 다음과 같다

• Model - AttributeSet
• View - 스탯창 UI
• Contorller - AttributeMenuWidgetController

 

그리고 C++에서 AuraAttributeInfo 구조체를 사용하여 Contorller에 필요한 데이터를 전달한다

AuraAttributeInfo 구조체의 구성은 다음과 같다

• 어트리뷰트의 GameplayTag
• 어트리뷰트의 이름
• 수정되는 어트리뷰트의 값
• 어트리뷰트에 대한 설명

 

그리고 AuraAttributeInfo 구조체를 저장한 DataAsset인 AttributeInfo를 생성하여 사용한다

AuraAttributeInfo를 전달받은 Controller는 FOnAttributeChaged 델리게이트를 통해 View로 전파한다

View에서는 브로드캐스트된 결과에서 GameplayTag에 따라 적합한 UI를 갱신한다

 

- 최종 실행 결과