UI의 포스트 프로세스 머티리얼

지금까지 씬의 외형을 제어하는 기존 세팅을 조정하기 위해 포스트 프로세스 볼륨을 사용해 왔습니다. 고유한 커스텀 포스트 프로세스 이펙트를 추가하려면 포스트 프로세스 머티리얼을 생성하면 됩니다. 이 머티리얼은 카메라에 직접 이펙트를 적용하거나 포스트 프로세스 볼륨에 추가하여 플레이어가 화면에서 보는 장면에 영향을 미칠 수 있습니다.

이 시리즈에서는 플레이어가 대미지를 입었을 때 이를 화면에 시각적으로 전달하는 이펙트를 추가합니다. 바로 화면 가장자리가 빨간색으로 맥박치는 이펙트가 그것입니다. 플레이어 체력이 낮아질수록 이펙트가 더욱 강해지고 화면에서 차지하는 영역도 넓어집니다.

이를 구현하기 위해 다음을 수행합니다.

• 부모 포스트 프로세스 머티리얼을 빌드합니다.

• 부모 머티리얼의 파라미터를 제어할 머티리얼 인스턴스를 생성합니다.

• 블루프린트 비주얼 스크립팅을 사용하여 화면 이펙트를 표시하고 제어합니다.

• 플레이어 캐릭터의 블루프린트 로직을 수정하여 일정 시간이 지나면 체력(HP)이 회복되도록 하고, 이에 따라 대미지를 입은 플레이어의 비주얼 이펙트가 사라지게 합니다.

시작하기 전에

퍼즐 어드벤처 게임을 위한 아트 패스 튜토리얼 시리즈의 이전 섹션에서 다룬 다음과 같은 주제를 반드시 이해하고 있어야 합니다.

• 머티리얼 및 머티리얼 인스턴스 빌드하기

• 레벨에 포스트 프로세스 볼륨 추가하기

샘플 프로젝트 파일에서 다음 에셋을 사용하게 됩니다.

• BP_AdventureCharacter 블루프린트

대미지 표시용 머티리얼 생성

먼저, 이펙트의 외형을 정의하는 베이스가 될 머티리얼을 만듭니다. 이 머티리얼은 그레이스케일 마스크를 생성하며, 마스크의 밝은 영역에는 인게임 카메라 뷰가 표시되고 어두운 영역에는 빨간색으로 맥박치는 대미지 이펙트가 나타나도록 합니다.

새 포스트 프로세스 머티리얼을 생성하려면 다음 단계를 따릅니다.

1. 콘텐츠 브라우저에서 AdventureGame > Artist > Materials 폴더로 이동합니다.

2. Materials 폴더에서 M_Screen_Damage라는 이름의 새로운 머티리얼 에셋을 생성합니다. 머티리얼을 엽니다.

3. 디테일 패널에서 머티리얼의 도메인(Domain)을 포스트 프로세스(Post Process)로 변경합니다.

   이렇게 하면 머티리얼의 루트 노드에서 사용할 수 있는 핀이 변경되는 것을 확인할 수 있습니다. 포스트 프로세스 머티리얼은 씬 라이팅을 사용하지 않기 때문에 이미시브 컬러만 제어하게 됩니다.

표면 타입의 머티리얼에서는 이미시브 컬러가 머티리얼이 방출하는 라이트의 양을 제어합니다. 머티리얼의 도메인(Domain)을 포스트 프로세스(Post Process)로 변경하면 더는 표면을 셰이딩하는 것이 아니라 화면에 직접 값을 출력하게 됩니다. 이 경우, 이미시브 컬러가 각 픽셀의 최종 출력 컬러를 제어합니다.

대미지 이펙트 셰이프 정의

이제 포스트 프로세스 이펙트의 셰이프를 정의하는 마스크부터 시작하여 머티리얼 그래프를 빌드하기 시작해 보겠습니다. 먼저 GeneratedRoundRectNode를 사용하여 내부는 흰색이고 외부는 검은색인 둥근 직사각형 형태의 그레이스케일 마스크를 생성합니다. 나중에는 마스크의 각 부분에 어떤 이펙트를 표시할지 정의하게 됩니다.

그레이스케일 마스크를 생성하려면 다음 단계를 따릅니다.

1. 머티리얼 그래프에서 머티리얼 루트 노드 왼쪽에 GeneratedRoundRect 노드를 추가합니다.

   

   이 노드를 머티리얼 루트 노드에 연결하면 프리뷰 창에서 노드의 출력 예시를 확인할 수 있습니다.

2. ScreenPosition 노드를 추가합니다.

3. ScreenPosition 노드의 뷰포트 UV(ViewportUV) 출력을 GeneratedRoundRect 노드의 UV 좌표 V2(UV Coords (V2)) 입력에 연결합니다.

   뷰포트 UV 출력은 GeneratedRoundRect 노드가 뷰포트 화면 좌표와 동일한 공간에서 마스크를 그리도록 지정합니다.

벡터 파라미터를 사용하여 마스크 셰이프를 제어하려면 다음 단계를 따릅니다.

1. Constant4Vector 노드를 추가합니다. 이 노드는 컬러 값을 생성하는 데 사용할 수도 있고, 더 넓게는 GeneratedRoundRect 마스크의 크기와 셰이프를 제어하는 값의 컬렉션으로 사용할 수도 있습니다.

   키보드에서 4를 누른 채로 그래프를 클릭하여 이 노드를 추가합니다.

2. 벡터 노드를 우클릭하고 파라미터로 변환을 선택하여 해당 상수를 벡터 파라미터로 변환합니다. 이름을 Damage Mask Controls로 짓습니다.

   

   벡터 파라미터를 사용하면 각 채널 값을 개별 단일 값 Constant(또는 스칼라 파라미터) 노드처럼 사용할 수 있으므로 그래프를 보다 효율적이고 정돈된 형태로 구성할 수 있습니다. 기본적으로 값에는 RGBA 컬러 채널 라벨이 지정되어 있지만, 노드의 디테일 패널에서 이름을 변경하여 원하는 의미의 값으로 사용할 수 있습니다.

3. 디테일 패널의 파라미터 커스터마이제이션 카테고리에서 채널 이름을 확장하고, 벡터 파라미터 노드의 각 컬러 채널에 이름을 할당합니다. 이러한 채널의 이름을 GeneratedRoundRect 노드의 입력에 맞게 짓게 됩니다.

   • R = Size X

   • G = Size Y

   • B = Corner Radius

   • A = Sharpness

   디테일 패널 파라미터 채널 이름	채널 이름이 변경된 Damage Mask Controls

4. 머티리얼 표현식 벡터 파라미터(Material Expression Vector Parameter) 카테고리에서 디폴트 값(Default Value)을 확장하고 각 채널의 디폴트 값을 다음과 같이 설정합니다.

   • Size X = 1

   • Size Y = 1

   • Corner Radius = 0.4

   • Sharpness = 0.2

5. 그래프에서 Constant Vector 노드의 Size X 핀을 드래그하여 AppendVector 노드를 생성합니다.

