나이아가라 플립북 베이커 퀵스타트 가이드

언리얼 엔진의 나이아가라 플립북 생성을 위한 퀵스타트 가이드입니다.

이 페이지는 언리얼 엔진과 포트나이트 언리얼 에디터(UEFN)에서 공통으로 제공되는 기능에 대해 설명합니다.

언리얼 엔진을 기반으로 작성되었기 때문에 일부 설명과 스크린샷이 실제 UEFN과 다를 수 있습니다.

기본 UEFN 문서로 돌아가려면 여기 를 클릭하세요.

나이아가라 시스템 은 시각적으로 뛰어난 이펙트를 생성합니다. 하지만 시뮬레이션 디자인 시 시각적인 룩과 퍼포먼스의 균형이 중요합니다. 때로는 훌륭한 이펙트를 생성할 수도 있지만 타깃 디바이스에서 사용하기에는 너무 많은 메모리를 차지할 수도 있기 때문입니다.

이에 대한 해결책 중 하나는 나이아가라 시뮬레이션을 플립북(flipbook) 에 굽는 것입니다. 이렇게 하면 모든 머티리얼에 로딩할 수 있는 타일 이미지를 생성할 수 있습니다.

예를 들어 3D 플루이드 이펙트를 생성하려고 하지만 타깃 플랫폼에서 실시간으로 실행할 수 없는 경우를 생각해볼 수 있습니다. 이 경우 3D 플루이드 이펙트를 생성한 다음 베이커(Baker) 를 사용하여 플립북을 굽고 2D 스프라이트 이미터에 적용할 수 있습니다. 이렇게 하면 게임 또는 배경에서 더 멀리 있는 중요하지 않은 이펙트에 대해 퍼포먼스의 효율성을 크게 높일 수 있습니다.

목표

이 튜토리얼에서는 나이아가라 베이커를 사용하여 시뮬레이션에서 플립북을 익스포트 합니다.

학습 목표

  • 플립북에 대한 캡처 구성

  • 캡처 수행

  • 새로운 이미터에 플립북 연결

캡처 구성

  1. 나이아가라 에디터(Niagara Editor) 에서 기존 나이아가라 시스템을 엽니다. 여기서는 그리드 3D 가스 컬러 연기(Grid 3D Gas Colored Smoke) 가 예시로 사용되었지만 모든 나이아가라 시스템을 사용할 수 있습니다. 그리드 3D 가스 컬러 연기를 사용하기 위해 콘텐츠 드로어(Content Drawer) 에서 우클릭한 후 기본 에셋 생성(Create Basic Asset) > 나이아가라 시스템(Niagara System) 을 선택합니다.

    Creating a new Niagara system.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  2. 나이아가라 플루이드 템플릿에서 플립북을 생성합니다. 이러한 템플릿은 나이아가라 플루이드 플러그인이 활성화된 경우 사용할 수 있습니다. 하지만 플립북은 모든 나이아가라 시스템에서 생성할 수 있습니다. 템플릿 또는 비헤이비어 예시에서 새 시스템 생성(New system from a template or behavior example) 을 선택한 후 그리드 3D 가스 컬러 연기 를 선택합니다.

    Creating a Grid 3D Gas Colored Smoke system.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  3. 메인 툴바 에 베이커 라는 새로운 버튼이 있습니다. 베이커 탭 열기(Open Baker Tab) 를 선택하여 베이커 패널 을 표시합니다.

    The Baker button

    이미지를 클릭하면 전체 크기로 표시됩니다.

유저 인터페이스 탐색하기

베이커 패널 유저 인터페이스는 다음과 같은 부분으로 구성되어 있습니다.

The Baker panel user interface

이미지를 클릭하면 전체 크기로 표시됩니다.

  1. 굽기(Bake) 버튼

  2. 나이아가라 프리뷰

  3. 플립북 프리뷰

  4. 재생 툴바

  5. 플립북 옵션

나이아가라 프리뷰 프레이밍

