[Unreal] 30일차 - 플레이어 피격, 플레이어 HP UI 표시, Game Over UI, 무기 UI

플레이어의 피격

플레이어 HP 표시

UI 폴더에서 Widget Blueprint 생성, WBP_UIScreen 이름으로 생성

 

 

Canvas Panel 검색하여 드래그해서 아래 Hierarchy에 등록

 

 

UI가 Horizontal 수평으로 배치하기 위해서 Horizontal Box 검색하여 드래그해서 Canvas Panel의 아래에 위치시켰다.

 

 

"HP"를 쓰기 위해서 Text를 사용

 

 

Text 오른쪽으로 공간을 주기 위해서 Spacer도 넣는다.

 

 

게이지 바 위에 Text도 같이 위치할 수 있도록 overlay 위젯도 추가했다.

 

 

Overlay의 자식으로는 게이지바가 될 Progress Bar와 Text를 넣었다.

 

 

Horizontal Box의 앵커는 좌측 상단, 포지션과 사이즈를 설정했다.

 

 

Text 내용은 "HP"로 바꿨고 가운데 정렬도 했다.

 

 

Overlay는 Fill 설정한다.

 

 

Progress Bar도 Alignment가 가로, 세로로 가득 차게 되어있는지 확인

 

 

마지막 Text는 가운데 정렬하고 10/10 내용으로 입력했다.

 

 

Progress Bar의 색상과 Percent를 설정했다.

 

 

Progress Bar와 Text를 변수로써 이용하기 위해서 일단 이름을 각각 pbHP, txtHP로 바꿨다.

 

 

---

 

 

BP_Player의 EventGraph로 간다.

Integer 형의 HP 변수 생성, 복제해서 MaxHP 생성

 

 

MaxHP의 Default Value는 Details 창에서 10으로 설정

 

 

Event 그래프의 BeginPlay 맨 뒤 노드에 추가로 연결한다.

HP에 MaxHP를 Set 하고 Create Widget을 검색하여 WBP UIScreen 클래스로 설정했다. Return Value 값은 Promote to Variable처리해서 UIScreen으로 이름을 설정했다.

 

 

마지막에 Add to Viewport 노드만 연결하면 실행했을 때 볼 수 있다.

 

 

---

 

 

플레이어 UI 체력 감소

이제 한 대씩 맞을 때마다 체력이 깎이도록 만들어야 한다.

 

 

BP_Player의 EventGraph에서 Custom Event 노드를 생성하여 OnHitEvent 이름으로 설정했다.

 

 

실제로 맞았을 때 텍스트가 출력되는지 확인 용으로 Print String 연결

 

 

적이 공격하는 애니메이션인 Mma_Kick 애니메이션을 연다.

발로 차는 특정 시점에서 HP가 깎이도록 하기 위해서 Notify 이벤트를 사용할 예정이다.

Notify 이벤트를 생성하여 AttackPlaying 이름으로 설정했다.

 

 

ABP_Enemy의 EventGraph로 간다.

animnotify_attackplaying 이름을 검색하여 바로 위에서 만든 Notify 이벤트를 노드로 가져온다.

아래와 같이 노드를 연결한다.

 

 

이렇게 실행하면 Attack이 실행 된 후 발차기 하는 순간 Damage를 입는 것을 볼 수 있다.

 

 

다시 BP_Player의 EventGraph로 돌아와서 HP를 하나씩 깎고 만약 0이 되면 Game Over를 출력하고 게임을 멈추도록 노드를 연결했다.

 

 

게임이 잘 정지된다.

 

 

UI가 1씩 줄어들게 하기 위해서는 플레이어의 현재 체력과 동기화시키면 된다.

WBP_UIScreen에서 Graph 창으로 이동한다.

 

 

변수를 3개 생성했다.

 

 

다시 WBP_UIScreen의 Designer 창으로 이동한다.

