GIF からスプライトシートへのコンバーター — 無料・ブラウザ内完結・アップロード不要

GIF からスプライトシートへの変換は、手作業でやるまでは簡単そうに思えます。GIF はすでにパレットとフレームごとの遅延を持つ完全なフレームの連続なので、実際に必要なのは、各フレームをデコードし、透過を正しく合成し、それらのフレームをテクスチャ座標で参照できるグリッド状に 1 枚の PNG へ配置するツールです。Neta Studio のコンバーターは、このデコード処理を canvas 要素上でローカルに実行するため、ファイルはブラウザ内にとどまり、サーバーには一切送信されません。GIF をドロップし、列数・行数・FPS を選んで、1 枚の PNG アトラスをダウンロードするだけです。

難しいのは描画ではありません。パレット、タイミング、そしてグリッドの計算です。GIF は透過をカラーテーブルへのインデックスとして保持するため、画像ビューアーではきれいに見えていたフレームも、合成されると黒や白のマットが付いた状態で canvas に現れることがあります。GIF のフレーム遅延は 100 分の 1 秒単位で、しかもフレームごとに異なることが多いため、安直な書き出しでは再生がガタつくシートになります。このページでは、重要な設定と、ツールを開発する中で実際に遭遇した不具合のパターンを取り上げます。

GIF をスプライトシートに変換する

コンバーターはページの最初にあります。ドロップゾーン、フレームプレビューのストリップ、そして 4 つのコントロール — 列数、行数、FPS、アルファチャンネルを保持するかどうかのトグルです。ファイルをドロップすると、ブラウザは GIF デコーダーを通じてフレームごとに ImageBitmap を生成し、それぞれを元の寸法のオフスクリーン canvas に描画したうえで、計算されたセル位置にアトラス canvas へ転送します。ソースファイルは File API で読み込まれ、メモリ上に保持されます。GIF を含むネットワークリクエストは発生しません。

出力は常に PNG です。PNG は 8 ビットのアルファチャンネルを持つため、キャラクター制作に必要なものが得られます。JPEG では柔らかいエッジがすべてマットに潰れてしまいます。GIF に透過がなければアトラスは RGBA のままですが、未使用のアルファバイトはファイルサイズに影響するだけです。GIF が透過を使っている場合、デコーダーは部分更新ではなく disposal を含む完全なフレームを要求する必要があります。そうしないと、動く要素がシート上で尾を引いてにじみます。

シートは、ファイルブラウザーでの見え方ではなく、エンジンがどのようにサンプリングするかに合わせて作ってください。64x64 のフレームを 4x4 に並べたものは 256x256 のテクスチャで、フレーム n は列 n mod 4、行 floor(n / 4) で参照します。対象のエンジンやシェーダーのアトラスがべき乗サイズを前提とする場合は、シートのサイズをべき乗に保ってください。320x320 のシートは一部の経路でパディングや再サンプリングが行われ、スプライトのエッジが甘くなります。

VRChat 向けの GIF からスプライトシート

VRChat のフリップブックシェーダーは、テクスチャをグリッドではなく 1 本の横帯として読み取ります。6x4 のシートを渡すと、最初の行の帯が繰り返されるだけになります。UV 計算がすべてのフレームを同じ行に置く前提で、フレームインデックスが U 軸方向にしか進まないためです。列数をフレーム数に、行数を 1 に設定してください。24 フレームのアニメーションは 24x1 のシートになります。

帯の全幅をべき乗サイズにしてください。64 ピクセルのフレームを 24 枚並べた帯は幅 1536 ピクセルで、これはべき乗ではありません。64 ピクセルで割り切れる次のサイズは 2048 で、32 フレーム分の余裕が生まれます。未使用のセルは透過ピクセルまたは最終フレームの複製で埋めてかまいません。べき乗が重要なのは、アップロード経路でミップマップ生成や圧縮を経た非べき乗テクスチャはサンプリングが半テクセルずれることがあり、幅 1 ピクセルのスプライトではそれが目に見えるためです。

アルファはシェーダー側ではなく、ここシート側で処理してください。シェーダーのカットアウトやアルファテストは粗い道具で、GIF のアンチエイリアスされた輪郭の柔らかいエッジは、しきい値次第で残ったり消えたりします。しかもそのしきい値をアバターごとに調整するのは避けたいところです。実際のアルファと、乗算済みアルファでも破綻しないエッジを持つ PNG を書き出せば、シェーダーはそれをサンプリングするだけで済みます。ループのペースは一定に保ってください。VRChat のフリップブックは固定のタイムステップで進むため、元の GIF に不揃いなフレーム遅延がある場合は、書き出す前に揃えておかないと、元のタイミングとは異なる均一なレートで再生されます。

パラメーターの全一覧とテクスチャの設定については、フリップブックテクスチャのガイドを参照してください。

GIF からフレームグリッド(「表計算」)へ

gif to spreadsheet で検索する人が求めているのは、ほとんど .xlsx ではありません。求めているのはフレームグリッド、つまり各フレームがインデックスで参照できるように行と列に並べられた状態です。一見すると表計算のように見えることからこの言葉が使われます。このツールはそのグリッドを生成し、グリッドはスプライトシートと同じものです。違いは呼び方だけです。重要なのはレイアウトが規則的であること、すなわちセルサイズが固定で、列数が固定で、フレーム順が左上から右下へ進むことです。