시작하려면 나이아가라 프리뷰 창 내에서 시뮬레이션을 프레이밍해야 합니다. 시뮬레이션을 일련의 평평한 2D 프레임으로 굽기 때문에 원하는 각도와 크기로 구성했는지 확인합니다.

프레이밍 조정을 위해 나이아가라 프리뷰 창에서 직접 클릭 및 드래그할 수 있습니다.

  • 선회하려면 좌클릭하고 드래그합니다.

  • 패닝하려면 가운데 버튼을 클릭하고 드래그합니다.

  • 줌하려면 우클릭하고 드래그합니다.

  • 시스템 원점에서 프레임을 중앙에 위치시키려면 F 를 클릭합니다.

카메라(Camera) 세팅에서 값을 숫자로 입력할 수도 있습니다. 원하는 대로 카메라 뷰포트 모드(Camera Viewport Mode) 를 선택한 후 이에 해당하는 필드에 있는 숫자 값을 편집합니다.

The Camera Viewport Mode and Perspective

이미지를 클릭하면 전체 크기로 표시됩니다.

타이밍 조정

어떤 것이 구워지는지 프리뷰하기 위해 재생 툴바 를 사용하여 시뮬레이션에서 플레이, 일시정지 및 한 단계씩 앞뒤로 돌아갑니다.

The Playback toolbar

이미지를 클릭하면 전체 크기로 표시됩니다.

타임라인(Timeline) 세팅에서 타이밍을 조정할 수 있으므로 시뮬레이션의 한 부분만 굽습니다. 예를 들어 시작(초)(Start Seconds) 를 조정하여 시뮬레이션 재생을 통해 플립북 일부를 시작하고, 경과시간(초)(Duration Seconds) 를 조정하여 종료 시간을 변경합니다.

초당 프레임(Frames Per Second) 을 설정하여 컴포넌트의 틱 속도를 조정합니다. 보통 이 값은 조정할 필요가 없습니다. 이 옵션은 제작하는 콘텐츠와 동일한 값으로 설정합니다. 나이아가라 시스템 에디터(Niagara System Editor)는 30fps가 디폴트입니다. 이 값을 너무 낮게 설정하면 동일한 플립북 프레임이 여러 번 렌더링 될 수 있습니다. 예를 들어 캡처된 30프레임으로 1초 동안 플립북을 렌더링하고 '초당 프레임'을 20으로 설정한 경우 30이 아닌 20의 고유 프레임만 녹화됩니다.

텍스처 크기 조정

플립북을 굽는 방식에 따라 각 타일이 플립북의 프레임을 나타내는 타일 이미지를 익스포트합니다. 텍스처에 매핑하려는 타일 수와 총 텍스처 크기를 함께 설정해야 합니다. 텍스처는 X축에 8개 타일, Y축에 8개 타일, 그리고 1024 x 1024 픽셀의 총 텍스처 크기가 디폴트로 구성됩니다.

Flipbook texture tiling

이미지를 클릭하면 전체 크기로 표시됩니다.

즉, 각 타일은 128 x 128 픽셀의 크기를 가집니다. 텍스처(Texture) 세팅에서 이 값을 조정할 수 있습니다.

Setting the tiling frames and texture size

이미지를 클릭하면 전체 크기로 표시됩니다.

타일 수를 설정하려면 치수당 프레임(Frames Per Dimension) 을 조정합니다. 전반적인 텍스처 크기를 조정하려면 텍스처 크기(Texture Size) 를 변경합니다.

베이커는 최종 해상도에 맞추기 위해 타일의 스케일을 조절하지 않습니다. 따라서 원하는 결과를 얻기 위해서는 전반적인 텍스처 크기에 맞춰 타일의 수를 균등하게 나눠야 합니다.

예를 들어 '치수당 프레임'을 10 x 10으로 설정했지만 '텍스처 크기'를 1024 x 1024로 유지하면 시스템은 10개의 타일을 1024로 매핑하려고 합니다. 하지만 결과적으로 각 타일의 너비는 102.4 픽셀이 되고 시스템은 소숫점 이하의 픽셀은 고려하지 않습니다. 따라서 시스템은 각 타일을 102 크기로 매핑하고 해당 텍스처의 우측 및 하단에 4픽셀을 추가로 패딩하여 마무리하게 됩니다.

