TIL260518 - VFX

1. 핵심 개념

---

Recording 2026-05-18 211819.mp4

0.63MB

_

CGHOW 채널에서 체력바 튜토리얼을 보고 직접 변형해서 프로젝트 내에 체력바와 경험치바로 사용했다.

2. 상세 내용

---

전체 노드 흐름

2.1. 리소스 준비

사용한 텍스처

이번 구현에 사용한 텍스처 3가지로 순서대로 다음과 같은 역할을 한다.

• Bar의 FillImage의 끝쪽이 일렁거리도록 한다.
• 1로 구현한 일렁거림을 요동치게 한다.
• 파티클 입자가 체력바에서 솓아난다.

체력바 프레임

체력바

• 체력바는 R, 체력바의 주위에 Blur(테두리 효과)는 G 채널에 두어서 압축했다.

2.2. 비주얼 목표

• 체력바를 일렁이게 한다.
• 일렁이는 체력바가 동시에 요동친다.
• 파티클이 흩날린다.

2.3. 세부 구현

TexCoord에 맞춰서 Bar_Percent에 따라 체력 게이지 다는 위치를 맞춤

체력바 이미지가 양 옆에 맞닿지 않는 경우에 대응해서 RemapValueRange를 사용해서 정의역을 수정했다.

추가로 효과가 부드럽게 Bar_Percent 진행도에 맞춰서 x축이 이동하도록 SmoothStep을 사용했다.

SmoothStep 공식

SmoothStep graph

입력값 $x$를 $min$과 $max$ 사이의 $0$ ~ $1$ 범위로 정규화($t$)한 뒤, 부드러운 곡선을 만드는 3차 다항식에 대입합니다.
[1단계: 클램핑 및 정규화]

$$t = \text{max}\left(0, \text{min}\left(1, \frac{x - \min}{\max - \min}\right)\right)$$
[2단계: 3차 에르미트 보간(Hermite Interpolation)]
$$\text{SmoothStep}(x) = 3t^2 - 2t^3$$

상황	max−min (거리)	보간 구간	시각적 효과
$max$ 증가 ↑	멀어짐	넓어짐	더 부드럽고 완만한 전환
$max$ 감소 ↓	가까워짐	좁아짐	더 급격하고 뚜렷한 전환
$min$ 증가 ↑	가까워짐	좁아짐	더 늦게 시작해서 급하게 변함
$min$ 감소 ↓	멀어짐	넓어짐	더 일찍 시작해서 천천히 변함

노이즈 패턴 패닝으로 텍스처 구현

Bar_Percent에 대응시킬 때 add 합이 1이 넘지 않도록 ConstantBiasScale 노드를 사용

Motion_4WayChaos를 모방해서 파티클 구현

각 모퉁이에서 바라보는 모퉁이로 4개의 대각선 방향으로 파티클이 진행하도록 구현

체력바 R, G 채널 나눠서 구현

앞서 제작한대로 채널에서 체력바와 테두리 발광을 합성함

최종 출력

최종적으로 Color와 매핑함

체력바

경험치바

이렇게 만들어진 메테리얼은 instant로 파라미터를 조정해서 여러 바에서 사용했다.

메테리얼과 바인딩

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnHPPercentChanged, float, percent);  
DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnEXPPercentChanged, float, percent);

프로그레션바의 step에 직접 델리게이트를 연결해서 메테리얼 애니메이션을 구현했다.

3. 질문 및 해결 (Q&A)

---

• 영상과 달리 Motion_4WayChaos를 사용해도 텍스처가 2방향으로만 흘러서 직접 노드로 대각선 4방향으로의 흐름을 패닝하도록 구현했다. 왜 다른지는 알아봐야할 것 같다.

4. 관련 문서 (Links)

---

• CGHOW