Unreal UI - 데미지 표기(HUD)

1. 더미를 공격시 Pitch(위아래) 로 한번 흔들거림

2. 더미를 공격시 더미가 빨간색으로 잠시 바꼇다가 돌아옴

3. 더미르 공격시 더미의 위쪽에서 데미지UI가 나옴

4. 더미를 공격시 플레이어UI 위쪽에서 더미의 HP가 나옴

 

3번 을 구현해보도록 하겠습니다.

데미지 허드 - 즉 데미지를 입히면 머리위에 숫자TEXT가 뜨는걸 HUD라고함

더미 한테서 WidgetComponent를 생성

root에 붙히고 위치를 변경해준다

이제 이 위젯컴포넌트에서 데미지텍스트가 출력되도록 해보겠다

 

출력을 위해 데미지위젯을 하나 만들어주겠다

UserWidget을 부모로 위젯을 하나 생성합니다

전 DamageWidget이라고 이름붙혀주었습니다

 

방금만든 DamageWidget이름인 UseWidget을 블루프린트로 변경하고

CanvasPanel을 깔고 Text를 설치합니다

 

이텍스트를 정 중앙에 배치하는법은 앵커를 선택후 정 중앙으로 변경

그리고(Position) x위치와 y위치를 0으로

그리고 정렬(Aliment)을 0.5, 0.5로 변경합니다

그러면 숫자가 젤 중앙에 배치됩니다

 

그럼 이 숫자를 c++에서 제어하기위해 바인딩작업부터 하겠습니다

이름을 변경하고 변수여부에 체크

UPROPERTY에 BindWidget을 써주시고

사용할 대상은 text블록 그리고 이름은 TextBlock_Damage (내가 작성한 이름) 이름과 동일하게 작성

그리고 damage를 매개변수로 받아 데미지를 변경해줄 SetDamageText함수를 만들어줍니다

NativeConstruct도 오버라이드 해줍니다

NativeConstruct는 초기화 함수라고 보면됩니다

 

까먹지 말고 #include "Components/TextBlock.h"도 헤더에 추가해줍니다

 

생성자에서 만들어준뒤

SetWidgetClass로 할당해준다

유저인터페이스 -> 위젯클래스를 방금 만든 데미지 위젯으로 할당해준다

이렇게만 설정하고 확인해보자

숫자가 평면이다

이 현상을 고치기위해 

SetWidgetSpace를 월드에서 Screen으로 변경해주면

이렇게 스크린에 뜨는거라 자연스럽게 바꿀수있다

처음에는 위젯이 보이면 안되니 숨겨준다

Collapsed해서 잠시 접어두고

BeginPlay에서 잠시 접어둔다

우리는 데미지가 뜨면 데미지애니메이션을 실행할생각이다

 

데미지위젯에서 위젯애니메이션을 만들자

애니메이션을 만드는법은 이전 글을 참고해주세요

https://lucodev.tistory.com/7

일반데미지 애니메이션

크리티컬용 애니메이션

이렇게 애니메이션을 만들고 애니메이션의 이름을 잘 기억하고

위젯애니메이션의 이름과 동일해야함

애니메이션을 실행하고 숫자를 SetText로 설정해준다

다시 더미로 들어와서 사용할 데미지위젯 인스턴스를 선언

beginplay에서 캐스팅해준다

이렇게 캐스팅을 할수있다

이제 데미지받을때 함수를 호출한다면

49는 임시값

플레이어에게서 더미가 공격받으면 pitch값이 변경되는데 붙은 허드도 같이 돌아가버리는 현상이 일어남

이유는 지금 더미의 루트가 캡슐컴포넌트인데 캡슐컴포넌트의 pitch값이 변경될때

위젯이 지금 루트 즉 캡슐컴포넌트에 붙어있으니 같이 회전해버리는것이다

 

그러면 간단하다 회전하는 코드를 캡슐이 아니고 메시만 회전시켜버리면된다

지금 메시는

방향을 맞추기위해 회전을 -90을 해놓은상태이다

이대로 만약 메시만 원래코드 pitch를 하면 위아래 까딱이아니고 좌우 까딱이 된다

 

그러면 Pitch회전을 Roll회전으로 변경하고

메시의 reltativeRotation을 기준으로 변경하면된다

코드는 randomPitch에서 Roll로 변경되었고 getactorlocation 에서 메시의 relativerotation기준으로 변경되었다

 

(보통 몬스터는 pitch자체를 회전시킬일이 없고 애니메이션을 사용하면되나 이건 어디까지나 훈련용 더미이기때문에

이런식으로 변경하는상황이다)

확인해보자

이제 Hud는 정상적으로 작동한다

마지막으로

지금 위젯을 띄우는방식은 하나의 위젯을 사용해서 애니메이션을 사용하는방식이라

여러번맞으면 지금 나오고있는 애니메이션을 덮어씌워버려서 동시에 여러개의 텍스트가 뜰수없는 구조이다

 

그래서 우린 캐릭터한테 팝업 액터 스폰방식을 사용해보겠다

데미지 위젯을 보여주는 AActor타입을 만들어보자

데미지팝업 actor를 하나 만들어주고

.h에

해당 헤더를 추가

cpp에

해당 헤더를 추가 DamagePopupActor은 내가만든것

생성자에서 widgetComp를 선언

widgetComp->SetDrawAtDesiredSize(true);는 

위젯의 디자인된 사이즈 그대로 화면출력의 의미이고 (보통 hud에서는 반드시 켜야한다)

widgetComp->SetUsingAbsoluteRotation(true);는

위젯이 절대회전값을 따르게한다는뜻 즉 일정한 각도 유지한다는뜻

 

라이프스폰 즉 생명주기를 1.5초(나의 애니메이션시간과 동일하게) 

맵 인스턴스상에 스폰되고 애니메이션이 끝나면 삭제시켜줘서 최적화도 해준다

(이작업을 하지않으면 맵에 데미지가 뜰때마다 무한으로 액터가 스폰되어버려 최적화에 좋지않다)

내 데미지위젯과 캐스팅하여 크리티컬과 아닐때를 구분하여 전에 만들어놓은 위젯 애니메이션을 나타나게하는 코드이다

 

이렇게 작성하면 팝업액터의 코드작업은 끝

PROPERTY로 선언한 MyHudSettings에 들어가 할당해준다 꼭

DamageWidgetInstance에 내가 만든 데미지위젯 블루프린트를 넣어주고

WidgetComp에도 내가 만든 위젯블루프린트를 넣어준다

 

다시 더미로 가서

팝업허드를 띄워줄 함수를 제작

팝업액터에 InitDamage함수를 호출하여 설정하면된다

지금은 데미지를 49라는 임시값으로 줬지만 나중에는 다른곳에서 데미지를 받아오게할생각이다

 

확인해보자

이제 데미지를 입을때마다 데미지팝업 액터가 스폰이되고 제데로 HUD가 작동하는것을 확인할수있다

 

 

 

---BUGFIX

다단히트 들어가니 점점 더미가 누워버리는 현상이 생겼음

 

문제는 currentRot값이 너무 빨리 바뀌면 값을 중첩해버리기떄문에 더미가 원래상태로 돌아오질못함

그러면 원래 상태를 전역변수로 가지고있으면됨

생성자에서 원래의 rotation값을 저장

돌아가는 구조를 currentRot으로 돌아가는게 아닌 originRot 즉 원래 저장해놨던 위치로 변경함 그러면 더이상 더미가 과하게 눕지않음