이에 따라 서브 UV 매핑이 약간 떨어지게 되므로 아틀라스가 재생될 때 떨림 현상이 발생할 수 있습니다. 원하는 결과를 얻기 위해서는 '텍스처 크기'를 2의 거듭제곱으로 설정하고 '치수당 프레임'을 해당 텍스처 크기로 균등하게 나누는 숫자로 설정해야 합니다.

추가적인 텍스처 프로퍼티 설정

소스 바인딩(Source Binding) 이 없음(None) 으로 설정된 경우 기본적으로 베이커는 SceneColorHDR 값을 출력합니다. 이 경우 보통 원하는 결과를 얻을 수 있습니다. 하지만 사용 가능한 모든 GBuffer와 파티클 어트리뷰트를 사용할 수 있으며 그중에서 원하는 것을 '소스 바인딩' 드롭다운 메뉴에서 선택할 수 있습니다.

Initial Ssource Binding and Generated Texture settings

이미지를 클릭하면 전체 크기로 표시됩니다.

첫 번째 플립북을 생성하기 전에 생성된 텍스처(Generated Texture) 는 '없음'으로 설정됩니다. 첫 번째 캡처를 수행한 후에는 생성한 새로운 텍스처가 이를 대체합니다.

캡처 수행

적절한 프레이밍 및 타이밍을 사용하여 원하는 방식으로 보이도록 텍스처를 구성한 후에는 캡처를 수행할 수 있습니다.

  1. 나이아가라 프리뷰 창에서 굽기 를 클릭합니다.

    Click Bake in the Niagara Preview window.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  2. 이제 시스템이 플립북을 렌더링할 때 진행률 표시줄이 나타납니다. 완료 시 대화창이 열리고 텍스처 파일의 이름을 지을 수 있습니다.

    Name your texture file

    이미지를 클릭하면 전체 크기로 표시됩니다.

  3. 이제 렌더링 되었으므로 새 텍스처가 '베이커' 창의 '텍스처' 세팅에서 활성 텍스처로 대체됩니다.

    The generated texture in the Baker window Texture settings.

    이미지를 클릭하면 전체 크기로 표시됩니다.

    생성된 텍스처 에서 선택된 이 텍스처를 사용하여 다른 캡처를 생성하는 경우 이 텍스처는 덮어써집니다.

  4. 새로운 텍스처 베리에이션을 생성하려는 경우에는 생성된 텍스처 드롭다운을 클릭한 후 지우기(Clear) 를 선택합니다. 그런 다음 모든 세팅을 조정하고 새로운 텍스처를 생성할 수 있습니다.

    Clear your generated texture before creating a new one.

    이미지를 클릭하면 전체 크기로 표시됩니다.

이제 텍스처를 익스포트하였으므로 텍스처를 새로운 이미터에 추가할 수 있습니다. 플립북 텍스처가 어떻게 보이는지 최종 프리뷰를 볼 수도 있습니다.

Comparing the baked flipbook with the live Niagara system.

이미터에서 플립북 텍스처 사용하기

이미터에서 플립북을 사용하려면 스프라이트 렌더러(Sprite Renderer) 를 사용해야 합니다.

  1. 이를 구성하기 위해 콘텐츠 드로어 에서 우클릭하고 새 나이아가라 시스템 을 생성합니다.

  2. 선택된 이미터에서 새 시스템 생성(New system from selected emitter(s)) 을 선택한 다음 단순 스프라이트 버스트(Simple Sprite Burst) 를 선택합니다.

  3. 더하기 기호(+) 를 클릭하여 이미터를 추가한 다음 완료(Finish) 를 클릭합니다.

Selecting a simple sprite burst emitter system

이미지를 클릭하면 전체 크기로 표시됩니다.

서브 UV 애니메이션 모듈 추가하기

