[개발일지] 이환 모작_02 ( Hp Bar Widget )

Hp Bar UI를 만들고 해당 UI를 캐릭터와 연동하여 작업해보겠습니다.

 

해당 작업순서는 다음과 같습니다.

 

1.  Player 클래스에 Actor Component 기반 StatComponent 추가 

2.  StatComponent에서 Player의 능력치 데이터 관리

3.  해당 StatCompnent에서 Hp가 변동될 때 마다 업데이트 될 내용을 발동할 델리게이트 이벤트 발행 및 UI 갱신 요청  

4.  Interface를 활용하여 Player와 Widget 간 직접 의존성 제거

5.  Hp bar를 표현할 User Widget 제작 및 해당 C++ 클래스 추가

 

구현 결과

 

Player 클래스에 Actor Component 기반 StatComponent 추가

<추가한 이유>

- Player의 능력치 정보를 직접 Player Class 내부에서 모두 관리하지 않고, 별도의 ActorComponent 인 StatComponent를
  추가하여 관리하도록 구성하였다. 

  

  Player 클래스는 이동, 입력, 공격 상태 전환 등 여러 역할을 수행하기 때문에, Hp나 공격력 같은 능력치 데이터까지 직접
  관리하게 되면 클래스의 책임이 커질 수 있다. 

 

  따라서 능력치 관련 데이터와 로직은 StatComponent로 분리하며, Player는 해당 컴포넌트를 소유하고 필요한 순간에 접근하는 
  구조로 설계하였다.

 

ActorComponent 추가

StatComponent에서 Player의 능력치 데이터 관리

 

StatComponent는 Player의 능력치 정보를 보관하는 역할을 담당한다.

예시 자료

 

현재는 Max Hp와 Current Hp 값들을 이 컴포넌트에서 관리할 수 있도록 하였습니다. 

 

또한 Delegate 이벤트를 생성 하여 해당 Stat의 종류 중 하나인 HP 변경 시 Delegate 이벤트를 발행하여 UI 갱신 요청을 수행할 수 있도록 Delegate 이벤트를 선언해주었습니다. 

 

Delegate Event

 

 

 

StatCompnent에서 Hp가 변동될 때 마다 업데이트 될 내용을 발동할 델리게이트 이벤트 발행 및 UI 갱신 요청

Bind Event 종류

 

다음과 같이 Hp 변경 시 Update 되어야 하는 함수들을 이벤트에 bind 하였습니다. 

 

 

해당 SetupPlayerUiWidget() 함수 호출 순서는 다음과 같습니다.

호출 과정

 

 

여기서 UserWidget에서 Player의 SetupPlayerUiWidet()을 호출 할 수 있었던 이유는 바로 호출 순서에 담겨있다. 

 

 

NativeConstruct

 

NativeConstruct함수의 대략적인 호출순서는 다음과 같다.

 

Interface를 활용하여 Player와 Widget 간 직접 의존성 제거

 

Widget의 Life Cycle

 

UserWidget의 NativeConstruct() 함수가 호출되는 시점에는 이미 PlayerController가 조종할 Pawn 이 설정된 상태이다.

 

따라서 PlayerUiWidget  내부에서 GetOwningPlayerPawn()을 사용하면, 현재 PlayerCotroller가 소유하고 있는 Player Pawn에 접근할 수 있다.

 

inferface를 통한 player에게 접근

 

이후 해당 Pawn을 Player 클래스나 Interface로 캐스팅하여, Player 쪽에 구현된 UI 초기화 함수를 호출할 수 있다. 

 

이 방식을 사용하면 Player 클래스가 PlayerUiWidget을 직접 맴버 변수로 들고 있지 않아도, Widget 쪽에서 현재 소유 중인 Pawn을 통해 Player와 연결할수 있다.

 

즉, Player는 특정 UI Widget 클래스를 직접 관리하지 않고, Widget은 GetOwningPlayerPawn()을 통해 현재 조종 중인 Pawn에 접근하여 필요한 초기화 작업을 요청하는 구조가 된다. 

 

Hp bar를 표현할 User Widget 제작 및 해당 C++ 클래스 추가 

MainUi Widget 구현

 

 

Hp bar를 애니메이션 표현

보간을 활용하여 Percent 설정