RPG 게임 UI - 1) UI의 설계와 HUD 구성

- 개요

AttributeSet의 Data를 UI의 UserWidget 클래스를 사용하여 화면상에 출력한다
이때 UI로부터 Data에 접근하기 위해 MVC 모델을 사용하도록 한다

Model - View - Controller로 구성되어 있는 MVC 모델은 다음과 같이 구성되어 있다

• Model : 프로젝트에서 사용하는 데이터를 의미한다
• View : 레이아웃과 화면을 처리하는데, 프로젝트에서는 UI를 의미한다
• Controller : Model과 View 사이에서 동작을 수행하는 개체를 의미한다

프로젝트에서 Model의 역할로 AttributeSet을 사용하고 View의 역할로 UserWidget을,

그리고 Controller의 역할로 WidgetController를 사용한다

 

1) AuraWidgetController 클래스

 

MVC 모델에서 Controller의 역할을 수행할 AuraWidgetController 클래스를 생성한다

현재 클래스 구성은 위와 같다

총 4개의 프로퍼티를 사용하여 플레이어나 AttributeSet의 정보를 가져와 UI를 갱신하거나

UI로부터의 동작을 가져와 플레이어나 AttributeSet의 정보를 갱신한다

 

2) AuraUserWidget 클래스

 

MVC 모델에서 View의 역할을 하는 AuraUserWidget 클래스를 생성한다

현재 해당 클래스에서는 Controller를 설정하기 위한 함수와 프로퍼티를 추가한다

 

우선, 프로퍼티 WidgetController를 사용하여 해당 위젯에 대한 Controller를 설정한다

 

 

SetWidgetController 함수를 호출하여 WidgetController를 설정한다

인자로 들어온 값으로 Controller를 설정하고 BlueprintImplementableEvent 속성을 사용하여

블루 프린트로 오버라이드한 WidgetControllerSet 함수를 호출하여 설정을 마무리한다

 

3) AuraHUD 클래스

 

추가한 UserWidget을 화면에 담아 보여주기 위한 HUD 클래스를 새롭게 정의하였다

구성은 위와 같은데, 현재는 1개의 함수와 2개의 프로퍼티로 구성하였다

 

 

프로퍼티는 Widget 오브젝트와 Widget의 클래스 쌍으로 구성하였고,

InitOverlay 함수를 호출하여 클래스를 오브젝트로 생성한 후에 Viewport에 추가한다

 

4) AuraCharacter 클래스

 

AvatarActor와 OwnerActor가 설정되는 InitAbilityActorInfo 함수에 HUD를 설정하는 로직을 추가한다

HUD의 UI는 캐릭터의 AttributeSet이 설정된 후에 스탯의 내용을 보여줘야 하므로 위와 같이 구성하였다

 

 5) 언리얼 에디터

5 - 1) HP 바와 Mana 바

 

HP 바와 Mana 바를 위와 같이 구성하였다

두 UI 모두 하나의 바 UI를 상속받아 생성하였다

 

조상 바 UI의 PreConstruct 함수

 

조상 바 UI에서는 위와 같이 디자인과 관련된 로직을 처리한다

 

5 - 2) 오버레이 UI

 

HP 바와 Mana 바를 한곳에 담기 위한 오버레이 UI를 생성하였다

 

5 - 3) HUD 블루프린트

 

HUD 블루 프린트를 생성하고 OverlayWidgetClass를 5-2)에서 생성한 오버레이 UI로 설정한다

 

5 - 3) GameMode 블루프린트

 

5 - 3)에서 생성한 HUD 블루프린트를 GameMode의 블루프린트에 설정한다

 

- 최종 실행 결과