スプライトシートからGIFへの変換 — スプライトシートをアニメーションGIFに変換

GIFは時間方向に並んだフレームです。スプライトシートは空間方向に並んだフレームです。スプライトシートをGIFに変換するとは、シートを正しい順序でセルに分割し、各セルに遅延時間を割り当てて、ブラウザが動きとして再生できるようにすることです。このコンバーターはすべてブラウザ内で動作し、通常つまずきやすい部分——最終行の欠け、不均一なグリッド、透過背景——に対応します。

スプライトシートをドロップし、フレームサイズ、列数、行数、FPSを設定してGIFをダウンロードします。エクスポート前にループをプレビューできるため、最終行が短い場合や遅延がフレーム数の整数倍にならない場合に役立ちます。

スプライトシートをドロップ

ツールが最初の画面です。サインアップも待ち時間もありません。PNGまたはGIFをページにドロップすると、デコーダーがシートの寸法を即座に読み取ります。

設定する項目は4つです。フレームの幅と高さ、列数、行数、FPSです。フレームサイズはセルのピクセルサイズです。列数×行数がグリッドの容量です。シートが512×256でセルが64×64なら、8列4行、容量は32です。FPSはフレームごとの遅延を設定します。その後GIFをダウンロードします。

プレビューはその場でループを再生します。フレームがずれて見える場合——キャラクターの半分が次のセルに食い込んでいる場合——フレームサイズが数ピクセルずれています。アニメーションがずれていく場合、列数が間違っています。数値を修正するとプレビューが更新されます。

仕組み

ファイルはブラウザから出ません。画像はブラウザ自身の画像デコーダーでローカルにデコードされ、オフスクリーンキャンバスに描画され、ピクセルデータとして読み戻されます。アップロード手順は不要なため存在しません。

コンバーターはシートを測定します。幅が指定したフレーム幅で割り切れるか、高さが指定したフレーム高さで割り切れるかを確認します。どちらも割り切れればグリッドは均一です。割り切れない場合、余りはフレームサイズが間違っているか、パディングや間隔が存在することを示します。

次にグリッドを左から右、上から下へとたどります。各セルはフレームバッファにコピーされます。透過ピクセルは透過のまま保持されます。エンコーダーはフレームごとの遅延付きでGIFを書き出すため、タイミングはプレイヤーではなくファイル内に保持されます。

12 FPSでエクスポートされた32フレームのシートでは、1フレームあたり約0.08秒、GIF用語では8センチ秒の遅延になります。ループ全体は32÷12で約2.67秒です。

最終行が不完全なシート

多くのシートは固定グリッドとしてエクスポートされ、末尾に未使用のセルが残ります。4×4のシートに13フレームしか含まれないことがあります。最終行に3つの空セルがあります。フレーム数をグリッド容量のままにすると、それらの空セルがGIF内で3つの空白フレームになり、ループがちらついたり停止したりします。

実際のフレーム数を設定します。アニメーションが13フレームなら13を設定します。コンバーターはフレーム13で停止し、空セルを無視します。最終行がセル幅の異なる短い行である場合も同様です。

シートに末尾の空白フレームがあるか判別できない場合は、目に見える最後のフレームより1つ多いフレーム数を設定します。エクスポートしてプレビューを確認し、空白が見えたら1つ減らします。手作業でシートを調べるより、プレビューで確認する方が速いです。

透過背景は透過のまま保持される

GIFの透過は1色のみで、アルファチャンネルではありません。これは1ビットアルファで、ピクセルは完全に透過か完全に不透過のどちらかです。この形式に部分的な透過はありません。ソフトな輪郭を持つシートは、対処しない限りエクスポート後に硬い輪郭になります。

コンバーターは元の透過を保持します。透過色をGIFパレットに書き込み、それらのピクセルを透過としてマークします。しきい値未満のアルファを持つピクセルは透過になり、それ以上は不透過になります。

避けるべき失敗は平坦化です。エンコード前にシートが不透過キャンバスに描画されると、透過ピクセルはキャンバスの色になります。通常は白か黒で、新しい背景の上ではベタ塗りのブロックとして見えます。元のPNGをアルファ付きのまま保持し、エクスポート前に合成しないでください。

ソフトな輪郭には、フレームが表示される既知の色に対してエッジをマット処理します。GIFが白いページに配置されるなら白に対してマット処理し、アンチエイリアスのハローを合わせます。暗い背景に配置されるならその色に対してマット処理します。単一のマット色では両方に正しく対応できません。

均一なグリッドでないシート

パック済みのシートでは、セル間に間隔があり、シートの周囲にパディングがあることがよくあります。64×64のセルに2ピクセルの間隔がある場合、ストライドは66ピクセルです。フレーム幅に64を入力すると、最初のセル以降が2ピクセルずつ累積してずれ、アニメーションがずれていきます。

