블루프린트와 렌더 타깃으로 하이트 필드 페인터 만들기

블루프린트와 렌더 타깃으로 실시간 하이트 필드 페인터를 만드는 방법입니다.

Windows
MacOS
Linux

HFP_Header_Image.png

다양한 표면을 올리고 내리는 기능이 있으면 재미있고 독특한 게임플레이 요소를 만들 수 있습니다. 여기서는 블루프린트와 렌더 타깃을 사용하여 플레이어가 맞춘 오브젝트 표면을 올리는 Height Field Painter (하이트 필드 페인터)를 만드는 방법을 알아보겠습니다. 그러기 위해서는 먼저 새로운 Game Mode 와 HUD 블루프린트를 만들고 구성하여 사용자가 하이트 필드 페인터 조작이 가능하도록 할 것입니다. 그런 다음 필수 렌더 타깃과 머티리얼을 만들어 구성해 보겠습니다. 마지막으로 모든 조각을 한 데 묶어 블루프린트를 만듭니다. 이 블루프린트가 적용된 오브젝트의 표면은 언리얼 엔진 4 안에서 올릴 수 있게 됩니다.

1 - 프로젝트 구성

시작하기에 앞서, 프로젝트 구성의 일부로 만들어야 하는 애셋이 둘 정도 있습니다.

하이트 필드 페인터에 필요한 액터 생성 및 구성을 시작하기 전, 먼저 Gamemode Override (게임모드 오버라이드) 생성 및 구성을 해줘야 합니다. 다음 부분은 프로젝트에서 그 작업을 하는 방법을 살펴보겠습니다.

Content Examples (콘텐츠 예제) 맵에서 작업을 하는 경우, 이 단계를 건너뛰고 MyGame 게임 모드를 사용하면 됩니다. 이 게임 모드는 Content > Blueprints > MyGame 에서 찾을 수 있습니다.

HFP_PS_00.png

새로운 게임 모드 & HUD 생성

사용자가 어디로 쏘는지 알려주는 조준선을 확인하기 위해서는, 새로운 게임 모드와 HUD 블루프린트를 생성하고 구성해 줘야 합니다. 다음 부분에서는 그 전부를 어떻게 구성해 줘야 하이트 필드 페인터에서 작동되도록 할 수 있는지 알아보겠습니다.

  1. 콘텐츠 브라우저 의 우클릭 메뉴 아래 기본 애셋 생성 부분에서 블루프린트 클래스 옵션을 클릭합니다.

    HFP_BP_Setup_00.png

  2. 부모 클래스 선택 창에서 Game Mode 옵션을 클릭하고, 새로운 게임 모드 이름을 HighFieldPainterGameMode 라 합니다.

    HFP_PS_01.png

  3. 콘텐츠 브라우저에 다시 우클릭하고 기본 애셋 생성 메뉴를 띄운 뒤 블루프린트 클래스 옵션을 선택합니다.

    HFP_BP_Setup_09.png

  4. 부모 클래스 선택 창이 표시되면, 모든 클래스 옵션을 펼치고 검색창에 HUD 라 입력합니다. HUD 옵션을 찾았으면 클릭한 뒤 선택 버튼을 눌러 생성합니다.

    HFP_PS_02.png

  5. 새로 생성된 HUD 블루프린트 이름을 HeightFieldPainterHUD 라 지은 뒤, HeightFieldPainterGameMode 블루프린트를 더블클릭하여 엽니다.

    HFP_PS_04.png

  6. HeightFieldPainterGameMode 의 디테일 패널에서 Classes 섹션 아래 HUD Class 를 방금 만든 HeightFieldPainterHUD 블루프린트로 설정합니다.

    HFP_PS_03.png

  7. 이제 HeightFieldPainterGameMode 블루프린트를 컴파일, 저장 후 콘텐츠 브라우저에서 더블클릭하여 HeightFieldPainterHUD 블루프린트를 엽니다.

    HFP_PS_05.png

  8. HeightFieldPainterHUD 블루프린트 안에서 이벤트 그래프 로 이동하여 다음 블루프린트 코드를 그래프에 복사해 붙여넣습니다.

    Copy Node Graph

    HFP_PS_06.png

    블루프린트를 컴파일하고 저장해야 사용할 수 있다는 점, 잊지 마세요.

    이 블루프린트 코드는 게임이 실행중일 때 플레이어의 화면 정 중앙에 지정된 머티리얼이 그려지도록 HUD 에게 명령을 내립니다. 모두 제대로 구성되었는지 확인하려면, 재생 버튼을 눌러 게임을 실행시킵니다. (다음 그림처럼) 화면 중앙에 조준선이 보일 것입니다.

    HFP_PS_07.png