10/10이 표시되는 txtHP에서 오른쪽 Bind 부분에서 Create Binding 하면 함수가 하나 새로 만들어진다.

아래 스크린샷은 이미 함수를 만든 후의 모습이다.

 

 

HP와 MaxHP를 Append를 이용해서 합친다. 가운데는 슬래시를 넣어서 구분한다.

 

 

Designer 창으로 돌아가서 Progress Bar의 Percent는 만들었던 변수에 Bind 한다.

 

 

다시 Graph 창으로 돌아가서 Percent 변수의 Default 값은 1.0으로 설정했다.

 

 

계속 WBP_UIScreen의 Graph 창에서 EventGraph에서 Custom Event를 생성해서 HP, MaxHP Input을 설정했다.

 

 

커스텀 노드 이후에 변수에 SET을 한다. HP와 MaxHP를 나눈 값은 마우스 우클릭 후 float으로 변환해서 연결했다.

 

 

BP_Player의 EventGraph 화면에서 함수 하나를 생성한다. FUNCTIONS에 + 를 눌렀고, UpdateHPUI 이름으로 지었다.

 

 

블루프린트 노드를 아래와 같이 구성했다.

 

 

만든 함수는 BP_Player의 EventGraph 중간에 체력이 0이 되면 게임이 멈추는 부분에 가운데에 연결한다.

 

 

BeginPlay의 맨 끝에도 만든 함수를 중간에 연결한다.

 

 

이제 피격 받으면 HP가 1씩 줄어들며 0이 되면 게임이 정지된다.

 

 

---

 

 

Game Over UI

WBP_UIScreen의 Designer 창에서 Text를 끌어다가 Canvas Panel의 아래에 놓는다.

 

 

이름은 txtGameover로 지었다.

 

 

해당 텍스트의 포지션, 사이즈, 컬러, Justification 값을 설정했다.

 

 

그리고 해당 텍스트를 Visible, Hidden 설정에 따라서 나오고 안나오게 만들면 된다. 일단은 Hidden으로 설정.

 

 

오른쪽에 Create Binding으로 Bind 생성

 

 

Bind 함수 안으로 들어가서 GameOver? 이름의 Bool 변수를 만들고 True, False일 때 각각 Visible, Hidden으로 설정하도록 연결했다.

 

 

WBP_UIScreen의 Event Graph에서 Custom Event 하나 만든 후 GameOver를 체크하도록 한다.

 

 

BP_Player의 Game Over 부분에 따로 만들었던 커스텀 이벤트인 On Game Over를 연결하면 된다.

 

 

체력이 0이 되면 Game Over가 뜨면서 게임이 멈춘다.

 

 

---

 

 

무기 UI

WBP_UIScreen의 Designer 창에서 Canvas를 하나 추가해서 WeaponCanvas 이름으로 설정했다. 위치는 원래 Canvas 아래에 놓았다. 위치 맞추기 위해서 Details 수정했다. 앵커는 왼쪽 아래.

 

 

Image 2개를 생성했다.

 

 

이미지 다운로드

lifeunreal5/자료실/3장/3.3-7UMG_sampleImage.zip at main · araxrlab/lifeunreal5

 

 

드래그 앤 드랍으로 UI 폴더에 넣었다.

 

 

해당되는 이미지에 끌어다 놓기

 

 

SniperGun 이미지는 왼쪽 위 정렬,

 

 

GrenadeGun 이미지는 오른쪽 아래 정렬로 설정한다.

 

 

비활성화 된 이미지는 Blur 처리를 하기 위해서 Background Blur를 추가한다.

한 번에 꽉 차게 만들기 위해서 Ctrl 키를 누른 상태로 꽉찬 네모를 누르면 된다.

 

 

Blur Strength는 3.0 정도로 두고 이제 이미지의 ZOrder로 Blur 뒤인지 앞인지를 결정하면 된다. ZOrder가 1이면 선명, -1이면 흐릿