スプライトシートをきれいにループするGIFへ変える方法

アップロード前にグリッドを確認

256 × 128ピクセルのシートが4列2行なら、各セルは64 × 64ピクセルです。ImageMintは左から右へ、次に上から下へセルを読みます。シートに余白、不均一なセル、末尾の行の空白があると、単純な行・列での切り分けは隣の一部や空のポーズを含むことがあります。次で先にフレームを切り分けてください スプライトシートスライサー 代わりに個別画像のオプションを使います。

各ポーズのキャンバスサイズと基準点を同じにしてください。あるフレームをぴったりトリミングしたために、歩くキャラクターが1ピクセル上へ動くべきではありません。位置合わせの問題はプレビューで跳ねとして見え、再生速度を変えても直りません。

8フレームのループを作ってテスト

1. 選択 選択肢B 均等セルのシート1枚用です。アップロード前に2行4列を入力します。番号付きPNG8枚があるなら、 選択肢A 代わりに。
2. フレーム順の帯を開き、8ポーズすべてを順にクリックしてください。矢印で位置の違うポーズを前後へ移します。最後は自然に最初へ戻るべきで、意図して長く表示するのでなければ、末尾に最初のポーズを重複させないでください。
3. 最初のテストは8 FPSで再生してください。8フレームなら1ループ1秒で、16 FPSでは同じ絵が半秒です。1つのFPSを普遍的な正解とせず、足と重心で判断してください。
4. 待機や歩行アニメーションならループを使います。被弾反応など1回だけの効果ではオフにします。ブラウザープレビューで意図した順序とリズムになった場合だけ書き出してください。

GIFで変わることを理解

GIFには限られたカラーパレットと、基本的にオンかオフの透明度しかありません。一方、PNGやWebPは、より滑らかな半透明の端を保持できます。細かな影や柔らかなアンチエイリアスは、書き出し後に硬く見えることがあります。光彩、半透明の煙、繊細な色の階調を持つスプライトで、特に目立ちます。ダウンロードしたGIFを、明るい背景と暗い背景の両方でPNGプレビューと比較してください。

書き出しでは、FPS設定に基づく共通の遅延時間を全フレームに使い、10 ms単位に丸めます。特別な1ポーズだけに個別の保持時間は保存しません。長い停止を再現するには、意図的に重複フレームを追加するか、後から専用アニメーションツールでフレームごとの時間を編集してください。可逆のゲーム素材が必要なら、元の画像フレームを残してください。

GIF書き出しの上限は各辺1024ピクセル、全フレーム合計2000万ピクセルです。それ以外は正常なシートでも上限を超えるなら、縮小するかフレーム数を減らしてください。小さい出力を選ぶ前にも、アニメーションプレビューでタイミングを診断できます。

固定の基準点で位置合わせを確認

書き出す前に、安定させるべき点を選んでください。待機アニメーションの接地した足、回転するアイコンの中心、振る物体の持ち手などです。サムネイルを順に確認し、その点とフレーム境界を比較します。異なるサイズの画像を追加した場合、GIFの書き出しは最も大きいキャンバス内で中央に置くだけで、選んだ足や持ち手は揃えません。取り込む前に、小さい切り抜きを共通のキャンバスへ戻してください。

歩行サイクルでは、意図した体の動きと切り抜きの誤りを区別してください。接地した足を床に残しながら、頭は上下することがあります。すべてのポーズの上端を揃えると、その違いを消し、足が滑るようになります。最も小さい外接矩形ではなく、画像が意図する基準線を使ってください。

ブラウザープレビューだけでなく、ダウンロードしたループを確認

8フレームのループを8 FPSでプレビューすると、各ポーズは125 msです。GIFの書き出しでは130 msに丸めるため、ファイルのループは1.04秒になります。16 FPSでは60 msを書き込み、ループは0.48秒になります。音楽や別の時間に合わせた効果とアニメーションを比較する際、これらの違いが重要になることがあります。GIFは、精密な時間管理のためのマスターファイルではありません。

1. GIFを開き直し、完全なループを何回か見てください。最後から最初への跳ねは、繰り返すと気づきやすくなります。
2. 特に半透明の端の周囲に注意し、同じ出力を明るい背景と暗い背景で確認してください。
3. 元シート、行・列設定、選んだFPSをプロジェクトのメモに残してください。GIFだけでは編集可能なアニメーションプロジェクトにはなりません。