[UE5] 6주차 2번. Player UI 만들기 & 데미지 적용

지난번 WBP_Gauge 에 이어 이번에 만들 것은, Player 화면에 나오는 UI 입니다. 아래 로아 옛날 데빌헌터 인터페이스 임다. 조론거. 

로아 옛날 인터페이스

먼저 체력바, 만들어주고요. 이집은 소울라이크류 좋아하는 곳이라 그것들처럼 체력바는 상단에 만들 겁니다. WBP_PlayerUI 만들고, 인터페이스 BPI_PlayerUI 만들고, 지정까지 해줍니다.

클래스 구조

참고로, 이번 BPI는 SetLifeGaugeRatio 만 만들어요. 왜냐면 체력바 색은 내부 컴포넌트 LifeGauge를 직접 넣어줄거라 여기서 이미 선언한 SetGaugeColor 가 다 해주거든요.

WBP_PlayerUI 구조

위에서 구조는 보여주었네요. 캔버스 패널 꺼내주고, 여기에 LifeGauge 넣어줄거에요. LifeGauge는 이전에 만든 체력바랍니다. 우린 이걸 크기랑 위치만 바꾸어서 Player 용으로 만들어줄거에요. 재활용인거죠.

추가내용

여기서 캔버스 패널, 그리드 패널 조금 짚고 넘어가자면, 캔버스 패널은 화면 크기에 맞춰진 자유분방한 도화지라 생각하면 되고, 그리드 패널은 구역 분할이 가능한 패널이라고 보시면 됩니다.

예를들어 0.3, 0.7 :: 0.3, 0.7 같은 경우 아래처럼 나누어집니다. 반응형 할때 참고.

그리드 패널 0.3, 0.7 :: 0.3, 0.7

다시 돌아와서. WBP_PlayerUI의 디자이너 탭에서 LifeGauge 위치를 상단으로 지정해줍니다. 

WBP_PlayerUI 디자이너 탭

마찬가지로 변수 여부 체크 해주시고, 그래프 탭에서는 아래처럼 생성시 색상을, 인터페이스 함수인 SetLifeGaugeRatio 호출 시 LifeGauge의 SetGaugeRatio를 호출해 체력 비율을 갱신해줍니다.

WBP_PlayerUI 그래프 탭

자 그럼, Enemy의 경우 해당 객체에서 체력바를 관리 해주었어요. 그렇다면 이 Player UI 는 어디에 넣는게 좋을까? 라는 질문의 답은 바로 PlayerController 입니다. 캐릭터에 넣지 않는 이유는, 캐릭터에 종속되어 버리면 생명주기가 조작하는 캐릭터에 제한되기 때문이죠. 캐릭터 생성과 동시에 UI 또한 만들어야 하는 비용 늘어나는건 싫으니까!

그럼 PlayerController 에서 작업 해줍시다.

변수 하나 만들어주고, 클래스는 WBP_PlayerUI 입니다. 그리고 여기 함수를 호출해주어야죠.

PlayerController 에서 SetLifeGaugeRatio 호출

길은 다 만들었어요. 캐릭터의 라이프 게이지는 PlayerController 에서 관리하고, Controller 에서 생성되어있는 PlayerUI를 통해 관리된다는 것이죠. 이제 해줄 것은 GetDamage 이벤트가 발생 할 경우, SetLifeGaugeRatio가 호출되는 것. Enemy, Player 모두 Character를 상속하였기에 구현은 이곳에서 해줄거에요. Ratio를 구하기 위해 LifeNow, LifeMax 변수를 선언합니다. 그리고 BeginPlay 시에 LifeNow를 최대 체력으로 초기화 해줍니다.

LifeNow 초기화

아래는 Character 가 갖는 공통 AnyDamage 이벤트입니다. 이곳에서 SetLifeNow 이벤트가 발생할 경우 각자의 클래스(Enemy, Player)의 HUD에 맞게 SetLifeRatio 함수를 호출할 수 있도록 구현할것이에요.

Enemy의경우 상속받은 SetLifeNow 함수를 아래와 같이 오버라이드 해줍니다.

Enemy의 SetLifeNow

Player의 경우는 아래와 같고요. 차이점은 본인이 소유하고 있는 LifeGauge를 호출하는것과, Controller를 통해 호출하는 것 이겠네요.

Player의 SetLifeNow

결과물.

체력바 구현 완료