경험치와 레벨업 - 최종) 레벨과 UI 연동

- 개요

레벨업을 통해 실제 레벨을 상승시키고 레벨이 상승하면 특별한 FX를 표현준다

또한, 현재 레벨을 UI와 연동하여 UI를 통해 레벨을 표시하도록 설계한다

 

1) C++ 사이드

1 - 1) AuraPlayerState 클래스

 

Level이 수정되면 서버에서 클라이언트로 레플리케이션을 진행한다

이때 호출하는 OnRep_Level 함수에서 OnLevelChangedDelegate를 브로드캐스트하도록 로직을 구성한다

 

1 - 2) AuraCharacter 클래스

레벨업하면 재생할 FX 멤버변수

 

레벨업 FX를 재생하는 함수

 

레벨업하게 되면 LevelUpNiagaraComponent 멤버변수를 통해 FX 효과를 재생한다

MulticastLevelUpParticles 함수는 해당 멤버변수를 재생하는 함수로서,

NetMulticast로 지정하여 서버와 클라이언트 양쪽 모두에서 FX 효과가 보여지도록 설정한다

 

 

AuraCharacter의 생성자에서 LevelUpNiagaraComponent 멤버변수를 DefaultSubobject로 생성하고 설정한다

 

 

LevelUp 함수의 오버라이드 로직을 위와 같이 구성하여 레벨업 FX 효과를 재생한다

 

 

MulticastLevelUpParticles 함수의 로직을 위와 같다

재생할 레벨업 FX에 대한 설정을 진행하고 Activate하여 재생한다

 

1 - 3) OverlayWidgetController 클래스

델리게이트 추가

 

OnPlayerStatChangedSignature 델리게이트를 추가하여 플레이어의 레벨의 변경을 하위 UI들에 브로드캐스트한다

1 : 多 관계로 브로드캐스트하며 C++과 블루프린트 양쪽에서 사용하면서 정수값의 인자를 받는다

 

 

추가한 델리게이트를 OnPlayerLevelChangedDelegate라는 이름의 멤버변수로 추가한다

 

 

PlayerState의 OnLevelChangedDelegate에 OnPlayerLevelChangedDelegate를 브로드캐스트하는 람다를 바인드한다

 

2) 블루프린트 사이드

2 - 1) WBP_PictureFrame 위젯 블루프린트

Hiearchy 구성

 

PreConstruct 이벤트 구성

 

캐릭터의 초상화를 담고 있는 WBP_PictureFrame 위젯 블루프린트를 위와 같이 생성한다

 

2 - 2) WBP_ValueGlobe 위젯 블루프린트

Hiearchy 구성

 

WidgetControllerSet 이벤트 구성

 

플레이어의 레벨을 표시하는 WBP_ValueGlobe 위젯 블루프린트를 위와 같이 생성한다

WidgetControllerSet 이벤트의 로직을 위와 같이 구성한다

• 해당 위젯 블루프린트의 WidgetController를 BP_OverlayWidgetController로 캐스트하여 멤버변수화
• 멤버변수로 설정한 WidgetController의 OnPlayerChangedDelegate에 이벤트 바인딩
  • OnPlayerChangedDelegate가 브로드캐스트되면, 표시하는 레벨을 수정

 

2 - 3) WBP_LevelUpMessage 위젯 블루프린트

Hiearchy 구성

 

Construct 이벤트 구성

 

레벨업하면 팝업되는 메세지 UI인 WBP_LevelUpMessage 위젯 블루프린트를 위와 같이 구성한다

UI의 애니메이션을 재생하고 3초 후에 해당 UI를 제거한다

 

2 - 4) WBP_Overlay 위젯 블루프린트

WidgetControllerSet 이벤트의 2번째 시퀀스

 

하위 UI인 2 - 2)의 위젯에 대한 WidgetController를 설정한다

 

WidgetControllerSet 이벤트의 4번째 시퀀스

 

멤버변수로 갖고 있는 OverlayWidgetController의 OnPlayerLevelChangedDelegate에 이벤트를 바인드한다

해당 델리게이트가 브로드캐스트되면 하위 UI인 2 - 3)의 위젯을 설정하고 뷰포트에 생성한다

 

2 - 5) BP_AuraCharacter 블루프린트

 

 

LevelUPNiagaraComponent 서브 오브젝트에 대한 NiagaraSystem을 설정한다

 

- 최종 실행 결과