플립북에 추가하기 위해서는 '파티클 업데이트(Particle Update)' 그룹에 새로운 모듈을 추가하고 스프라이트 렌더러에서 일부 파라미터를 조정해야 합니다.

  1. 먼저, 파티클 업데이트 옆에 있는 더하기 기호(+) 를 클릭하고 서브 UV 애니메이션(Sub UV Animation) 을 선택합니다. 이렇게 하면 해당 모듈이 스택에 추가됩니다.

    Select Sub UV animation

    이미지를 클릭하면 전체 크기로 표시됩니다.

  2. 모듈 프로퍼티의 시작 프레임(Start Frame) 과 끝 프레임(End Frame) 을 조정하여 애니메이션의 프레임 수를 일치시킵니다. 여기서는 8 x 8 프레임으로 총 64 프레임을 예시로 들고 있습니다. 프레임이 프레임 0으로 시작하기 때문에 세팅을 0 및 63으로 유지합니다.

    Set the start and end frames.

    이미지를 클릭하면 전체 크기로 표시됩니다.

스프라이트 렌더러에서 세팅 조정하기

  1. 스프라이트 렌더러 를 선택하여 프로퍼티를 조정합니다. 서브 UV(Sub UV) 선택에서 서브 이미지 크기(Sub Image Size) 필드에 있는 그리드의 타일 수를 지정합니다. 여기서는 예시로 8 x 8을 사용합니다.

    Specify the number of tiles for the Sprite Renderer.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  2. 이제 새 머티리얼을 생성하여 서브 UV 텍스처에 연결하고 스프라이트 렌더러에 추가해야 합니다. 머티리얼(Material) 옆에 있는 드롭다운 메뉴를 클릭하고 새 에셋 생성(Create New Asset) > 머티리얼 을 선택합니다.

    Creating a new Material for your Sprite Renderer.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  3. 대화창이 나타납니다. 머티리얼의 이름을 지어주고 저장할 위치를 선택합니다.

    Name and save your Material.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  4. 콘텐츠 브라우저(Content Browser) 에서 머티리얼을 더블클릭하여 머티리얼 에디터(Material Editor) 에서 엽니다. 디테일(Details) 패널에서 블렌드 모드(Blend Mode) 를 반투명(Translucent) 으로 설정합니다.

    Select Blend Mode Translucent in the Material editor.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  5. 머티리얼 에디터 에서 우클릭하고 ‘texture sample'을 검색하여 TextureSample 노드를 추가합니다.

    Search for and select the Texture Sample node.

    이미지를 클릭하면 전체 크기로 표시됩니다.

  6. TextureSample 노드를 선택합니다. 디테일 패널에서 플립북 베이커에서 저장한 텍스처로 텍스처 를 설정합니다.

    Set the Texture property to your saved texture

    이미지를 클릭하면 전체 크기로 표시됩니다.

    기본적으로 컬러 채널은 블랙이 미리 곱해집니다. 스프라이트 주변을 블랙으로 하고 싶지 않은 경우 'Divide' 노드를 사용하여 RGB 채널에서 블랙을 제거할 수 있습니다.

  7. 우클릭하여 Divide 노드를 추가합니다.

  8. TextureSample 노드의 RGB 값을 Divide 노드의 A 핀에 연결하고 TextureSample 값의 알파 A 를 Divide 노드의 B 핀으로 연결합니다.

  9. Divide 노드의 출력을 이미시브 컬러(Emissive Color) 로 연결합니다.

  10. 마지막으로 TextureSample 의 알파 A 값을 머티리얼의 오파시티(Opacity) 로 연결합니다.

    Connecting the Blueprint nodes for the Texture Sample.

    이미지를 클릭하면 전체 크기로 표시됩니다.

최종 결과

이제 머티리얼이 스프라이트 렌더러에서 적절하게 설정되었으므로 나이아가라 에디터에서 나이아가라 시스템을 엽니다. 이제 프리뷰 창에서 플레이 중인 렌더링된 플립북을 볼 수 있습니다.

The flipbook preview in the Niagara Editor.

언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.
설문조사에 참여해 주세요
취소