기록

240426~240503 플레이어 HP UI 디테일 추가

hayo_su 2024. 5. 4. 17:20

변경사항

1. 초상화 배경

- 피격 시 color animation적용

- alpha 값을 조정하여 UI 뒷부분이 랜더링 될 수 있도록 함

 

2. Circle Hp 

- 피격 시 테두리가 커졌다 작아지는 animation 적용

 

3. Circle Hp의 배경

- HP가 줄어든 후 잔상이 남은 느낌을 주도록 alpha값이 낮은 배경 추가


변경 전

 


변경 후


내용

1. 초상화 배경

1. Circle 모양의 머티리얼을 만들고 머티리얼 인스턴스를 만든다.

 

2. 위젯에서 적용 후 컬러값이 0.0 ,0.0 ,0.0 ,0.5 → 1.0, 0.0, 0.0, 0.5 0.0 → ,0.0 ,0.0 ,0.5 되는 애니메이션을 만든다.

 

3. Attack Event실행 시 애니메이션을 재생할 수 있도록 한다.


2. Circle Hp 

1. HP 테두리 두께에 해당하는 값을 Paramter로 변경한다.

 

2. WBP 위젯 컴포넌트에서 DropHp라는 불변수 테두리 두께를 받을 수 있는 float변수를 추가한다.

 

 

3. AttackPlayer하는 경우 AttackEvent를 실행하도록 하였고, AttackEvent 에서 Drop Hp Bool값을 True로 변경하게 하였다.

 

4. Tick함수를 통해 델타타임을 고려해서 DropFunc에서는 두께를 두껍게하고, 일정 두께에 도달하면 Drop Hp를 False로 변경하게 하였고,

RecoverFunc을 통해 원래의 두께로 변경될 수 있도록 하였다.


3. Circle Hp의 배경

 

HP모양의 머티리얼을 만들었고 해당 머티리얼의 인스턴스를 만들어서 사용하였다.

알파값을 0.1로 두어 HP가 사라지면 잔상처럼 남아 눈에 보일 수 있도록 만들었다.