6. Size Y 핀을 Append 노드의 B 입력에 연결합니다.

7. Append 노드의 출력 핀을 GeneratedRoundRect 노드의 박스 치수(Box Dimensions) 핀에 연결합니다.

8. Damage Mask Controls 노드와 GeneratedRoundRect 노드의 Corner Radius 및 Sharpness 핀을 연결합니다.

   

9. 이러한 노드 주변에 Damage Mask Falloff라는 라벨의 코멘트 블록을 추가합니다.

직사각형 마스크를 확인하려면 다음 단계를 따릅니다.

1. GeneratedRoundRect 노드를 머티리얼 루트 노드의 이미시브 컬러(Emissive Color) 입력에 연결합니다.

   

2. Damage Mask Controls 노드를 선택하고 Size, Corner Radius, Sharpness 값을 변경하여 각 값이 직사각형에 미치는 영향을 확인합니다.

3. 값을 이전 디폴트 값으로 리셋하고, GeneratedRoundRect와 메인 머티리얼 노드 사이의 연결을 삭제합니다.

마스크의 서로 다른 영역에 시각적 이펙트 표시

확장된 머티리얼 인스턴스에서는 석재 바닥 머티리얼의 마른 상태와 젖은 상태를 블렌딩하기 위해 선형보간(Lerp)을 사용했습니다. 바닥 머티리얼의 Lerp 노드는 Timeline을 알파 입력으로 사용하여 두 파라미터 값 사이를 블렌딩했습니다. Lerp 노드에서 알파 입력은 Lerp가 A와 B 입력 사이를 얼마나 블렌딩할지를 제어합니다. '알파'가 0이면 결과는 전부 A입니다. '알파'가 1이면 결과는 전부 B입니다.

'알파' 값은 각 픽셀이 값을 제공하는 그레이스케일 마스크에서 가져올 수도 있습니다. 흰색 영역은 B, 검은색 영역은 A를 표시하며, 회색 영역은 둘 사이를 블렌딩합니다. 따라서 이 섹션에서는 Lerp 노드를 사용하여 화면 중앙의 가려지지 않은 게임 뷰(마스크가 흰색인 부분)과 화면 가장자리의 빨간색(마스크가 검은색인 부분) 사이를 블렌딩합니다.

게임 화면과 입은 대미지를 나타내는 빨간색 사이를 블렌딩하려면 다음 단계를 따릅니다.

1. GeneratedRoundRect 노드의 오른쪽에 LinearInterpolate(또는 Lerp) 노드를 추가합니다. 노드 위에 마우스를 올리고 코멘트 말풍선 토글(Toggle Comment Bubble) 버튼을 클릭한 뒤 1을 입력합니다.

   이 그래프에서는 여러 Lerp 노드를 사용하므로, Lerp 노드에 번호를 붙이면 튜토리얼을 따라가기가 수월해집니다. 이 노드를 Lerp (1)로 레퍼런스합니다.

   

2. GeneratedRoundRect의 Result 출력을 Lerp (1) 노드의 알파(Alpha) 입력에 연결합니다.

3. SceneTexture 노드를 추가합니다.

4. 디테일 패널에서 씬 텍스처 ID(Scene Texture Id)를 PostProcessInput0으로 변경합니다.

   

5. SceneTexture 노드의 컬러(Color) 출력을 Lerp (1) 노드의 B 입력에 연결합니다.

   

6. 그래프에서 Constant3Vector를 추가합니다. 노드를 우클릭하고 파라미터로 변환을 선택합니다. 파라미터 이름을 Damage Color로 짓습니다. 이 파라미터는 대미지 이펙트의 컬러를 제어합니다.

7. 디폴트 값 옆에서 색 견본을 클릭하고 컬러를 빨간색(R = 1)으로 변경합니다.

8. Damage Color 노드의 상단(흰색) 핀을 Lerp (1) 노드의 A 입력에 연결합니다. Damage Color의 상단 핀은 세 개의 RGB 컬러 채널만 출력합니다.

9. 프리뷰 창에서 결과를 확인하기 위해 Lerp (1) 출력을 머티리얼 루트 노드의 이미시브 컬러 핀에 연결합니다. Float3에서 Float4로 변환되는 과정에서 정의되지 않은 산술 오류가 발생합니다.

   

Damage Color 노드의 상단 핀은 Float3 값(세 개의 채널, RGB)을 출력하고, SceneTexture 노드의 컬러 핀은 Float4 값(네 개의 채널, RGBA)을 출력합니다. 이 오류를 해결하고 값 타입을 일치시키기 위해 Scene Texture의 컬러 출력에서 알파 채널을 제거하는 컴포넌트 마스크를 사용할 수 있습니다. 세 개의 채널(RGB)만 일치시키면 되기 때문입니다. 이와 같은 오류는 컴포넌트 마스크를 사용하여 해결할 수 있습니다.

SceneTexture 노드의 컬러를 Float3 값으로 변환하여 오류를 해결하려면 다음 단계를 따릅니다.

1. ComponentMask 노드를 추가하고 SceneTexture 노드의 컬러 핀을 Mask 노드에 연결합니다.

2. Mask 노드의 출력을 Lerp (1) 노드의 B 입력에 연결합니다.

   

3. Mask 노드 하단의 화살표를 클릭하면 컬러 출력의 각 채널에 대한 체크박스가 표시됩니다.

4. 기본적으로 컴포넌트 마스크는 R과 G 채널만 마스킹합니다. B 옆에 체크 표시를 추가합니다. 이렇게 하면 Float3 컴포넌트 마스크가 생성되어 Lerp (1)의 두 입력이 동일한 채널을 사용하게 됩니다.

   

그래프는 다음과 같은 모습이 되어야 합니다.

프리뷰 뷰포트에서 머티리얼은 다음과 같은 모습이 되어야 합니다.

이펙트에 노이즈 및 베리에이션 추가

이 섹션에서는 화면 가장자리 주변에 텍스처를 적용하여 머티리얼의 노이즈 섹션을 구성합니다. 이를 통해 머티리얼 파라미터를 사용하여 캐릭터의 인게임 대미지에 따라 최종 이펙트 외형을 제어할 수 있습니다.

머티리얼에 노이즈를 추가하려면 다음 단계를 따릅니다.

1. 그래프 하단에 ScreenAlignedUVs 노드를 추가합니다. ScreenAlignedUVs 노드를 사용하면 텍스처 또는 이펙트를 전체 화면에 매핑할 수 있습니다. 이 노드는 전체 뷰포트 또는 화면에 대한 UV 좌표를 생성합니다.

2. X 100%, Y 100% 핀에서 드래그하여 Multiply 노드를 추가합니다.

3. 우클릭하고 Constant 노드를 생성합니다. 해당 노드를 우클릭하고 파라미터로 변환을 선택한 다음 이름을 Noise Tiling으로 짓습니다. 이를 Multiply 노드의 B 입력에 연결합니다.

4. Noise Tiling 노드의 디폴트 값을 1로 설정합니다.

   

5. Multiply 노드의 출력 핀에서 드래그하여 TextureSample 노드를 생성하고, 해당 와이어를 UVs 입력에 연결합니다.