화면에 조준선이 보이지 않는 경우, Draw Material 노드의 Material 입력에서 머티리얼 입력에 입력된 것이 있는지 확인하세요.

HFP_PS_08.png

레벨과 HUD 가 생성되었으니, 다음 섹션에서는 어떤 애셋을 생성할지, 그리고 그 구성 방법은 어떻게 되는지 살펴보겠습니다.

2 - 필수 애셋 생성 & 구성

하이트 필드 페인터 블루프린트를 만들기 전, UE4 콘텐츠 브라주어 안에서 다음과 같은 애셋 유형을 만들고 구성해줘야 합니다. 여기서는 각 애셋을 어떻게 구성해야 하는지와 아울러 유의해야 하는 특수 프로퍼티에 대해서 살펴보도록 하겠습니다.

참고로 다음 내용은 어떤 UE4 프로젝트 유형에 국한된 것이 아닙니다. UE4 버전 4.13 이상을 사용하는 어떤 프로젝트에서도 따라할 수 있는 내용입니다.

  • 렌더 타깃

  • 머티리얼

  • 블루프린트 (Actor 기반)

렌더 타깃 생성 & 구성

  1. 콘텐츠 브라우저 안에 우클릭하여 표시되는 메뉴에서 고급 애셋 생성 > 머티리얼 & 텍스처 > 렌더 타깃 옵션을 선택합니다.

    HFP_RT_Creation_00.png

  2. 새로 생성된 렌더 타깃 이름을 RT_Height_Filed_Painter 라 한 뒤 모두 저장 버튼을 눌러 저장합니다.

    HFP_RT_Creation_01.png

머티리얼 생성 & 구성

  1. 콘텐츠 브라우저 안에서 우클릭한 뒤 기본 애셋 생성 목록에서 머티리얼 옵션을 선택하여 새 머티리얼을 만들고, 이름을 MAT_HeighfieldPainter 라 합니다.

    HFP_Material_Creation_00.png

  2. 콘텐츠 브라우저에서 MAT_HeightfieldPainter 머티리얼을 선택한 뒤 우클릭합니다. 표시되는 메뉴에서 일반 섹션 아래 복제 옵션을 클릭하여 머티리얼 사본을 만들고, 이름을 MAT_ForceSplat 이라 합니다.

    HFP_Material_Creation_01.png

  3. MAT_HeighfieldPainter 머티리얼을 더블클릭하여 연 뒤 메인 머티리얼 노드 를 선택합니다. 디테일 패널에서 머티리얼 섹션 아래 파라미터를 다음과 같이 구성합니다.

    • Shading Model: Unlit

    HFP_Material_Creation_04.png

  4. MAT_HeighfieldPainter 머티리얼은 World Position Offset 입력을 사용하여 그것이 적용된 스태틱 메시 버텍스의 Z 높이를 올립니다. 아래 그림에 마우스 커서를 올린 뒤 Copy Expression Graph (표현식 그래프 복사) 옵션을 선택, 제공된 머티리얼 코드를 MAT_HeighfieldPainter 안에 복사 붙여넣기 하면 머티리얼 안에 복사할 수 있습니다.

    Copy Expression Graph

    HFP_Material_Creation_05.png

    머티리얼을 적용하고 저장해야 사용할 수 있다는 점, 잊지 마세요.

  5. MAT_ForceSplat 머티리얼을 연 뒤 메인 머티리얼 노드 를 선택합니다. 디테일 패널에서 Material (머티리얼) 섹션 아래 다음과 같이 파라미터를 구성합니다.

    • Blend Mode: Additive

    • Shading Model: Unlit

    • Allow Negative Emissive Color: (음수 이미시브 컬러 허용) 체크

    HFP_Material_Creation_02.png

  6. MAT_ForceSplat 머티리얼이 하이트 필드 표면을 올리기 위한 페인트 브러시 역할을 할 것이라, 그 크기와 강도 제어를 위한 옵션이 몇 가지 있어야 할 것입니다. 아래 그림에 마우스 커서를 올린 뒤 Copy Expression Graph (표현식 그래프 복사) 옵션을 선택, 제공된 머티리얼 코드를 MAT_ForceSplat 안에 복사 붙여넣기 하면 머티리얼 안에 복사할 수 있습니다.

    Copy Expression Graph

    HFP_Material_Creation_03.png

    머티리얼을 적용하고 저장해야 사용할 수 있다는 점, 잊지 마세요.

이제 필수 애셋 구성이 완료되었으니, 다음에는 하이트 맵 페인터 제작을 위해 모든 애셋을 한 데 묶어주는 블루프린트를 만드는 법을 살펴보겠습니다.

3 - 블루프린트 구성

