플립북 텍스처: Unity, Godot, VRChat에서 스프라이트를 애니메이션하는 방법

플립북 텍스처는 셰이더가 하나의 표면에서 프레임 단위로 재생하는 스프라이트 시트입니다. 리그도 타임라인도 없습니다. 시트가 고정 그리드 안에 모든 프레임을 담고 있고, 머티리얼이 일정한 속도로 그리드 위를 지나는 작은 창을 이동시킵니다. 8 x 8 시트에는 64프레임이 들어 있으며, 초당 12프레임이면 약 5.3초에 한 번 반복됩니다. 메시는 전혀 바뀌지 않고, 텍스처를 다시 업로드하지도 않으며, 전체 애니메이션 비용은 텍스처 조회 한 번뿐입니다.

이 페이지에서는 플립북 셰이더에 필요한 네 가지 수와 프레임 인덱스가 UV 좌표에 매핑되는 방식, Unity에서 플립북 텍스처를 구동하는 두 가지 방법, VRChat 아바타에서 Poiyomi 플립북을 설정하는 방법, Godot와 Phaser의 동등한 구현, GIF 또는 글로 쓴 설명에서 직접 시트를 만드는 방법을 다룹니다.

빠른 답변

플립북 텍스처는 셰이더 애니메이션으로 사용되는 스프라이트 시트이며, 시간에 따라 행과 열로 인덱싱됩니다. 시트는 하나의 텍스처 슬롯에 들어가고, 각 셰이더 평가는 경과 시간과 프레임 레이트로 프레임 인덱스를 계산한 뒤 그 인덱스를 열과 행으로 축소하고, 표면 UV를 해당 단일 셀로 리매핑합니다. Frame = floor(time * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). 6 x 6 시트를 10 FPS로 재생하면 36프레임을 3.6초에 순환하며, 전부 GPU에서 처리되고 프레임별 업로드나 드로우 콜 변경이 없습니다.

플립북 텍스처의 작동 방식

네 가지 수가 애니메이션을 정의합니다. Columns와 Rows는 시트 레이아웃을 설명합니다. Frame count는 일반적으로 columns x rows이며, 인덱스가 감기는 기준값입니다. Frame rate는 인덱스가 진행되는 속도입니다. 나머지 — 필터링, wrap mode, UV inset — 는 샘플러가 현재 셀 밖을 읽지 않도록 하기 위해 존재합니다.

인덱스 계산은 짧고, 적어 둘 가치가 있습니다. 경과 시간 t가 주어지면 frame = floor(t * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns)입니다. 그러면 UV 창은 tiling = (1 / columns, 1 / rows), offset = (column / columns, row / rows)입니다. 수직 방향이 사람들이 자주 헷갈리는 부분입니다. 대부분의 시트 제작 도구는 이미지 맨 위에 행 0을 쓰지만, Unity와 Godot의 UV 원점은 왼쪽 아래에 있습니다. Unity에서 top-row-first 시트를 쓸 때 offset.y는 1 - (row + 1) / rows가 됩니다. 그렇지 않으면 행이 뒤집혀 재생되어 애니메이션의 첫 프레임이 시트의 마지막 행이 됩니다.

필터링이 결과의 깔끔함을 좌우합니다. 시트의 wrap mode를 Clamp로 설정하십시오. Repeat에서는 텍스처의 오른쪽 가장자리에서 샘플링할 때 왼쪽 가장자리를 읽으므로, 프레임 0의 픽셀 열이 각 행의 마지막 프레임 안에 나타납니다. 가장자리가 선명한 픽셀 아트에는 밉맵을 끄십시오. 밉 체인이 인접 셀을 평균화하기 때문에 표면이 몇 미터만 멀어져도 애니메이션이 뭉개집니다. 대상 엔진이나 셰이더가 밉맵을 강제로 켜야 한다면, 모든 셀 주위에 1~2픽셀의 투명 여백을 두거나 UV 창을 네 면 모두에서 하프 텍셀만큼 안쪽으로 넣으십시오.

Unity의 플립북 텍스처

두 가지 경로가 있으며, 서로 다른 방식으로 실패합니다. 첫 번째 경로는 행과 열 인덱스를 자체적으로 소유하고 스스로 애니메이션하는 셰이더입니다. 두 번째 경로는 일반 Lit 또는 Unlit 셰이더가 샘플링을 담당하는 동안 Animation 창에서 머티리얼의 tiling과 offset을 키프레임으로 지정하는 방식입니다. 첫 번째 경로는 게임 시간과 동기화되어야 하는 효과에 더 적합하고, 두 번째 경로는 Animator 상태로 애니메이션을 구동하고 씬의 다른 모든 요소와 함께 타임라인에서 보고 싶을 때 더 적합합니다.