6. TextureSample을 우클릭하여 파라미터로 변환하고, 이름을 Noise Texture로 짓습니다.

   

7. Noise Texture 노드를 선택한 상태에서 디테일 패널 하단의 머티리얼 표현식 텍스처 베이스(Material Expression Texture Base) 카테고리에서 Noise Texture 텍스처 할당 슬롯을 TilingNoise05로 설정합니다.

   

   이 텍스처는 언리얼 엔진에 포함된 엔진 콘텐츠의 일부입니다. 다른 텍스처를 사용할 수도 있지만, 대체할 것이 없다면 이 텍스처는 시작하기에 적절한 디폴트 텍스처입니다. 다른 텍스처를 사용할 경우에는 결과가 이 튜토리얼에 표시된 것과 다를 수 있습니다.

8. Noise Texture 노드의 R 채널에서 드래그하여 Multiply 노드를 생성합니다.

9. 해당 노드의 B 핀을 우클릭하고 파라미터로 승격을 선택합니다. 파라미터 이름을 Noise Falloff로 짓고 디폴트 값을 1로 설정합니다.

10. Multiply 노드의 출력 핀에서 드래그하여 Power 노드를 생성합니다.

11. 실행 핀을 우클릭하고 파라미터로 승격을 선택합니다. 파라미터 이름을 Noise Amount로 짓고 디폴트 값을 1로 설정합니다.

12. 방금 생성한 여덟 개의 노드를 선택하고 C 키를 눌러 주위에 코멘트 박스를 추가합니다. 코멘트 박스 라벨을 Noise in Damage Mask로 지정합니다.

    

이 시점에서 Power 노드를 M_Screen_Damage 머티리얼 루트 노드의 이미시브 컬러 입력에 직접 연결하여 이 머티리얼 부분을 테스트할 수 있습니다. 프리뷰 창에 다음과 같은 결과가 표시됩니다.

테스트가 끝나면 머티리얼 루트 노드를 노이즈 텍스처 로직에서 분리하고 다시 Lerp (1) 노드에 연결합니다. 이 가이드의 후반부에서 모든 것을 연결하기 전에, 머티리얼의 다른 부분을 계속 빌드합니다.

마스크에 노이즈 추가

이제 노이즈 마스크가 준비되었으므로, Multiply 노드를 사용하여 대미지 마스크의 감쇠 값에 노이즈 마스크를 곱해 블렌딩합니다. 이 작업은 화면 중앙에 가장 가까운 대미지 마스크의 내부 가장자리 영역에 노이즈 마스크를 적용합니다.

마스크의 검은 영역에 노이즈 텍스처를 추가하려면 다음 단계를 따릅니다.

1. GeneratedRoundRect 노드 옆에 공간을 확보하기 위해 M_Screen_Damage 머티리얼 루트 노드를 오른쪽으로 이동합니다. 새로운 로직을 추가할 예정이므로 GeneratedRoundRect 노드와 기존 Lerp (1) 노드 사이의 와이어를 삭제합니다.

2. 그래프를 우클릭하고 새로운 Lerp 노드를 생성합니다. 노드 위에 마우스를 올리고 코멘트 말풍선 토글을 클릭한 뒤 코멘트로 2를 입력합니다.

   

3. GenerateRoundRect 노드의 결과(Result) 핀을 Lerp (2) 노드의 알파 입력에 연결합니다.

4. GenerateRoundRect 노드의 출력을 드래그하여 One Minus 노드를 생성합니다.

   

5. One Minus 노드에서 드래그하여 Add 노드를 생성하고, 해당 출력을 Lerp (2) 노드의 B 핀에 연결합니다.

   

6. One Minus 노드에서 드래그하여 Multiply 노드를 추가합니다.

   

7. Multiply 출력에서 드래그하여 새로운 One Minus 노드를 추가하고, 이를 Add 노드의 B 입력에 연결합니다.

   

8. Lerp (2) 노드 뒤에 Saturate 노드를 추가합니다. 이 과정은 출력 값을 0~1 범위로 제한합니다.

9. 이 로직에 코멘트를 추가하고 라벨을 Gets the Brightest Spots of the Mask로 지정합니다.

   

이 시점에서 머티리얼은 다음과 비슷한 모습이 됩니다.

Noise, Mask, Damage Color 섹션 연결

그래프의 Noise, Damage Mask, Damage Color 엘리먼트를 연결하려면 다음 단계를 따릅니다.

1. 노이즈 마스크 로직의 Power 노드에서 드래그하여 대미지 마스크 영역 로직에 있는 Multiply 노드의 B 입력에 연결합니다.

   그래프를 정리하고 경로를 더 명확하게 하기 위해 필요한 와이어에 경유 노드를 사용합니다. 와이어를 더블클릭하여 경유 노드를 추가한 뒤 드래그하여 와이어 경로를 변경합니다.

2. Saturate 노드의 출력 핀을 Lerp (1) 노드의 알파 핀에 연결합니다.

   

3. 머티리얼을 저장하고 변경사항을 적용합니다.

결과를 확인하려면 Lerp (1) 노드를 머티리얼 루트 노드의 이미시브 컬러 입력에 연결합니다.

이제 직사각형 마스크 영역을 정의하고, 이 마스크에 컬러를 적용했으며, 텍스처를 사용하여 노이즈 마스크를 생성하고, 이를 블렌딩하여 머티리얼 에디터 프리뷰 창에 보이는 결과를 만들었습니다.

대미지 이펙트에 맥박 이펙트 추가

이 섹션에서는 플레이어가 더 많은 대미지를 입을수록 화면 가장자리의 빨간색 대미지 표시가 맥박치도록 만드는 머티리얼 로직을 빌드합니다. Sine 노드를 사용하여 맥박치는 비헤이비어를 생성하고, 사인 웨이브가 양수 값만 사용하도록 수정합니다.

대미지가 증가할수록 빨간색의 맥박 이펙트가 나타도록 하려면 다음 단계를 따릅니다.

1. 그래프 상단의 빈 영역에 Time 노드를 추가합니다.

   Time 노드는 에디터에서 경과 시간을 출력하며, 머티리얼을 애니메이팅하거나 지정된 기간 동안 변화를 구현하는 데 유용합니다.

2. 핀에서 드래그하여 Multiply 노드를 추가합니다.

3. Constant 노드를 생성한 후 파라미터로 변환하고 이름을 Pulse Speed로 짓습니다. 노드에서 디폴트 값을 0.5로 설정합니다.

4. Pulse Speed를 Multiply 노드의 B 입력에 연결합니다.

5. Multiply 노드에서 드래그하여 Sine 노드를 추가합니다.

   Sine 노드는 증가하는 Time 값을 반복적인 파형으로 변환하여 -1에서 1 사이를 부드럽게 진동하는 값으로 만듭니다.

   

6. Sine 노드 출력에서 드래그하여 Add 노드를 추가합니다. B 입력 값을 1.0으로 설정합니다.

