9-11. UI - (7) 줄어드는 체력 바 효과, 체력 바 숨기기

0. 개요

이전 포스트에서 몬스터의 HP를 나타내는 체력 바를 만들었다.

이제 몬스터의 HP가 감소할때 체력 바가 점점 감소하는 효과를 구현한다.

 

 

1. Ghost Progress Bar 생성 - WBP_ProgressBar

(1) 프로그래스 바 추가

기존의 오버레이에 프로그래스 바를 추가하고 변수로 승격한다.

 

(2) 그래프

승격된 변수를 꺼내어 Set Style 노드를 호출한 후 스타일 핀을 드래그하면 나타나는 창에서 가장 아래에 위치한 버튼인 Style 만들기를 누른다.

Background Image 핀을 드래그하면 나타나는 창에서 가장 아래에 위치한 버튼인 SlateBrush 만들기를 누른다.

고스트 바의 배경은 투명으로 처리할 것이므로 Tint 핀에서 드래그하면 나타나는 창의 가장 아래에 위치한 버튼인 SlateColor 만들기 후 Color의 알파 값을 0으로 지정한다.

Fill Image는 변수로 승격 후 알맞게 수정한다.

 

 

(3) 고스트 바가 파랗게 나타나는 문제 해결

위의 노드를 함수로 접고 핀을 연결하면 파랗게 표시되는 것을 볼 수 있는데, 디자이너 패널에서 컬러 및 오파시티 채우기의 색을 하양으로 지정하고 컴파일한다.

 

 

2. 블루프린트 그래프 리펙토링 - WBP_ProgressBar

WBP_ProgressBar의 자손 블루프린트인 WBP_EnemyHealthBar의 진행도를 설정하는 함수를 부모에서 생성한다.

기존의 부분을 제거하고 새로 생성한 함수를 연결한다.

 

 

3. Ghost Bar 보간 효과

(1) 부모 WBP_ProgressBar

Ghost Bar가 바뀌어야하는 float 변수에 따라 점점 줄어드는 효과를 만든다.

Ghost Percent Target을 float 변수로 지정한다.

 

이제 Ghost Percent Target의 값을 변화시킨다.

새로운 이벤트를 생성하고 여기서 나온 값이 Ghost Percent Target을 변경시키게 된다.

이벤트는 Set Bar Percent 함수에서 호출하게 된다.

 

 

(2) 자손 WBP_EnemyHealthBar

위의 Interp Ghost Bar 함수가 부모 클래스에서 정의되어있고 연결되어있으므로 부모 Tick을 호출하여야 한다.

 

 

4. 값이 변경되기 전까지 HP 바를 숨기기

(1) 타이머

타이머를 이용하면 일정 시간 이후 이벤트를 발동할 수 있다.

진행 바를 숨기는 커스텀 이벤트를 생성하고 Set Timer by Event 노드에 연결한다.

이 이벤트가 호출되면 Visiblity를 Hidden으로 설정할 것이다. 시간은 2초로 지정되어 있다.

리턴 값을 Hide Timer라는 타이머 핸들 타입 변수로 지정한다.

 

 

(2) 타이머 사용시 유의사항

타이머를 사용하기 전에 반드시 Clear를 해야한다.

Clear and Invalidate Timer by Handle을 호출하여 Clear 이후 사용한다.

 

 

(3) 진행 바 숨기기(HideProgressBar) 이벤트 호출

Set Bar Percent 함수에서 매번 진행률을 계산하고 있다.

진행률이 계산될 때마다 Visibility를 Visible로 전환하는 노드를 끼운다.

 

 

4. 최적화

이제 체력 바가 보이지 않을 때에 Tick 함수를 실행하지 않도록 하여 성능 최적화를 할 것이다.

 

(1) Set Bar Visibility

ProgressBarVisible 불리언 변수를 생성하고, 전달받은 값을 변수로 지정할 수 있게 한다.

이후 브랜치를 사용하여 해당 변수의 값에 따라 Visibility를 변경하도록 한다.

기존에 Set Visibility 노드를 대체한다.

이제 Tick 노드에서 Visibility에 따라 Interp Ghost Bar 함수를 호출한다.