残像フレームを出さず、GIFをスプライトシートにする方法
GIFを展開したところ、いくつかのフレームに前のポーズの一部が残っていることがあります。通常は、GIFの更新用矩形領域を、完全な画像であるかのように保存したことが原因です。ここでは、完全なフレームを取得し、ゲームで使える出力を選ぶ方法を説明します。
GIFの全画像ブロックを保存するだけでは不十分な理由
GIFアニメーションは、常にフルサイズ画像の積み重ねとは限りません。後のフレームには、変化した矩形だけが保存されることがあります。また、次のフレームを適用する前に、直前の描画をどう扱うかを再生側へ伝える破棄処理の指示も含まれます。抽出ツールがこの指示を無視すると、以前の腕や足、影が残像として残ります。矩形だけを保存すると、書き出したPNGのサイズが揃わなくなります。
スプライトシートでは、各セルに一定のキャンバス上の完全な画像が必要です。正しい順序は、前のフレームの破棄ルールを適用し、現在の更新を描き、その完全なキャンバスをこの時点のPNGとしてコピーすることです。ImageMintのGIFツールは書き出し前にこの合成を行うため、差分フレームを手動で配置する必要はありません。
12フレームの具体的な変換例
- 元のGIFを次で開きます GIFからスプライトシートへ。表示されたフレーム数とキャンバスサイズを確認してください。64 × 64ピクセルの12フレームなら、GIF内部の更新領域がそれより小さくても、完全な64 × 64の出力が12枚得られるはずです。
- グリッドPNGでは、次を設定してください 1行の画像数 を4にします。シートは4列3行となり、期待寸法は256 × 192ピクセルです。この簡単な寸法確認で、驚くほど多くの出力ミスが見つかります。
- エンジンが均等なシートを必要とするならグリッドPNG、個別の番号付きPNGが必要ならZIPを保存します。ZIPには次も含まれます
frame-delays.json；元のGIFでポーズによって停止時間が異なる場合は、保持してください。 - 使用するエディターで結果を開き、最初、中間、最後のフレームを確認してください。前のポーズが残らず、キャラクターが同じ64 × 64領域に収まることを確認します。
タイミングの落とし穴：1枚のシートだけでは再生速度はわからない
PNGシートが格納するのはピクセルであり、フレームの表示時間ではありません。12フレームのGIFで、11フレームは80 ms、最後のフレームだけ400 ms表示するとします。書き出したシートを固定の12 fpsで再生すると、すべてのフレームが約83 msになるため、最後の停止が消えます。これは抽出のエラーではありません。時間情報はPNGの外にあるためです。ZIP内の遅延時間を読み、エンジン内で長く表示するフレームを再現するか、意図的な近似として最後のフレームを繰り返してください。
次の作業に合わせて出力を選択
| 必要なのは | 保存 | 覚えておくこと |
|---|---|---|
| エンジン用の1つの均一なテクスチャ | グリッドPNG | 取り込み用に列数とセルサイズを保持してください。 |
| 編集可能なフレーム、または不均一な時間設定 | PNGのZIP | 画像と一緒にframe-delays.jsonを保持してください。 |
| 選択するポーズ数を少なくする | ZIP、次にフレームを編集 | 時間設定を調整しない限り、フレームを削除するとループの長さが変わります。 |
ImageMintは、ブラウザーのタブを保護するため、GIF入力を20 MB、100フレーム、各辺1024ピクセル、全フレーム合計2000万ピクセルに制限します。それより大きい元データは、デスクトップのエディターで前処理が必要です。ご自身が所有するか、使用許可があるアニメーションだけを再利用してください。
アニメーションを再現する際、不均一な停止時間を保持
12フレームの例では、全体の長さは11 × 80 + 400 = 1280 msです。保存先が固定の表示時間1つにしか対応しない場合、80 msでポーズを5回繰り返すことで長い表示を近似できます。12種類の画像からタイムラインの16項目になり、全体の長さを保てます。これは意図的なタイムライン編集であり、抽出ツールが自動適用するオプションではありません。
繰り返した画像と、不要な重複を混同しないでください。見た目が同じ2つのフレームでも、意図した停止時間を表している場合があります。遅延時間を移さず片方を削除すると、アニメーションが短くなります。まず未加工の抽出結果を保存し、順序を最適化するときはコピーを編集してください。
末尾の空白セルを再生せずシートを取り込む
64 × 64の10フレームを4列に並べると、出力は256 × 192です。12か所ありますが、実フレームは10だけで、最後の2セルは空白です。ファイルとともにセルサイズ、列数、実際のフレーム数を記録してください。幅と高さだけからフレーム数を推測するグリッドインポーターでは、アニメーション範囲の修正が必要です。
シート出力が辺の上限を超えた場合、列数を変えると形は収まるかもしれませんが、デコードしたフレーム数は減りません。64 × 64の12フレームは、未使用セルを除いても49,152フレームピクセルです。小さい圧縮GIFでも大きな連番に展開されるため、合計ピクセル上限が問題ならエディターで解像度かフレーム数を減らしてください。
最終抽出チェックリスト
- 出力フレームは、表示された完全なキャンバス寸法になります。
- 中間と最後のフレームに、意図しない前のポーズが残っていない。
- 受け取り先のアプリが、シートの全セルではなく実際のフレーム数を使う。
- 不均等な遅延時間を保持するか、意識して近似する。
- 元のGIFと使用許可を保持している。