7. Add 노드에서 드래그하여 Divide 노드를 추가합니다. B 입력이 2.0인지 확인합니다.

   Add에서 1을 더하고 Divide에서 2로 나누도록 구성하면, 사인 웨이브의 범위가 -1~1이 아니라 0~1이 되도록 바뀝니다. 이렇게 하면 Sine 노드가 텍스처 값을 반전시키는 것을 방지하여 빨간색에서 연한 파란색(빨간색의 반전 컬러)으로 깜박이는 현상을 막을 수 있습니다.

   

8. Divide 노드에서 드래그하여 Multiply 노드를 추가합니다.

9. 해당 노드의 B 입력에서 드래그하여 Constant 노드를 생성합니다. 이를 파라미터로 변환하고 이름을 Pulse Amount로 짓습니다. 디폴트 값을 1로 설정합니다.

   

10. 이 그래프 섹션에서 해당 노드를 선택하고 C 키를 눌러 코멘트 블록을 추가합니다. 라벨을 Damage Pulse Amount and Speed로 지정합니다.

    

이제 이 포스트 프로세스 머티리얼의 대미지 이펙트를 구성하는 주요 엘리먼트가 모두 머티리얼에 포함되었습니다. 이제 그래프가 다음과 비슷한 모습이 됩니다.

맥박 이펙트 로직 연결

이제 맥박치는 이펙트를 위한 로직이 구성되었으므로, 이를 씬 텍스처에 대미지 컬러를 적용하는 로직과 통합합니다. 이제 맥박칠 때 마스크 강도를 변경할 수 있습니다.

Damage Pulse Amount and Speed 섹션을 기반으로, 맥박 이펙트의 로직을 그래프의 Damage Color 및 Scene Texture 섹션과 연결하는 표현식을 추가하게 됩니다.

맥박 이펙트의 로직을 Damage Color에 연결하려면 다음 단계를 따릅니다.

1. 그래프를 우클릭하고 Damage Color 노드 및 맥박 이펙트 로직 근처에 새로운 Lerp 노드를 생성합니다. 라벨을 3으로 지정합니다.

2. 맥박 이펙트 로직의 마지막 Multiply 노드 출력을 Lerp (3)의 알파 핀에 연결합니다.

   

   Lerp (3) 노드에서 알파는 마스크에 적용되는 맥박의 강도와 빈도를 제어합니다.

3. Lerp (1)의 A 입력에 연결된 Damage Color 와이어를 삭제하고, 이를 새로운 Lerp (3) 노드의 B 입력에 연결합니다.

   

4. Damage Color 노드를 선택합니다. '디테일' 패널의 파라미터 커스터마이제이션(Parameter Customization)에서 '채널 이름(Channel Names)'을 확장하고, 텍스트 필드를 사용하여 'A' 채널 이름을 Color Amount로 변경합니다.

5. 머티리얼 표현식 벡터 파라미터(Material Expressions Vector Parameter) 카테고리의 디폴트 값에서 Color Amount 값을 2로 설정합니다.

   

6. Damage Color 노드의 Color Amount 핀에서 드래그하여 Divide 노드를 추가하고, 해당 출력을 Lerp (3) 노드의 A 핀에 연결합니다.

   

7. Lerp (3) 노드 및 맥박 이펙트 로직 근처에 새로운 Lerp 노드를 생성합니다. 라벨을 4로 지정합니다.

8. Lerp (3) 노드의 출력을 Lerp (4)의 알파 입력에 연결합니다.

   

9. Damage Color 노드의 RGB(흰색) 핀을 Lerp (4)의 B 입력에 연결합니다.

10. SceneTexture 노드에 연결된 Mask (RGB) 노드로 돌아갑니다. Mask 노드의 출력을 Lerp (4)의 A 입력에 연결합니다. 컴포넌트 마스크 노드는 이제 Lerp (1)의 B 입력과 Lerp (4)의 A 입력에 연결되어 있습니다.

    

11. Lerp (4)의 출력을 Lerp (1)의 A 입력에 연결합니다.

12. Lerp (3) 및 Lerp (4) 노드를 드래그하여 선택합니다. C 키를 눌러 코멘트 박스를 생성하고 라벨을 Lerp Pulse and Color로 지정합니다.

13. 저장(Save) 및 적용(Apply)을 클릭합니다.

이 새로운 그래프 부분은 다음과 같은 모습이 되어야 합니다.

머티리얼 프리뷰 창에서 대미지 이펙트의 결과를 확인하기 위해 Lerp (3)을 머티리얼 루트 노드의 이미시브 컬러 입력에 연결할 수 있습니다.

그래프에서 Pulse Speed와 Pulse Amount 값을 변경하여 이펙트 크기와 적용 속도가 어떻게 달라지는지 확인합니다. Pulse Amount는 0~1 사이여야 합니다. 이후 단계에서는 이 두 파라미터를 머티리얼 인스턴스에서 제어할 수 있습니다.

Damage Amount 파라미터를 사용하여 이펙트 제어

머티리얼 그래프에 마지막으로 추가할 것은 Damage Amount라는 새 파라미터이며, 이는 플레이어가 게임을 플레이하는 동안 받은 대미지 정도에 따라 이펙트 크기를 제어합니다.

이 파라미터는 캐릭터 블루프린트에서 설정되며, 플레이어가 대미지를 입을 때 화면 외부 가장자리에 표시되는 맥박 이펙트의 강도를 제어합니다. 플레이어가 더 많은 대미지를 입을수록 화면에 표시되는 이 머티리얼의 이펙트가 더 강해집니다.

런타임에서 이펙트 크기를 제어하는 파라미터를 추가하려면 다음 단계를 따릅니다.

1. 기존 머티리얼 로직과 M_Screen_Damage 머티리얼 루트 노드 사이에 약간의 공간을 추가합니다. 그래프를 우클릭하고 Lerp 노드를 추가합니다. 이 Lerp 노드 라벨을 5로 지정합니다.

2. Mask (RGB) 노드의 출력을 Lerp (5) 노드의 A 핀에 연결합니다.

   

3. Lerp (1) 노드의 출력을 Lerp (5)의 B 입력에 연결합니다.

   

4. Lerp (5)에서 알파 핀을 우클릭하여 파라미터로 승격(Promote to Parameter)을 선택하고, 파라미터 이름을 Damage Amount로 지은 뒤 디폴트 값을 1로 설정합니다.

   

   이 파라미터의 이름을 정확히 짓고 디폴트 값을 설정합니다. 플레이어 캐릭터 블루프린트는 이 파라미터를 사용하여 플레이어가 대미지를 입거나 회복할 때 화면에 이 머티리얼이 표시되는 정도를 제어합니다.

5. Lerp (5) 노드의 출력을 루트 노드의 이미시브 컬러 입력에 연결합니다.

Damage Amount 값은 0(대미지 없음, 이펙트 꺼짐)에서 1(최대 대미지, 이펙트 켜짐) 사이의 값을 사용합니다.

프리뷰 창에서 보게 될 결과는 다음과 같습니다.