ストライドとしてセルサイズ＋間隔を、オフセットとしてパディングを入力します。エクスポーターによっては、シート全体をセル＋間隔で書き出しパディングがないものもあれば、余白を追加するものもあります。ファイルのメタデータを読むか、最初のセルを測定して両方の数値を求めます。

最後のセルが異なるサイズの場合——最終フレームがスメアやエフェクト用に幅広になっているシート——均一なグリッドでは一度に記述できません。シートを分割します。均一なフレームを1つの範囲としてコンバーターに通し、はみ出したフレームを別途追加するか、変換前に共通のセルサイズにトリミングします。

シートがグリッドではなくパックされている場合、単純なストライドはありません。元のツールからグリッドとしてエクスポートするか、フレームごとの矩形でセルを切り出して個別に取り込みます。

FPSの選び方

GIFはフレーム遅延をセンチ秒で保存します。10 FPSなら1フレームあたり10センチ秒です。30 FPSなら3.33となり、3に丸められて約33 FPSになります。この形式は任意のサブセンチ秒の遅延を表現できないため、100をきれいに割り切れるFPSを選びます: 10、20、25、50 FPSです。

不均一な遅延はカクつきの原因になります。24 FPSを設定すると遅延は4.17センチ秒となり、不規則に丸められるため、一部のフレームが他より長く保持されます。短いループではサイクルごとに1回の引っかかりとして見えます。代わりに20か25を使用してください。

ループの長さはアニメーションの意図した長さに合わせます。0.8秒として作成された歩行サイクルは、0.8秒でループするGIFを生成するべきです。16フレームならちょうど20 FPSです。フレーム数を変えると、意図するFPSもそれに応じて変わります。

また、ほとんどのブラウザには最小遅延が設定されています。2センチ秒未満の遅延はビューアによって約10センチ秒に切り上げられることが多く、50 FPSでエクスポートしても、ファイルの内容にかかわらず一部の環境では10 FPSで再生される場合があります。エクスポートしたGIFは対象のブラウザでテストしてください。

逆方向の変換

逆方向の変換も一般的です。アニメーションGIFがあり、スプライトシート——すべてのフレームがグリッド上に配置された1枚の画像——を作成し、ゲームエンジンがアニメーションとして分割できるようにしたい場合です。GIFからスプライトシートへのコンバーターがそれを行います。GIFのフレームをデコードし、均一なグリッドにパックし、フレームサイズと枚数とともにPNGとしてエクスポートします。

逆方向の難しい点は同じ透過の問題です。GIFの透過は1色です。それをシートに展開すると、その色がシートの透過ピクセルになり、GIFで平坦化されたアンチエイリアスの輪郭は平坦化されたまま残ります。シートはGIFが失ったものをそのまま引き継ぎます。

フレーム遅延も変換時に失われます。スプライトシートにタイミングはなく、エンジンやアニメーターが割り当てます。タイミングが必要な場合は、変換前にGIFのFPSを記録し、対象のアニメーションで設定してください。

GIFを3Dで再生する

GIFループは平面のアニメーションです。The Cyclops' IslandはNeta Studioで構築されたプレイ可能な3Dワールドで、スプライトがキャラクター、ワールドがその住む場所です。変換したアニメーションをキャラクターに読み込み、シーン内で動かすことができます。

これにより確認すべき点が変わります。ページ上でよく見えるGIFがワールドでは正しく見えないことがあります。白い背景では滑らかに見えたフレームレートが、動くジオメトリの前では遅く見えることがあり、透過用に選んだマット色が環境に合わない場合もあります。

Mini Worldと3Dゲームビルダーは、結果を配置するもう2つの場所です。Mini Worldは同じビルダー画面を備えた小さなワールドです。Agent Sprite Forgeはエクスポートしてアニメーション化できるスプライトキャラクターを生成します。いずれもブラウザで動作します。

その他の無料ツール

スプライトを扱う場合、コンバーターは一連の作業の1ステップです。以下はその他のツールです。

スプライトアニメーター: 設定したFPSでシートを再生し、オニオンスキンとフレームステップを備えているため、エクスポート前にループを確認できます。GIFをエクスポートせずに不正なフレームを見つけるのに便利です。

スプライトシートメーカー: 個別のフレーム画像を、指定したセルサイズ、列数、パディングでグリッドにパックします。フレームが1枚のシートではなく個別のファイルとして届く場合に使用します。

スプライト素材ライブラリ: コンバーターを試すための既製のスプライトとシートのセットで、最終行が不完全なシートや透過背景を持つシートも含まれます。

これらはいずれもアップロード不要です。コンバーターと同様にブラウザで動作します。

そのスプライトが属するワールドへ歩き出す

スプライトは立つ場所のないキャラクターです。最後のステップは他にはないものです。作成したシートを、誰かが歩き回れるワールド——小さな島、惑星、雨の通りの角——に配置します。このサイトのすべてのワールドは1つの記述から作られ、プレイできるページとして公開されています。

FAQ