[UE5] 블루아카이브 TPS게임 개발일지 (48) - 스크린 데미지 효과 (Radial Gradient Exponent)

이번엔 화면 가장자리가 붉어지는 효과를 만들 것이다.

 

구현하기 위한 방법으로 생각해본 것은 2가지이다.

1. 위젯을 이용한다.
2. 포스트 프로세스를 이용한다.

위젯을 사용하는 쪽이 구현하기에 간편하지만, 데미지의 양에 따라 붉은 면적이 늘어나는 것을 구현하기가 더 어려울 것 같다는 생각이 들었다.

 

따라서 포스트 프로세스를 이용하기로 하였다.

 

 

우선 머티리얼을 생성하고, 좌측 하단 디테일 패널에서 Material Domain을 PostProcess로 지정해주었다.

 

그리고 SceneTexture 노드와 마스크를 통해 원본 씬의 RGB를 가져온다.

 

화면의 가장자리만이 붉어야 하므로 RadialGradientExponent 노드를 사용할 것이다.

https://docs.unrealengine.com/4.27/ko/RenderingAndGraphics/Materials/Functions/Reference/Gradient/#radialgradientexponential

그레이디언트

 

노드를 추가하고, Radius와 Density를 파라미터로 받게 하였다. 노드의 핀에 우클릭하고 Promote to Parameter 버튼을 눌러 쉽게 파라미터를 만들 수 있다.

 

Radial Gradient Exponential은 기본적으로 가장자리는 놔두고, 중심에서 그래디언트를 생성한다.

하지만 지금 상황에서 필요한 것은 화면 중심은 놔두고, 가장자리에 포스트 프로세스 효과가 적용되는 것이다.

따라서 노드의 아웃풋에 1-x를 달아준다. (값을 뒤집는 것이다.)

 

그리고 Density를 조정하여, Radial Gradient 경계선의 부드러움을 조정할 수 있다. 적당히 10으로 두었다.

1-x의 결과값에 빨간색을 곱해줌으로써, 가장자리가 붉게 물들도록 할 수 있다.

시험삼아 Radius를 0.5로 하고, Multiply 노드를 통해 1-x의 결과값과 빨간색을 곱해주었다.

그리고 그 결과를 Emmisive Color에 연결해보았다.

새로운 컬러 노드를 추가하기 위해서는 블루프린트 빈 칸에 우클릭, Constant3Vector를 선택하면 된다.

 

가장자리에 빨간색이 잘 나오는 것을 볼 수 있다.

 

하지만 이펙트가 저렇게 단조롭게 멈춰있기보다는, 콜오브듀티처럼 두근거리는 효과가 있었으면 좋겠다.

 

이를 위해서 Time 노드와 sine 삼각함수를 사용할 것이다.

Time의 아웃풋이 Sine 노드의 인풋으로 들어간 것을 볼 수 있다. Time이 사인함수의 x값 역할을 하는 것이다.

따라서 Sine 노드의 결과값은 -1 ~ 1로 계속 진동하게 된다.

 

다만, 여기서 이 결과값을 Lerp 노드의 Alpha값으로 사용하고 싶은데, 그러려면 값이 -1 ~ 1이 아닌 0 ~ 1 사이를 왔다갔다 해야한다.

 

따라서 이를 맞춰주기 위해, 1을 더하고 2로 나눠주었다. 이제 Divide의 아웃풋 값을 Lerp노드의 Alpha 값으로 사용 가능하다.

파라미터로 들어온 Radius에 0.02를 더한 값을 Lerp의 A, 0.02를 뺀 값을 Lerp의 B로 집어넣었다.

Alpha를 아까 만든 진동하는 값으로 설정해줌으로써, Lerp의 아웃풋은 0.48~0.52를 계속 왔다갔다하는 값이 나온다.

이걸 RadialGradientExponential의 Radius에 집어넣으면, 실제로 좌측 상단 빨간 영역이 움직이는 것을 볼 수 있다.

 

 

이제 지금까지 한 것을 원래 씬 텍스쳐와 블렌딩 시켜주면 된다.

Blend_Screen노드를 사용하여 블렌딩을 시켜줄 수 있다.

 

 

다 하고나니 에러가나서 뭔지 봤더니, 씬 텍스쳐 종류를 PostProcess가 아닌 SceneColor로 설정해서 생긴 것이었다.

노드를 클릭하여 좌측하단 디테일 패널에서 Scene Texture Id를 PostProcessInput 0으로 설정해주었다.

 

 

 

수정하고 나니 효과가 잘 나오는 것을 볼 수 있었다.

이제 이걸 인게임에 적용하는 것은 다음 포스팅에서 다룰 것이다.