다음으로는, Damage Amount를 입력으로 사용하여 GeneratedRoundRect 마스크의 크기에 영향을 미치는 새로운 노드 세트를 추가해 보겠습니다. 이 추가 작업을 통해 플레이어가 더 많은 피해를 입을수록 대미지 이펙트가 화면 중앙을 향해 안쪽으로 맥박치며, 체력이 회복되면 다시 바깥쪽으로 물러납니다.

Damage Amount가 대미지 마스크의 크기와 강도에 영향을 미치도록 하려면 다음 단계를 따릅니다.

1. 머티리얼 그래프에서 Damage Mask Falloff 섹션으로 이동합니다. Append 노드와 GeneratedRoundRect 노드 사이의 와이어를 삭제합니다.

2. Append 노드에서 드래그하여 Multiply 노드를 추가합니다.

3. Multiply 노드의 출력을 GeneratedRoundRect 노드의 박스 치수 입력에 연결합니다.

   

4. Multiply 노드의 B 입력에서 드래그하여 Lerp 노드를 추가합니다. Lerp 노드 라벨을 6으로 지정합니다.

5. Lerp (6) 노드에서 A 값은 0으로 두고 B 값을 0.75로 설정합니다.

6. Lerp (6) 노드의 알파를 우클릭하고 파라미터로 승격을 선택합니다. 다른 Damage Amount 노드와 동일하게 노드 이름을 Damage Amount로 짓습니다. 또는 원래 Damage Amount 노드를 복사하여 붙여 넣을 수 있습니다.

   

7. 적용 및 저장을 클릭합니다.

프리뷰 창에서 보게 될 결과는 다음과 같습니다.

모든 구성이 완료되면 M_Screen_Damage 머티리얼 그래프는 다음과 같은 모습이 되어야 합니다.

이펙트 제어를 위한 머티리얼 인스턴스 생성

이제 머티리얼이 준비되었으므로, 머티리얼에서 생성한 모든 파라미터를 제어하기 위해 머티리얼 인스턴스를 생성합니다. 머티리얼 인스턴스에서 노출된 파라미터를 사용하여 화면에 표시되는 대미지 이펙트의 최종적인 룩 앤 필을 정의합니다.

머티리얼 파라미터를 제어할 머티리얼 인스턴스를 구성하려면 다음 단계를 따릅니다.

1. 콘텐츠 브라우저에서 Artist > Materials 폴더로 이동하고 M_Screen_Damage 머티리얼을 우클릭한 다음 컨텍스트 메뉴에서 머티리얼 인스턴스 생성(Create Material Instance)을 선택합니다.

2. 에셋 이름을 MI_Screen_Damage로 짓고 엽니다.

   

3. 머티리얼 프리뷰를 실시간으로 실행하고 파라미터 변경사항이 머티리얼에 미치는 영향을 보려면 뷰포트 상단의 노란색 스톱워치 버튼을 두 번 클릭합니다.

   

4. 디테일 패널에서 파라미터 그룹(Parameter Groups)의 섹션을 확장하여 머티리얼에서 노출한 모든 파라미터를 확인합니다. Damage Mask Controls와 같은 벡터 파라미터를 확장하여 개별 파라미터 값을 확인합니다.

5. Noise Texture를 제외한 모든 파라미터 옆에 체크 표시를 추가하여 오버라이드할 수 있게 설정합니다.

   값을 변경하고 파라미터에서 체크 표시를 제거하면 부모 머티리얼에 설정된 원래 디폴트 값을 사용합니다.

6. 머티리얼 인스턴스를 작업하는 동안 다양한 파라미터 값을 변경해 보면서 프리뷰 창에서 대미지 이펙트가 어떻게 달라지는지 확인합니다. Pulse Amount, Noise Falloff, Pulse Speed, Damage Mask Controls(벡터 파라미터)의 값을 변경해 보면서 이펙트가 어떻게 달라지는지 확인합니다.

7. Damage Amount 값은 기본적으로 1로 설정되어 있으므로, 프리뷰 창에서 머티리얼 변화를 바로 확인할 수 있습니다. 하지만 게임이 시작될 때 플레이어가 대미지를 입기 전까지 이펙트가 화면에 나타나지 않도록 이 값을 0으로 변경합니다. 다음 섹션에서는 플레이어 캐릭터 블루프린트가 이 값을 제어하도록 설정합니다.

8. 머티리얼 인스턴스를 저장합니다.

머티리얼 인스턴스에서 파라미터 값 설정

이 튜토리얼의 샘플 레벨에서는 다음과 같은 파라미터 값을 사용합니다. 다음과 같은 값을 사용하거나 프로젝트에 맞게 조정할 수 있습니다.

[선택 사항] 파라미터 값 정리 및 제한

머티리얼 인스턴스의 파라미터 값을 더 쉽게 탐색하고 사용할 수 있도록 하고 극단적인 값이 발생할 가능성을 줄이기 위해, 파라미터를 그룹으로 정리하고 슬라이더 값 범위를 설정하여 허용되거나 의도된 범위 내에서만 조정되도록 할 수 있습니다.

예를 들어 Damage Amount는 플레이어 체력을 반영하는 값으로, 0은 화면에 대미지가 없는 상태이고, 1은 화면에서 최대 대미지 상태를 의미합니다. 따라서 해당 범위를 초과할 수 없도록 이 값은 0에서 1 사이 범위 내에서만 조정되도록 슬라이더를 구성하는 것이 적절합니다.

부모 머티리얼에서 각 명명된 파라미터를 선택하고, 디테일 패널을 사용하여 그룹(Group), 슬라이더 최소(Slider Min), 슬라이더 최대(Slider Max) 범위를 다음과 같이 구성합니다.

머티리얼 인스턴스에서 해당 변경이 파라미터 목록의 값에 어떻게 반영되는지 확인할 수 있습니다. 파라미터는 해당 그룹에 따라 새로운 카테고리로 정리됩니다. 슬라이더는 설정된 최솟값과 최댓값을 초과하지 않고 그 사이에서만 드래그할 수 있습니다. 하지만 새 값을 직접 입력하면 슬라이더의 제한을 오버라이드할 수 있습니다.

캐릭터 블루프린트에 포스트 프로세스 머티리얼 추가

이제 포스트 프로세스 머티리얼이 구성되고 인스턴스도 생성되었습니다. 다음으로는, 캐릭터 블루프린트에서 머티리얼 인스턴스 다이내믹(Material Instance Dynamic, MID)이라고도 하는 다이내믹 머티리얼 인스턴스 를 생성하고 사용하도록 구성해 보겠습니다. 이 과정에서는 MI_Screen_Damage 머티리얼 인스턴스를 사용하여 블루프린트에서 'Damage Amount' 파라미터를 참조합니다. 블루프린트 그래프에서 구성한 로직을 사용하여 게임플레이 동안 발생하는 상황에 따라 Damage Amount 값을 머티리얼 인스턴스에 주입함으로써 실시간으로 머티리얼을 조정할 수 있습니다.

캐릭터에는 대미지를 입을 때 변경되는 'Health' 변수가 있습니다. 이 변수를 머티리얼 인스턴스와 함께 사용하여 플레이어가 대미지를 입을수록 캐릭터의 화면에 이펙트를 적용하고 체력이 회복되면 이펙트를 제거합니다.