어느 쪽이든 먼저 스프라이트 시트 임포트 설정을 지정하십시오: Wrap Mode Clamp, Mip Maps off, Filter Mode Point, 그리고 픽셀 아트에는 압축을 사용하지 않습니다. 이 세 가지 설정이 셰이더 계산보다 더 많은 플립북 버그를 일으킵니다.

경로 1: 행과 열 인덱스를 사용하는 셰이더

Shader Graph에서 Flipbook 노드는 Columns, Rows, 시간 기반 프레임 인덱스를 받아 리매핑된 UV를 출력합니다. 직접 작성한 셰이더에서는 _Columns, _Rows, _Fps를 프로퍼티로 노출하고 버텍스 또는 프래그먼트 단계에서 셀을 계산합니다. 애니메이션이 오브젝트 간에 동기화되어야 한다면, 각 머티리얼에서 _Time.y를 개별적으로 샘플링하지 말고 스크립트 float에서 프레임 인덱스를 구동하여 같은 오브젝트의 두 플립북이 어긋나지 않게 하십시오.

경로 2: Animation 창으로 tiling과 offset 구동하기

이 경로는 텍스처의 _ST 벡터를 애니메이션합니다. Built-in Standard와 Unlit은 _MainTex_ST를 사용하고, URP Lit과 Unlit은 _BaseMap_ST를 사용합니다. Tiling은 (1, 1 / rows)로 고정되고 offset.y만 바뀝니다. 아래 단계는 이 경로에 적용됩니다.

VRChat용 Poiyomi 플립북

Poiyomi 셰이더의 Flipbook 섹션은 머티리얼 자체에서 UV 창을 시트 위로 스크롤하므로, 하나의 머티리얼 슬롯이 아바타 메시에 애니메이션 스프라이트를 표시할 수 있습니다. Rows, Columns, frame rate를 노출하며, 셰이더 시간에 맡기는 대신 프레임 인덱스를 직접 구동하는 모드도 제공합니다.

그리드보다 단일 행 스트립을 사용하십시오. 스트립은 셰이더가 따라 이동할 축을 하나만 제공하므로 세로 이음새가 완전히 사라집니다. 그리드에서는 각 행 끝에서 UV 창이 다음 행으로 내려가야 하며, 그 경계에서의 필터링, 밉 레벨 또는 하프 텍셀 반올림 오류가 인접 행을 샘플링합니다. 재생 중에 다른 프레임의 얇은 띠로 보입니다. 스트립은 프레임 인덱스도 단순한 곱셈으로 만듭니다. UV에서 프레임 너비는 1 / frameCount이고, offset은 그냥 frame / frameCount입니다. 256 x 256 셀의 8프레임 애니메이션이라면 스트립은 2048 x 256이며 2의 거듭제곱을 유지합니다.

알파는 평면 씬보다 아바타에서 더 중요합니다. 스프라이트에 딱딱한 가장자리가 있으면 Cutout 또는 Opaque를 사용하십시오. Transparent 큐 플립북은 깊이를 쓰지 않으며, 아바타에서는 카메라 각도에 따라 바뀌는 방식으로 몸체 및 서로 간에 정렬됩니다. 가능하면 애니메이션 표면을 이미 아바타에 있는 머티리얼 위에 유지하십시오. 추가 머티리얼 슬롯마다 아바타의 성능 등급에 불리하게 계산됩니다. 프레임 인덱스가 동기화된 파라미터가 있는 Animator 상태에서 구동되면 모든 클라이언트가 같은 프레임을 봅니다. 셰이더 시간에서 계산된 프레임 인덱스는 로컬에서 평가되므로 뷰어마다 루프의 다른 지점에 있을 수 있습니다.

Godot와 Phaser의 플립북

Godot 4에서 2D 경로는 SpriteFrames 리소스를 사용하는 AnimatedSprite2D입니다. 시트를 임포트하고 SpriteFrames를 연 뒤 Hframes와 Vframes를 열 및 행 수로 설정하고, 애니메이션에 프레임을 추가한 다음, 애니메이션 속도를 초당 프레임으로 설정하고 Loop를 켜 두십시오. SpriteFrames는 애니메이션을 프레임 인덱스 목록으로 저장하므로, 그리드 시트와 단일 스트립 모두 별도의 UV 계산 없이 작동합니다.

애니메이션이 하나만 필요하다면 일반 Sprite2D가 더 가볍습니다. Hframes와 Vframes를 한 번 설정한 다음, AnimationPlayer에서 step interpolation으로 정수 frame 프로퍼티를 진행시키십시오. 기본 easing 곡선으로 frame을 트윈하지 마십시오. 값은 정수 인덱스이므로 보간하면 단일 값으로 내림되거나 두 셀 사이에서 깜빡입니다.