렌더 타겟과 필수 머티리얼 구성을 마쳤으면, 그 전부를 블루프린트로 모을 차례입니다. 여기서는 하이트 필드 페인터 블루프린트의 다양한 부분을 구성하는 법에 대해 다루겠습니다.

블루프린트 생성 & 변수 구성

  1. 콘텐츠 브라우저의 우클릭 메뉴에서 기본 애셋 생성 부분의 블루프린트 클래스 옵션을 선택합니다.

    HFP_BP_Setup_00.png

  2. 부모 클래스 선택 창에서 Actor 를 선택하고 이름을 HeightFieldPainter 라 합니다.

    HFP_BP_Setup_01.png

  3. HeightFieldPainter 블루프린트를 더블클릭하여 열고 이벤트 그래프 탭을 선택합니다. 이벤트 그래프가 열리면, 다음과 같은 변수를 추가합니다.

    HFP_BP_Setup_02.png

    변수 이름

    변수 유형

    기본 값

    HeightfieldRT

    Texture Render Target 2D

    없음

    PainterMaterialInstance

    Material Instance Dynamic

    없음

    MouseDown

    Bool

    없음

    ForceSplatMID

    Material Instance Dynamic

    없음

    InteractionDistance

    Float

    1000.0

    BrushSize

    Float

    0.04

    BrushStrength

    Float

    1.0

컴포넌트 구성

컴포넌트 탭에서 컴포넌트 추가 버튼을 누르고 Static Mesh (스태틱 메시) 컴포넌트를 블루프린트에 추가합니다. 스태틱 메시 컴포넌트가 추가되고나면, 스태틱 메시 컴포넌트를 선택하고 다음과 같이 옵션을 구성해 줍니다.

HFP_BP_Setup_06.png

섹션

프로퍼티

필수 애셋

트랜스폼

모빌리티

없음

무버블

스태틱 메시

스태틱 메시

SM_Plane1000_512

없음

머티리얼

머티리얼

HeightfieldPainterMaterial

없음

콜리전

Generate Overlap Events

없음

체크됨

콜리전

콜리전 프리셋

없음

OverlapOnlyPawn

컨스트럭션 스크립트 구성

컨스트럭션 스크립트는 2D 렌더 타겟 생성 및 할당과 아울러 필수 다이내믹 머티리얼 인스턴스를 생성 및 할당하는 데도 사용됩니다. 이미 없는 경우, 컨스트럭션 스크립트 탭을 클릭하고 다음 코드를 블루프린트 컨스트럭션 스크립트에 복사해 넣으면 됩니다.

Copy Node Graph

HFP_BP_Setup_03.png

Trace from Camera 함수 구성

이 함수 구현 방법은 두 가지 있습니다. 첫 번째는 주로 평면이나 기타 평평한 표면에 약간의 수학 및 작업이 필요합니다. 두 번째는 Find Collisoin UV 노드를 사용하는 것으로, 메모리는 더욱 많이 사용하지만 모양에 상관 없이 어떤 스태틱 메시 컴포넌트 에서도 작업 가능할 것입니다 (UV 이음새는 여전히 부작용을 유발합니다). 구현 메서드는 아래에서 선택할 수 있습니다.

구현 방법 선택

방법 1

방법 2

Trace from Camera (카메라에서 트레이스) 함수는 하이트 값을 올려야 하는 스태틱 메시상의 위치를 결정하는 데 사용될 것입니다. 그 위치는 플레이어 카메라 중앙에서 월드로 광선을 쏘아 알아냅니다. 그 광선이 스태틱 메시와 교차되면, 그 교차 위치를 올리게 됩니다. Trace from Camera 함수 구성 방법은 다음과 같습니다.

  1. 함수 탭의 작은 (흰색) 더하기 부호를 클릭하여 새 함수를 만들고 이름을 TraceFromCamera 라 합니다.

    HFP_BP_Setup_04.png

  2. TraceFromCamera 함수를 열고, 다음 블루프린트 코드를 블루프린트에 복사합니다. 아래 그림에 커서를 올린 뒤 Copy Expression Graph (표현식 그래프 복사) 옵션을 선택한 뒤, 코드를 선택하고 복사, TraceFromCamera 함수에 붙여넣으면 됩니다.

    Copy Node Graph

    HFP_BP_Setup_05.png

    블루프린트를 컴파일하고 저장해야 사용할 수 있다는 점, 잊지 마세요.

이벤트 그래프 구성