다이내믹 머티리얼 인스턴스를 생성하고 포스트 프로세싱에 추가

머티리얼 인스턴스는 런타임에서 직접 수정할 수 없는 에셋입니다. 대신, 캐릭터 블루프린트에서 다이내믹 머티리얼 인스턴스를 생성합니다. 다이내믹 머티리얼 인스턴스는 게임 시작 시 생성되는 머티리얼 인스턴스의 런타임 버전이며, 게임 실행 중에 명명된 파라미터를 통해 값을 변경할 수 있습니다. 그 다음, MID를 플레이어 카메라에 할당하여 플레이어가 대미지를 입을 때 화면에 표시되도록 합니다.

머티리얼의 인스턴스를 생성하고 변수에 저장하려면 다음 단계를 따릅니다.

1. 콘텐츠 브라우저에서 Content > AdventureGame > Designer > Blueprints > Characters로 이동하여 BP_AdventureCharacter 블루프린트를 엽니다.

2. 이벤트 그래프에서 Event BeginPlay 노드로 시작하는 로직 그룹을 찾습니다. 이 그룹을 그래프에서 더 넓은 공간이 있는 영역으로 드래그하여 이 로직에 노드를 추가할 수 있도록 합니다.

   그래프에서 이벤트 노드를 찾으려면, 내 블루프린트 패널에서 EventGraph 목록을 확장하고 Event BeginPlay를 더블클릭합니다. 그래프 뷰가 해당 노드에 포커싱됩니다.

   

3. Set Default Movement Speed 노드 이후의 실행 핀에서 드래그하여 Create Dynamic Material Instance 노드를 추가합니다.

4. 이 Create Dynamic Material Instance 노드에서 '부모(Parent)'를 MI_ScreenDamage로 설정합니다. 이것은 이전에 생성한 머티리얼 인스턴스로, 화면의 대미지 이펙트를 제어하는 데 사용됩니다.

   

5. 해당 노드의 반환 값(Return Value) 핀을 우클릭하고 변수로 승격(Promote to Variable)을 선택합니다.

6. 내 블루프린트(My Blueprint) 패널의 변수(Variables) 목록에서 NewVar 이름을 MID Damage로 변경합니다.

   

이제 Create Dynamic Material Instance 노드는 MI_Screen_Damage의 런타임 버전을 생성하여 새 변수에 저장하며, 그래프의 다른 위치에서 레퍼런스할 수 있습니다.

머티리얼 인스턴스를 카메라의 포스트 프로세싱 패스에 할당하려면 다음 단계를 따릅니다.

1. 컴포넌트(Components) 패널에서 FirstPersonCamera 컴포넌트를 그래프로 드래그합니다. 이 단계는 플레이어 카메라에 대한 레퍼런스를 생성합니다.

2. 출력에서 드래그하여 Set Post Process Settings 노드를 생성합니다.

3. 두 Set 노드의 실행 핀을 연결합니다.

   

4. Set Post Process Settings 노드의 '포스트 프로세스 세팅(Post Process Settings)' 입력에서 드래그하여 Make Post Process Settings 노드를 추가합니다.

5. Make Post Process Settings 노드를 선택합니다. '디테일' 패널의 '렌더링 기능(Rendering Features)' 카테고리에서 '포스트 프로세스 머티리얼(Post Process Materials)' 옆에 체크 표시를 추가하여 해당 핀이 Make Post Process Settings 노드에 추가되도록 합니다.

   

6. 해당 노드에서 포스트 프로세스 머티리얼 입력 핀을 우클릭하고 구조체 핀 분할(Split Struct Pin)을 선택합니다. 이 핀은 이제 배열을 입력으로 받습니다.

7. 포스트 프로세스 머티리얼 배열(Post Process Materials Array) 핀에서 드래그하여 Make Array 노드를 추가합니다.

8. Make Array 노드의 [0] 입력에서 드래그하여 Make Weighted Blendable 노드를 추가합니다.

   

9. Make Weighted Blendable 노드에서 가중치(Weight)를 1로 설정합니다.

10. Set MID Damage 노드의 출력(파란색) 핀에서 드래그하여 Make Weighted Blendable 노드의 오브젝트(Object) 입력에 연결합니다.

    

    Set 노드의 출력 핀은 해당 변수에 대한 레퍼런스를 제공합니다.

11. 그래프에 추가한 노드를 선택하고 C 키를 눌러 주위에 코멘트 박스를 생성합니다. 라벨을 Create Dynamic Material Instance for Post-Process Effect and assign to Player Camera로 지정합니다.

    

12. 블루프린트를 컴파일하고 저장합니다.

이 로직은 게임 시작 시 다이내믹 머티리얼 인스턴스를 생성하고, 이를 이 블루프린트의 1인칭 카메라에 적용합니다.

플레이어의 Event BeginPlay 로직에 새로 추가된 섹션은 다음과 같습니다.

위에서 하이라이트된 부분의 스니펫을 제공하므로, 직접 로직을 빌드하는 대신 이벤트 그래프에 복사하여 사용할 수 있습니다.

인게임에서 이펙트 테스트

머티리얼 인스턴스(MI_Screen_Damage)에서 Damage Amount를 일시적으로 1로 변경한 후 저장을 클릭합니다. 게임을 실행하면 대미지를 입지 않아도 이펙트를 테스트하여 이펙트에 원하는 룩 앤 필을 조정할 수 있습니다. Damage Amount가 1로 설정되면 머티리얼이 지속적으로 활성화됩니다. 머티리얼 테스트가 끝나면 Damage Amount를 다시 0으로 설정합니다.

다음으로는, 캐릭터가 대미지를 입으면 다이내믹 머티리얼 인스턴스가 나타나고 체력이 회복되면 사라지도록 하는 로직을 캐릭터 블루프린트에 추가해 보겠습니다.

입은 대미지에 따라 이펙트 표시 또는 숨기기

플레이어가 대미지를 입었을 때만 다이내믹 머티리얼 인스턴스 이펙트가 나타나도록 하려면, 플레이어 캐릭터에서 기존 대미지 처리 로직을 확장합니다.

이 새로운 로직은 다음을 수행해야 합니다.

1. 캐릭터의 Health 변수를 기반으로 머티리얼의 Damage Amount 파라미터를 변경하여 다음을 구현합니다.

   • Health가 가득 찬 상태에서는 화면에 포스트 프로세스 이펙트가 나타나지 않습니다.

   • 체력이 감소할수록 화면의 포스트 프로세스 이펙트가 강해집니다.

2. 일정 시간 동안 플레이어가 대미지를 입지 않으면 Health를 완전히 회복시키고 포스트 프로세스 이펙트를 제거합니다.

Maximum Health 변수 생성

플레이어의 체력 값을 다루게 되므로, 100과 같이 하드코딩된 스태틱 값을 직접 입력하는 대신 대미지 이펙트 로직 전체에서 레퍼런스할 수 있도록 플레이어의 최대 체력을 변수로 저장하는 것이 좋습니다. 이렇게 하면 캐릭터의 시작 체력을 더 많거나 적게 설정하더라도 블루프린트 로직이 정상적으로 동작합니다.

