GIF를 플립북 텍스처로 — 모든 GIF를 Unity 및 VRChat용 프레임 스트립으로 패킹
나만의 gif to flipbook 만들기
GIF를 Unity, Godot 또는 VRChat용 단일 행 플립북 텍스처로 패킹합니다. 자동 그리드, 바로 사용 가능한 rows/columns 메타데이터, 투명 배경.
GIF는 타임라인입니다. 플립북 텍스처는 같은 타임라인을 하나의 이미지에 패킹한 것으로, 플레이어가 프레임을 탐색하는 대신 셰이더가 인덱스로 순회할 수 있습니다. GIF를 도구에 떨어뜨리면 프레임 수, 크기, 지연을 감지한 다음 머티리얼에 붙여 넣을 수 있는 rows와 columns 메타데이터가 포함된 단일 행 또는 그리드 스트립을 작성합니다.
이 페이지는 gif to flipbook 변환이 Unity, Godot, VRChat용으로 실제로 생성하는 것 — 플립북 셰이더에 필요한 네 개의 숫자, Poiyomi 머티리얼에서 설정할 항목, 프레임 스트립이 그리드보다 나은 경우 — 를 다룹니다. 출력은 투명 배경의 PNG이며, 옆에 rows/columns 개수가 일반 텍스트로 표시됩니다.
GIF 놓기
도구 본문이 첫 화면입니다. 드롭 존은 상단에 있고, 그 아래는 모두 출력입니다. GIF를 그 위로 끌어다 놓으면 도구가 프레임 수, 프레임별 지연, 캔버스 크기, 처리 방법을 읽습니다. 실제 GIF들은 이 네 가지가 모두 제각각이므로, 도구는 아무것도 작성하기 전에 발견한 내용을 보고합니다.
보통 두 가지를 결정해야 합니다. 첫째, 불균일한 프레임 지연: 대부분의 플립북 셰이더는 일정한 FPS로 스텝하므로 지연이 섞인 GIF는 고정 레이트로 리샘플링하거나 가장 느린 공통 프레임 시간으로 내보내야 합니다. 둘째, 처리 방법: 프레임 사이에 변경된 영역만 다시 그리는 GIF는 프레임을 단순히 쌓으면 고스팅이 나타납니다. 도구는 패킹 전에 각 프레임을 전체 캔버스에 합성하므로 부분 다시 그리기가 전체 프레임이 됩니다.
합성이 끝나면 패커가 하나의 이미지를 작성합니다. 24프레임 128x128 GIF는 3072x128 스트립이 됩니다. 같은 프레임을 6x4 그리드로 만들면 768x512가 됩니다. 둘 다 같은 픽셀이며, 차이는 셰이더가 UV를 어떻게 처리하는지에 있습니다.
01
GIF를 드롭 존에 놓습니다. 보고된 프레임 수, 지연, 캔버스 크기를 확인합니다.
02
패킹 레이아웃을 선택합니다. UV 스크롤 셰이더에는 단일 행, 아틀라스와 엔진 임포트에는 그리드입니다. 그리드 열은 이미지가 정사각형에 가깝도록 자동 선택됩니다.
03
GIF에 불균일한 프레임 지연이 있으면 리샘플 레이트를 선택합니다. 기본값은 중앙값 지연이며, 셰이더가 일정한 레이트로 스텝하면 고정 FPS를 선택합니다.
04
내보냅니다. 투명 배경의 PNG 하나와 머티리얼이나 스크립트에 붙여 넣을 수 있는 rows, columns, 프레임 수, FPS 텍스트를 얻습니다.
플립북 텍스처란
플립북 셰이더는 네 개의 숫자를 읽습니다: rows, columns, 현재 index, FPS. 0에서 1 범위의 UV 좌표를 받아 row/column 셀로 나누고, 그 셀을 현재 index만큼 이동시킵니다. 텍스처 자체는 정적입니다. index가 움직이기 전까지는 아무것도 애니메이션되지 않습니다.
index는 보통 시간에서 도출됩니다. 행 스트립에서는 index가 floor(time 곱하기 FPS)이고, U 좌표는 index 나누기 columns만큼 오프셋됩니다. 그리드에서는 index가 행도 결정합니다: row는 floor(index 나누기 columns), column은 index modulo columns입니다. 그래서 행 스트립이 더 쉬운 경우입니다 — 순회할 차원이 하나뿐입니다.
rows와 columns는 이미지와 정확히 일치해야 합니다. 24 columns, 1 row로 선언된 3072x128 스트립은 올바르게 샘플링됩니다. 23 columns로 선언하면 모든 프레임이 셀의 일부만큼 어긋나 대각선 번짐으로 보입니다. 1 column으로 선언하면 정적 이미지가 됩니다. 이 두 실수가 대부분의 깨진 플립북을 설명합니다.
FPS는 프레임 수와 별개입니다. 12 FPS의 24프레임 스트립은 1초에 두 번 반복됩니다. 24 FPS의 24프레임 스트립은 1초에 한 번 반복됩니다. 텍스처 데이터는 동일하며, 시계만 바뀝니다. FPS를 rows와 columns 개수와 같은 위치에 두어 서로 어긋나지 않게 하십시오.
네 개의 숫자
Rows, columns, index, FPS. rows와 columns는 텍스처를 설명합니다. index와 FPS는 시간을 설명합니다. rows와 columns는 내보낼 때 고정됩니다. index는 동적이며 셰이더나 스크립트에 속합니다. FPS는 대부분의 셰이더에서 고정되지만 속도 제어를 원할 때 파라미터로 구동할 수 있습니다.
셰이더에 speed 또는 playback rate 파라미터가 있으면, 그것은 FPS 상수가 아니라 시간 항에 곱해집니다. 내보낸 FPS를 기본 레이트로 유지하여 속도가 1일 때 메타데이터가 의미를 유지하도록 하십시오.
Unity용 플립북 텍스처
Unity에서 플립북은 보통 quad나 파티클의 머티리얼입니다. PNG를 sRGB 활성화, 프레임이 작으면 밉맵 없음, alpha is transparency로 임포트합니다. Wrap mode는 Repeat가 아니라 Clamp여야 합니다 — 반복되는 플립북은 UV 경계에서 마지막 프레임이 첫 프레임으로 감겨 1픽셀 이음새가 나타납니다.
index를 구동하는 방법은 두 가지입니다. 내장 플립북 노드가 있는 Unlit 또는 Particles 셰이더에서는 tiling을 rows와 columns로 설정하고 0에서 1 범위의 blend 값을 공급합니다. 커스텀 셰이더에서는 UV 계산을 직접 작성하고 rows, columns, FPS를 머티리얼 프로퍼티로 노출하여 재컴파일 없이 편집할 수 있게 합니다.
붙여 넣을 메타데이터: rows, columns, 프레임 수, 내보낸 FPS. 셰이더가 정수 index가 아니라 정규화된 blend를 사용하면, blend 범위는 0에서 프레임 수 나누기 전체 그리드 셀입니다 — 24프레임 단일 행이면 0에서 1, 24셀 중 24프레임인 6x4 그리드도 0에서 1입니다. 부분 그리드가 사람들이 실수하는 경우입니다: 20프레임인 6x4 그리드는 20 나누기 24, 즉 약 0.833에서 끝납니다. 그 이상으로 넘어가면 빈 셀을 샘플링합니다.
- 투명 배경내보낸 PNG는 알파를 유지하므로 quad의 플립북에는 multiply blend나 크로마 키가 필요하지 않습니다. 매트 색상이 있던 소스 GIF는 대신 알파에 색상이 기록됩니다.
- 작은 크기에서는 밉맵 없음한 변이 256픽셀 미만인 프레임은 밉맵을 끄는 것이 좋습니다. 밉 체인 생성은 스트립의 인접 프레임을 블렌딩하며, 멀리서는 플립북이 모든 프레임의 평균이 됩니다.
- Clamp wrap스트립을 Repeat로 감싸면 이음새를 넘어 샘플링합니다. wrap U와 V를 Clamp로 설정하여 마지막 프레임이 첫 프레임으로 번지지 않게 하십시오.
VRChat용 Poiyomi 플립북
Poiyomi에는 플립북 노드가 포함되어 있으며, 말하는 입, 스크롤 화면, 아바타의 2프레임 토글에 일반적으로 쓰이는 경로입니다. 노드는 텍스처, rows와 columns 쌍, blend 값을 받습니다. VRChat은 런타임에 스크립트에서 커스텀 셰이더 코드를 실행하지 않으므로, index는 애니메이션된 머티리얼 프로퍼티나 애니메이터 구동 파라미터에서 와야 합니다.
메시는 머티리얼만큼 중요합니다. 평평한 quad의 플립북은 올바르게 보입니다. 같은 텍스처를 곡면에 올리면 UV가 불균일하게 분포된 곳에서 셀이 늘어나 보입니다. 플립북 머티리얼은 평면 또는 거의 평면인 메시에 유지하십시오.
애니메이션이 루프일 때 Poiyomi에는 스트립 레이아웃으로 작업하십시오. UV 계산이 곱셈 하나와 덧셈 하나이기 때문입니다. 애니메이션이 이동하려는 이산 상태 집합일 때는 그리드 레이아웃을 사용하십시오 — 네 가지 모양의 입은 스크롤보다 4x1 그리드에 정수 index를 쓰는 것이 더 이해하기 쉽습니다.
01
이산 상태가 필요하지 않으면 스트립 레이아웃으로 내보내십시오. rows가 1이고 columns가 프레임 수와 같은지 확인하십시오.
02
PNG를 Unity로 임포트합니다. wrap mode를 Clamp, sRGB 켜기, alpha is transparency 켜기, 작은 텍스처는 streaming 끄기로 설정합니다.
03
Poiyomi에서 Flipbook 노드를 만듭니다. 텍스처를 할당합니다. rows와 columns를 내보낸 값으로 설정합니다.
04
blend 입력을 구동합니다. 루프에는 애니메이션된 float 파라미터에서 시간 기반 값을 공급합니다. 이산 상태에는 정수 index를 blend로 변환하여 공급합니다.
05
알파와 렌더 큐를 설정합니다. 페이드가 필요한 플립북은 머티리얼의 나머지 부분과 같은 투명도 설정을 사용합니다 — 별도의 컷아웃을 활성화하지 마십시오.
06
Play 모드에서 테스트한 다음 아바타 업로드에서 테스트합니다. 루프 지점을 확인합니다: 마지막 프레임 다음에 일시 정지 없이 첫 프레임이 와야 합니다.
프레임 스트립 대 그리드: 무엇을 내보낼까
픽셀 데이터는 동일합니다. 선택은 그것을 소비하는 대상에 관한 것입니다. 셰이더는 스트립을 원합니다. 엔진과 스프라이트 시스템은 그리드를 원합니다. 파일 크기가 아니라 소비자를 기준으로 선택하십시오 — 스트립은 더 넓고 그리드는 더 정사각형이며, 같은 총 픽셀 수에서 둘 다 비슷하게 압축됩니다.
스트립은 행이 하나이므로 V 좌표가 사용되지 않고 셰이더는 U만 이동합니다. 명령어가 적고 계산을 틀릴 방법도 적습니다. 그리드는 두 축을 모두 사용하며, 이는 아틀라스 기반 시스템이 기대하는 방식입니다. 확실하지 않으면 스트립을 내보내고, 엔진 임포터가 그리드를 요구할 때만 다시 그리드로 내보내십시오.
또 하나의 경우는 개별 프레임을 기대하는 스프라이트 애니메이터입니다. 일부 엔진은 아틀라스가 아니라 PNG 폴더를 원합니다. 도구는 프레임을 개별적으로 작성할 수 있지만, 디스크의 이미지는 하나의 파일이 아니라 모든 프레임의 합이 되고 임포트 설정은 프레임별입니다.
| Consumer | Layout | What it reads | Note |
|---|---|---|---|
| Shader flipbook | Single row | Rows 1, columns N, U offset | Fewest UV instructions, easy loop |
| Sprite atlas | Grid | Rows M, columns N, cell size | Cell size equals canvas size |
| Sprite animator | Grid or separate PNGs | Frame order and FPS | Separate PNGs lose the single-file pack |
| Engine import | Grid | Rows, columns, frame count | Keep the image near square to respect texture limits |
3D에서 재생하기
정적 평면 위의 플립북 텍스처는 아무것도 증명하지 못합니다. 확인해야 할 주장은 움직임에서만 드러나는 것들입니다: 이음새가 감기는지, 멀리서 알파가 유지되는지, 카메라가 움직일 때 FPS가 적절하게 느껴지는지. The Cyclops' Island는 3D 게임 빌더로 만든 플레이 가능한 장면으로 표면이 실시간으로 애니메이션되므로, 인스펙터가 아니라 지오메트리 옆에서 플립북 루프를 볼 수 있습니다.
그것을 열고 표면을 걸으며 루프 지점을 관찰하십시오. 플립북이 한 프레임 부족하거나 한 열 넓으면, 에셋을 업로드하기 전에 거기서 보입니다 — 눈에 띄는 끊김 또는 대각선 번짐으로. 이것이 플레이 가능한 장면의 전체 논거입니다: 실패는 시각적인 것이고, 시각적 실패에는 뷰포트가 필요합니다.
같은 장면은 다양한 거리와 카메라 각도에서 프레임 전환이 어떻게 보이는지에 대한 참조입니다. 가까이서 128픽셀로 괜찮아 보이는 프레임은 밉 제어 없이 멀리서 에일리어싱됩니다. 멀리서 괜찮아 보이는 프레임은 가까이서 너무 흐릴 수 있습니다. 둘 다 움직이면서 판단하기 더 쉽습니다.
그것이 속한 세계로 걸어 들어가기
스프라이트는 설 자리가 없는 캐릭터입니다. 마지막 단계는 아무도 제공하지 않는 것입니다: 방금 만든 시트를 사람들이 걸어 다닐 수 있는 세계 — 작은 섬, 행성, 비 오는 거리 모퉁이 — 에 넣으십시오. 이 사이트의 모든 세계는 하나의 서술된 설명으로 만들어졌고 플레이 가능한 페이지로 게시되었습니다.
FAQ
Poiyomi 플립북이란 무엇인가요? +
Poiyomi는 Unity와 VRChat용 셰이더 패키지이며, Flipbook 노드가 패킹된 프레임 스트립을 샘플링하여 머티리얼이 애니메이터 없이 프레임을 순환하게 합니다. 텍스처, rows와 columns, blend 값을 제공합니다. blend 값이 index를 움직이며, 보통 애니메이션된 float 파라미터로 구동됩니다.
플립북에 대각선 번짐이 나타나는 이유는 무엇인가요? +
선언된 column 개수가 이미지와 일치하지 않습니다. 24프레임 스트립을 23 columns로 샘플링하면 모든 프레임이 셀의 일부만큼 이동하고, 이것이 스트립 전체에 걸쳐 대각선 번짐으로 누적됩니다. 내보낸 columns 값을 실제 프레임 수와 다시 확인하십시오.
스트립과 그리드 중 무엇을 내보내야 하나요? +
셰이더 플립북에는 단일 행을 내보내십시오. UV 계산이 1차원이고 루프가 단순하기 때문입니다. rows와 columns를 기대하는 스프라이트 아틀라스와 엔진 임포터에는 그리드를 내보내십시오. 픽셀은 같고 소비자만 다릅니다.
투명 배경을 유지하려면 어떻게 하나요? +
내보내기는 색상 위에 평탄화하는 대신 PNG에 알파를 기록합니다. 임포트할 때 alpha is transparency를 설정하고 sRGB를 켜 두십시오. 소스 GIF가 실제 투명도 대신 매트 색상을 사용한 경우, 도구가 전체 프레임을 투명 캔버스에 합성하므로 매트가 남지 않습니다.
GIF의 프레임 지연이 불균일합니다. 어떤 FPS를 사용해야 하나요? +
고정 레이트를 선택하십시오. 기본값은 중앙값 지연이며, 보통 GIF가 브라우저에서 보이는 것과 비슷합니다. 플립북 셰이더는 일정한 시계로 스텝하므로, 혼합된 지연은 하나의 프레임 시간으로 리샘플링하지 않고는 표현할 수 없습니다.
플립북이 루프 지점에서 끊기는 이유는 무엇인가요? +
프레임 수에 중복된 마지막 프레임이 포함되어 있거나 FPS가 소스와 약간 어긋난 경우입니다. 내보낸 프레임 수와 FPS 값을 함께 확인하십시오. 일시 정지하는 루프는 거의 항상 셰이더 문제가 아니라 한 프레임이 더 있는 경우입니다.
3D 게임 빌더로 돌아가기
완성된 31개의 3D 세계, 게임, 장면이 모두 한 페이지에 있으며 — 전부 플레이 가능합니다.
플립북용 스트립 보기
이 라이브러리의 모든 에셋은 기록된 프롬프트가 있는 투명한 게임용 PNG입니다 — Sprite sheet resources and Free sprite sheets, 행동, 스타일, 주제별로 태그가 지정되어 있습니다. 무료로 둘러보고 다운로드하십시오.