Godot에서 3D 표면에 플립북을 적용하려면 Unity 버전과 같은 행 및 열 계산을 사용하는 ShaderMaterial이 가장 짧은 경로입니다: uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows), row는 프레임 인덱스에서 계산합니다. Godot의 UV 원점은 Unity와 마찬가지로 왼쪽 아래이므로, top-row-first 시트에는 동일한 세로 뒤집기가 필요합니다.

Phaser 3에서는 시트를 한 번 로드하고 로드 시점에 분할합니다. frameWidth와 frameHeight가 셀을 정의하고, 프레임은 왼쪽에서 오른쪽, 위에서 아래로 번호가 매겨지며, 애니메이션은 좌표가 아니라 프레임 번호로 식별됩니다. 작성할 셰이더도, 틀릴 행 및 열 계산도 없습니다.

3D에서 스프라이트 시트를 실시간으로 넘겨 보기

이 섹션의 플레이 가능한 씬은 Neta Studio 3D 게임 빌더에서 실행되는 The Cyclops' Island입니다. 화면의 플립북은 위에서 설명한 것과 같은 인덱스→UV 연산이며, GPU의 Three.js 셰이더에서 평가됩니다. 다른 점은 실제 씬의 실제 메시에서 실행되고, 직접 제어하는 카메라와 움직이는 조명이 있다는 것입니다.

이는 들리는 것보다 중요합니다. 평면 Unity 씬의 플립북은 보통 정면에서 보기 때문에 이음새 번짐과 밉 블렌딩을 알아보기 어렵습니다. 애니메이션 표면 주위를 비스듬한 각도로 카메라를 돌리면 문제가 즉시 드러납니다. 프레임 가장자리에 인접 셀의 띠가 보이거나, 마지막 밉 레벨이 두 프레임을 평균 내 흐릿하게 만들거나, 앞에서는 올바르게 보이던 알파 가장자리가 옆에서는 사라지는 식입니다. 브라우저 빌드는 시트를 제작하고 표면에서 확인하는 루프를 빌드 단계 없이 반복할 수 있을 만큼 짧게 만듭니다.

Mini World는 단일 시트를 테스트하기 위한 더 작은 씬입니다. 메시 수가 적고 로드가 더 짧습니다. 아직 시트가 없다면 Agent Sprite Forge가 프레임을 생성하며, 두 씬 모두 같은 플립북 경로를 실행하므로 Mini World에서 올바르게 보이는 시트는 The Cyclops' Island에서도 동일하게 작동합니다.

직접 시트 만들기

사용 가능한 시트로 가는 경로는 세 가지입니다. 기존 GIF를 변환하거나, 그리드를 단일 스트립으로 자르거나, 글로 쓴 설명에서 프레임을 생성하는 것입니다. 세 가지 모두 같은 파일로 끝납니다. 모든 셀 크기가 같고 왼쪽에서 오른쪽, 위에서 아래로 배치된 하나의 PNG이며, 시트 너비는 셀 너비의 깔끔한 배수입니다.

GIF 변환은 숨은 작업이 가장 많은 경로입니다. GIF는 전체 프레임의 연속이 아니기 때문입니다. 프레임은 이전 프레임에 대한 부분 차이인 경우가 많고, 지연 시간은 프레임마다 100분의 1초 단위로 저장됩니다. 플립북 셰이더는 하나의 프레임 레이트만 받으므로, 가변 타이밍은 내보내기 전에 중복 프레임으로 평탄화해야 합니다.

그리드를 스트립으로 자르는 것은 기계적입니다. 필요한 행을 유지하고, 높이를 한 셀로 자르고, 너비는 프레임 수 곱하기 셀 너비로 두십시오. 그리드 시트를 단일 애니메이션으로 사용할 때 적절한 방법입니다. 세로 축과 그에 따른 이음새를 제거하기 때문입니다. 설명에서 생성하는 것이 세 번째 경로입니다. Agent Sprite Forge는 동작과 프레임 수를 받아 고정 셀 크기의 시트를 반환하므로, 한 번에 하나씩 내보낸 프레임을 손으로 맞추는 작업을 없애 줍니다.

그것이 속한 세계로 걸어 들어가기

스프라이트는 서 있을 곳이 없는 캐릭터입니다. 마지막 단계는 다른 곳에서 제공하지 않는 것입니다. 방금 만든 시트를 누군가 걸어 다닐 수 있는 세계에 넣으십시오. 작은 섬, 행성, 비 내리는 거리 모퉁이 같은 곳입니다. 이 사이트의 모든 세계는 하나의 글로 쓴 설명에서 만들어졌고 플레이할 수 있는 페이지로 게시되었습니다.

자주 묻는 질문