플레이어의 최대 체력을 저장하는 변수를 생성하려면 다음 단계를 따릅니다.

1. BP_AdventureCharacter에서 내 블루프린트 패널의 변수 섹션으로 이동한 다음 +를 클릭하여 새 변수를 추가합니다.

2. 이름을 MaxHealth로 짓고 타입을 Float로 변경합니다. 블루프린트를 컴파일합니다.

3. 이벤트 그래프에서 이전 섹션에서 작업하던 Event BeginPlay 로직 그룹으로 이동하고 Event BeginPlay 노드와 Set Default Movement Speed 노드를 살펴봅니다.

   

4. Event BeginPlay에서 드래그하여 Set MaxHealth 노드를 추가합니다.

5. 변수 목록에서 Health 변수를 드래그하여 새로운 Set 노드의 Max Health 핀에 연결합니다.

   

이제 게임이 시작되면 Health 값(디폴트 100)이 MaxHealth에 저장됩니다. 플레이어가 게임을 플레이하면서 Health가 변경되더라도 MaxHealth는 동일하게 유지되어 플레이어의 최대 체력이 보존됩니다.

현재 플레이어 체력을 머티리얼에 연결

먼저, 플레이어의 대미지 처리 로직을 확장하여 Damage Amount 파라미터로 다이내믹 머티리얼 인스턴스를 제어합니다. 이렇게 하면 플레이어의 체력이 감소할수록 화면에서 이펙트 강도가 증가합니다.

플레이어 체력이 감소할수록 Damage Amount를 스케일 업하려면 다음 단계를 따릅니다.

1. 캐릭터 블루프린트에서 이벤트 그래프의 왼쪽 하단 섹션 근처에 있는 라벨이 (DT) Damage and defeat handling으로 지정된 로직 그룹으로 이동합니다. Set Health 노드와 Branch 노드 사이에 새로운 로직을 추가할 예정이므로 두 노드 사이에 공간을 확보합니다.

   

2. 변수 목록에서 MID Damage 변수를 그래프로 드래그하고 Get MID Damage를 선택합니다.

3. Get MID Damage 노드의 출력 핀에서 드래그하고 목록에서 Set Scalar Parameter Value를 선택합니다.

4. Set Health를 Set Scalar Parameter Value에 연결한 다음 Branch 노드에 연결합니다.

   

5. Set Scalar Parameter Value 노드의 파라미터 이름(Parameter Name)에 Damage Amount를 입력합니다. 이것은 화면 이펙트의 크기와 강도를 제어하는 머티리얼 파라미터입니다.

   이펙트가 정상 작동하려면 이 이름이 머티리얼 M_Screen_Damage의 해당 파라미터와 반드시 일치해야 합니다.

   

6. Set Scalar Parameter Value 노드의 값(Value) 입력에서 드래그하여 Lerp 노드를 생성합니다.

7. Lerp 노드에서 A를 1.0으로, B를 0으로 설정합니다. 이렇게 하면 값이 리매핑되어, 대미지를 입을 때 체력을 잃을수록 값이 0에서 100으로 증가하는 대신 100(최대 체력)에서 0으로 감소하도록 설정됩니다.

8. Lerp 노드에서 알파 입력을 드래그하여 Divide 노드를 생성합니다.

9. 변수 목록에서 캐릭터의 Health 변수를 드래그하여 Divide 노드의 상단 입력에 연결합니다.

   

10. 캐릭터의 MaxHealth 변수를 드래그하여 Divide 노드의 하단 입력에 연결합니다.

Divide 노드는 플레이어의 체력을 1~0 사이의 값으로 변환하며, 이때 1은 체력이 가득 찬 상태(대미지 없음)입니다. 하지만 Damage Amount 값은 플레이어 체력이 감소할수록 줄어드는 것이 아니라 증가해야 합니다. Lerp 노드는 이 값의 범위를 반전시킵니다. 예를 들어 Health가 25라면 Lerp는 Set Scalar Parameter Value 노드에 0.75를 반환하며, 이는 최대 강도의 75% 이펙트를 의미합니다.

이제 그래프의 (DT) Damage and defeat handling 섹션은 다음과 비슷한 모습이 됩니다.

체력 재생을 위한 리셋 딜레이 추가

대미지 이펙트가 사라지도록 플레이어의 Health 변수(HP)가 최대치로 회복되려면, 플레이어 캐릭터는 일정 시간 동안 대미지를 받지 않아야 합니다. Retriggerable Delay 노드를 사용하여 5초 딜레이가 완료된 후에만 Health가 회복되도록 설정합니다. 이 타입의 Delay 노드는 쿨다운을 리셋하는 데 사용할 수 있습니다. 설정된 시간 동안 대기한 후 다음 노드를 실행하지만, 시간이 끝나기 전에 다시 트리거되면 카운트다운이 다시 시작됩니다.

대미지 이펙트를 제거하기 전에 딜레이를 추가하려면 다음 단계를 따릅니다.

1. Branch 노드 아래에서 Fn Set HP 노드의 실행 핀을 드래그하여 Sequence 노드를 추가합니다. 플레이어가 대미지를 입었지만 아직 사망하지 않은 상태에서 실행할 일련의 액션을 추가하기 위해 이 노드를 사용합니다.

   

2. Then 0 경로에서 드래그하여 Retriggerable Delay 노드를 추가합니다. Delay 노드에서 기간(Duration)을 5초로 설정합니다.

   

3. 딜레이 후에는 플레이어가 아직 생존해 있는지 확인하는 것이 좋습니다.

   1. Retriggerable Delay에서 드래그하여 Branch 노드를 추가합니다.

   2. Branch 노드의 조건(Condition) 핀에서 드래그하여 Greater (>) 노드를 추가합니다.

   3. 변수 패널에서 Health 변수를 드래그하여 Greater (>) 노드의 상단 핀에 연결합니다.

      

이제 플레이어가 대미지를 입되 제거되지 않은 경우(체력이 0이 아닌 경우)마다 딜레이 시간이 0부터 다시 시작됩니다. 다음으로는, 딜레이가 완료된 후 실행할 로직을 구성해 보겠습니다.

이제 블루프린트 그래프는 다음과 비슷한 모습이 됩니다.

플레이어 체력 블렌딩을 위한 타임라인 구성

이 그래프 섹션에서는 짧은 시간 동안 플레이어의 체력을 점진적으로 회복시키기 위한 타임라인을 추가합니다. Timeline 노드의 컨트롤은 시작, 정지 및 트랙 시간 동안의 동작을 정의합니다.

5초 길이의 타임라인을 구성하려면 다음 단계를 따릅니다.

1. Sequence 노드의 Then 0 로직 아래에서 그래프를 우클릭한 후 노드 액션 목록에서 add timeline을 검색하고 Add Timeline을 선택합니다. Timeline 노드 이름을 Damage Blend로 짓습니다.

   