ときどき試される別の方法は、ピクセルアートエディターで 1 フレームずつ描き、オニオンスキンを重ねてアニメーションが正しく見えるまで調整するやり方です。このワークフローは自作キャラクターには向いていますが、すでに手元にある GIF にはまったく向きません。ピクセルエディターは GIF のフレームごとの遅延を読み取れず、24 フレームを手作業で 24 レイヤーに読み込むとタイミングは完全に失われます。ソースがすでにアニメーションなら、グリッドへ変換するほうが近道です。ピクセルアートのツールは、トランスコードではなく制作に使うときに価値があります。

手描きのフレーム制作については、ピクセルアートのページで描画とパレットの側面を扱っています。

フレームサイズ、グリッド、透過背景

変換のほとんどは 4 つの原因で壊れます。それぞれに固有の症状があります。

GIF の透過はパレットの中で失われます。GIF は最大 256 色しか使えず、透過をパレットのインデックスとして示します。disposal method 2 でフレームをデコードすると、あるフレームで透過だった領域が、前のフレームの背景色に復元されることがあります。解決策は、すべてのフレームを白ではなく透過バッファーに対して合成することです。プレビューでスプライトの周囲に黒や灰色の形が見える場合、それはパレットの背景インデックスであり、すでに実際のピクセルになっています。

最終行が途中で終わります。フレーム数が 23 で列数を 6 にすると、3 つの完全な行と、6 ではなく 5 セルだけの最終行ができます。アトラスの高さはそれでも 1 行分の高さに切り上げられます。エンジンのフリップブック計算が完全なグリッドを前提とし、総フレーム数を列数で割ってフレームインデックスを求める場合、ループの最後で空白セルを読み取ることになります。透過セルでシートを完全な矩形に埋めるか、割り切れるように列数を減らしてください。

フレームサイズはシートを割り切れる必要があります。幅 320 のシートから幅 64 の部分矩形を切り出すと、ちょうど 5 列になります。幅 330 のシートでは 5 列と、フレームではない 10 ピクセルの余りが出ます。シートの寸法は、両軸ともフレームサイズ × 列数(行数)に保ってください。

原点の 1 違い。テクスチャの UV 座標は通常左下が原点ですが、フレームグリッドは左上から並びます。フレーム 0 が最後のフレームとして表示される場合、エンジンが V を反転しています。列 c、行 r のスプライトセルは、画像空間では x = c * width、y = r * height にあり、これを反転した UV に変換するには 1 から引く計算が 1 回必要です。

シートの次の行き先

書き出されるものはどの場合も同じ PNG です。異なるのは、エンジンがテクスチャをどのように分割して扱うか、そしてアルファをどう処理するかです。以下を短いリファレンスとして使ってください。

各ターゲットについて、カスタムシェーダーなしで読み取れるグリッドでシートを 1 枚書き出してください。2 つのターゲットに対応する場合は、シートを 2 枚書き出します。VRChat 用の横帯と、エンジン用のグリッドです。同じ GIF から書き出し直すほうが、両者を整合させる UV 計算を書くより速く済みます。

スプライトシートが 3D で動くところを見る

ほとんどのコンバーターは PNG を出力したところで止まり、結果の確認は別の場所で行うことになります。3D ゲームビルダーはその先へ進みます。シートをビルボード平面に読み込み、実際のシーンでアニメーションする様子を確認できるのです。グリッドとタイミングが正しいかどうかを答えられる唯一のテストです。Agent Sprite Forge は、スプライトがコントローラーを持つキャラクターになる場所であり、スプライトがキャラクターで、3D の世界はそれが生きる場所です。

The Cyclops' Island はその考えを遊べる形にしたデモです。ブラウザ内で作られた、スプライトをキャラクターとして扱う小さな 3D シーンを動き回れます。自分のシートをドロップすると、デモのフレームを動かしているのと同じ仕組みがあなたのアトラスをサンプリングします。フレーム順が間違っていればすぐに分かります。キャラクターが後ろ向きに歩く、あるいはループの最後で空白セルに飛ぶといった形で現れます。アルファが間違っていれば、体の周囲に硬い矩形が見えます。これらはエンジンで遭遇するのと同じ不具合で、およそ 5 秒で確認できます。

遊べる The Cyclops' Island のシーンを試して、自分のアトラスに差し替えてみてください。

その他の無料スプライトツール

コンバーターはその一部にすぎません。以下の 3 つが Neta Studio におけるスプライトワークフローの残りをカバーし、同じブラウザセッションで同じローカルファイル処理のもとで動作します。

スプライトが属する世界へ足を踏み入れる

スプライトは、立ち位置のないキャラクターです。最後のステップは、他にはないものです。作ったばかりのシートを、誰かが歩き回れる世界に置く — 小さな島、惑星、雨の降る街角。このサイトのすべての世界は、1 つの記述から作られ、遊べるページとして公開されています。

FAQ