모든 필수 부품 생성 및 구성이 완료되었으니, 이벤트 그래프에서 그 모든 부분을 서로 연결할 차례입니다. 완성된 블루프린트 코드를 블루프린트에 복사할 수 있는데, 아래 그림에 커서를 올리고 Copy Node Graph (노드 그래프 복사) 옵션을 선택한 뒤, 제공된 블루프린트 코드를 하이트 필드 페인터 블루프린트에 복사해 넣으면 됩니다.

Copy Node Graph

HFP_BP_Setup_07.png

블루프린트 코드를 복사하여 붙여넣을 때, Event Begin Play 노드가 그래프에 추가되지 않습니다. Event Begin Play 노드를 추가하고 Enable Input 입력에 연결해 주시기 바랍니다.

HFP_BP_Setup_08.png

필수 블루프린트 구성이 완료되었으니, 다음에는 UE4 안에서 하이트 맵 페인터를 사용하는 법을 알아보겠습니다.

이 메서드 사용을 위해서는 에디터에서 Support UV from Hit Result (히트 결과에서 UV 지원) 기능을 켜야 합니다. 자세한 방법 관련 정보는 트레이스에서 UV 좌표 구하기 문서를 참고하세요.

  1. 함수 탭의 작은 (흰색) 더하기 부호를 클릭하여 새 함수를 만들고 이름을 TraceFromCamera 라 합니다.

    HFP_BP_Setup_04.png

  2. TraceFromCamera 함수를 열고 다음 블루프린트 코드를 자신의 블루프린트에 복사합니다. 아래 그림에 커서를 울론 뒤 Copy Expression Graph (표현식 그래프 복사) 옵션을 선택하고, 코드를 선택한 뒤 복사 후 TraceFromCamera 함수에 붙여넣으면 됩니다.

    Copy Node Graph

    HFP_BP_Setup_01.png

    블루프린트를 컴파일하고 저장해야 사용할 수 있다는 점 잊지 마세요.

이벤트 그래프 구성

모든 필수 부분 생성 및 구성이 완료되었으니, 여러가지 다양한 부분을 이벤트 그래프에 모아 놓고 연결해 줄 차례입니다. 완성된 블루프린트 코드를 블루프린트에 복사해 넣는 법은, 아래 그림에 커서를 올리고 Copy Node Graph (노드 그래프 복사) 옵션을 클릭한 뒤, 제공된 블루프린트 코드를 자신의 하이트 필드 페인터 블루프린트에 복사해 넣으면 됩니다.

Copy Node Graph

HFP_BP_Setup_02.png

블루프린트를 복사 붙여넣기할 때, Event Begin Play 노드는 그래프에 추가되지 않습니다. Event Begin Play 노드를 추가하고 Enable Input 입력에 연결했는지 확인하세요.

HFP_BP_Setup_08.png

이제 필수 블루프린트 구성이 완료되었으니, 다음에는 UE4 의 하이트 맵 페인터 사용법을 알아보겠습니다.

4 - 최종 결과

하이트 필드 페인터 블루프린트의 필수적인 부분 구성이 전부 완료되었으니, 실제로 하이트 필드 페인터를 사용해 볼 차례입니다. 여기서는 UE4 프로젝트에서 하이트 필드 페인터를 사용하는 법에 대해 다루겠습니다.

하이트 필드 페인터 블루프린트 사용법

  1. 콘텐츠 브라우저에서 하이트 필드 페인터 블루프린트를 찾아 레벨에 끌어 놓고, 레벨에 맞게끔 위치를 조정합니다.

    HFP_BP_Use_00.png

  2. 메인 툴바의 플레이 버튼을 누른 다음 레벨에 배치된 하이트 필드 페인터 블루프린트의 앞(이나 매우 가까이)에 오도록 플레이어를 이동시킵니다.

    HFP_BP_Use_01.png

최종 결과

조준선이 원하는 위치에 오도록 표면 위치의 높이를 올리려는 경우, 왼쪽 마우스 버튼을 누르고 있으면 스태틱 메시의 높이가 올라갑니다. 왼쪽 마우스 버튼을 계속 누른 상태에서 마우스를 움직이면, 스태틱 메시의 높이가 계속해서 올라갑니다. 모든 것이 제대로 구성되었으면, 다음 비디오와 같은 결과를 확인할 수 있을 것입니다.

블루프린트 & 렌더 타깃을 사용하여 스태틱 메시 버텍스를 조작하는 한 가지 방법일 뿐이지만, 창의적 가능성은 거의 무한합니다. 플레이어와 배경 모두 변형시킬 수 있는 충격 이펙트를 만드는 것에서부터, 플레이어가 플레이하는 월드의 실제 이펙트를 만드는 것까지, 하이트 필드 페인터 블루프린트는 여러가지 다양한 게임플레이 역할과 요건에 맞도록 적응시킬 수 있습니다.

Select Skin
Light
Dark

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