2. Damage Blend 노드를 더블클릭하여 블루프린트 내의 고유 탭에서 엽니다.

3. 이 탭에서 + 트랙(+ Track) > Float 트랙 추가(Add Float Track)를 클릭하여 타임라인에 새 트랙을 추가합니다.

   

4. 트랙 이름을 Blend로 짓습니다. 이 트랙 라벨은 Damage Blend Timeline 노드의 출력 핀으로도 표시됩니다.

   

5. + 트랙 버튼 옆에서 길이(Length)가 5초로 설정되어 있는지 검증합니다.

6. Blend 트랙에서 우클릭하고 CurveFloat_0에 키 추가(Add key to CurveFloat_0)를 선택합니다. 키를 하나 더 추가하여 총 두 개의 키를 만듭니다.

7. 첫 번째 키를 클릭하여 선택하고 값을 시간(Time) = 0 및 값 = 0으로 변경합니다.

   

8. 두 번째 키를 클릭하고 값을 시간 = 5 및 값 = 1로 변경합니다.

9. 첫 번째 키를 우클릭하고 자동(Auto)을 선택합니다. 이렇게 하면 블렌딩이 선형 블렌딩에서 0과 1 사이의 부드러운 블렌딩으로 변경됩니다.

   

10. 블루프린트 탭을 사용하여 Damage Blend 타임라인 노드가 있는 이벤트 그래프로 돌아갑니다.

11. Sequence 노드에서 Then 1 실행 핀을 해당 Damage Blend 노드의 중지(Stop) 핀에 연결합니다.

    

12. 딜레이 후 Branch 노드의 True에서 드래그하여 Damage Blend 노드의 Play from Start 입력에 연결합니다.

    

이제 이 Timeline 노드는 5초 동안 0~1로 변화하는 값을 출력합니다. Retriggerable Delay가 완료되면 Timeline이 재생됩니다. 타임라인 트랙 로직이 완료되면 실행은 Then 1 경로로 이어지며 타임라인 업데이트가 중지됩니다.

플레이어 체력 복원 및 포스트 프로세스 머티리얼 제거

이제 타임라인이 구성되었으므로, 5초 트랙을 사용하여 플레이어의 Health 변수를 처음의 최댓값(가득 찬 상태)으로 블렌딩하고, 머티리얼의 Damage Amount를 다시 0으로 낮추는 로직을 빌드합니다.

타임라인을 사용하여 플레이어 체력을 점진적으로 회복시키려면 다음 단계를 따릅니다.

1. Damage Blend Timeline 노드 뒤에 Lerp 노드를 생성합니다. Timeline의 Blend 출력 핀을 Lerp 노드의 알파 입력에 연결합니다.

2. Lerp 노드의 B 입력에서 드래그하여 MaxHealth 레퍼런스를 추가합니다.

3. 변수 목록에서 Health 변수를 드래그하여 Lerp 노드의 A 입력에 연결합니다.

4. Lerp 노드의 반환 값 핀에서 드래그하고 Set Health 노드(노드 액션 목록의 변수 > 디폴트(Default) 아래)를 추가합니다.

5. 타임라인의 업데이트(Update) 핀에서 드래그하여 Set Health 노드의 실행 핀에 연결합니다.

   

   이제 Lerp 노드는 플레이어의 현재 Health 값에서 게임 시작 시의 최대 체력(이 경우 100)까지를 5초(Timeline의 길이) 동안 블렌딩합니다.

6. Branch 노드 이전에 생성한 Set Scalar Parameter Value 노드가 있는 이벤트 그래프 부분으로 돌아갑니다. Set Scalar Parameter Value, MID Damage, Lerp, Divide, Health 노드를 드래그하여 선택하고 Ctrl+C를 눌러 복사합니다.

   

7. 이벤트 그래프에서 Damage Blend 타임라인으로 돌아가 Ctrl+V를 눌러 노드를 붙여 넣습니다.

8. Set Health 노드의 실행 핀을 Set Scalar Parameter Value의 실행 핀에 연결합니다.

   

이제 플레이어의 Health 변수가 최댓값으로 복원되면 Damage Amount가 다시 0으로 감소합니다.

이제 그래프가 다음과 비슷한 모습이 됩니다.

HUD에 업데이트된 체력 표시

Health 변수가 100으로 회복되는 동안, 플레이어 UI에는 소수점 두 자리까지 표시됩니다. HUD에서 이러한 비주얼 노이즈를 제거하기 위해 소수 자릿수를 없애고 Health를 인티저로만 표시하는 로직을 추가합니다.

다음은 Truncate를 사용하여 소수 자릿수를 제거했을 때의 차이를 보여주는 예시입니다.

HUD에 표시될 때 플레이어의 Health가 인티저 값으로 표시되도록 하려면 다음 단계를 따릅니다.

1. 생성한 Sequence 노드 이전에 실행되는 Fn Set HP 노드로 이동합니다. Fn Set HP 노드와 해당 입력(HUD 및 Health)을 선택한 다음 Ctrl+C를 눌러 복사합니다.

   

2. 타임라인 로직의 끝에 있는 Set Scalar Parameter Value 노드 뒤에서 Ctrl+V를 눌러 세 개의 노드를 붙여 넣습니다.

3. Set Scalar Parameter Value 노드 및 Fn Set HP 노드의 실행 핀을 연결합니다.

   

4. 공간을 생성하기 위해 Fn Set HP 노드를 오른쪽으로 드래그합니다.

5. Fn Set HP 노드의 New HP 입력과 Health 변수 사이의 와이어를 삭제합니다.

6. Health 변수에서 드래그하여 Truncate 노드를 추가합니다. 이렇게 하면 플로트 값이 인티저로 변환되어 소수 자릿수가 제거됩니다.

7. Truncate 노드에서 드래그하여 Fn Set HP 노드의 New HP 입력에 연결합니다. 언리얼 엔진이 자동으로 Integer-to-Float 변환 노드를 추가합니다.

   

8. 블루프린트를 컴파일하고 저장합니다.

지금까지 추가한 모든 내용이 반영되면, 완성된 블루프린트는 다음과 같은 모습이 되어야 합니다.

최종 이펙트 테스트

이제 게임을 플레이하면서 대미지를 받으면 포스트 프로세스 대미지 이펙트가 나타나며, 더 많은 대미지를 받을수록 이펙트가 더 강해지는 것을 확인할 수 있습니다.

머티리얼 인스턴스로 돌아가 원하는 최종 외형이 나오도록 파라미터 값을 조정할 수 있습니다. 아래 예시에서는 대미지 이펙트가 더욱 강화되어 있습니다.

다음 순서

다음 섹션에서는 낮은 지형에 더 짙은 안개를 추가하고 하늘에 폭풍 구름을 추가하여 레벨의 애트머스페릭 엘리먼트를 강화하는 방법을 배웁니다.

• 

  인바이런먼트 라이팅 기능 조정

  저지대에 더 짙은 포그를 추가하고 하늘에 폭풍 구름을 배치하여 레벨의 애트머스페릭 엘리먼트를 강화하는 방법을 살펴봅니다.