GIF・動画をスプライトシートに変換する方法：背景透過とPNG保存

GIFや動画をゲーム用スプライトシートにするには、フレームを読み込み、不要な場面と背景を整理し、セルサイズと再生順を決めてPNGに書き出します。スプライトでこの流れを進められます。ローカルのフレーム整理と書き出しは無料で、ログインせずに始められます。アカウントに作品を保存する場合はログインが必要です。

1. GIF・動画を読み込み、必要な動作を残す

まず、歩行や待機など比較したい動作を含む短いGIF・動画を用意します。現在の動画読み込みは0.1秒間隔、つまり10fpsでフレームを抽出します。読み込み後に先頭・末尾をトリミングし、不要なフレームを選択して削除します。抽出前に開始・終了時刻や抽出間隔を指定する操作ではありません。

動画が開けない場合はブラウザのコーデック対応を確認してください。同じMP4などの拡張子でも内部形式が違う場合があります。長い素材は、必要な動作を含む短いファイルにしてから試すと確認する枚数を減らせます。

2. 重複整理とFPSを一緒に確認する

重複削除やフレーム数を減らす機能で枚数を整理し、再生して重要なポーズが残っているか見ます。打撃直前の構えや停止姿勢が失われた場合は取り消し、残すフレーム数や削除対象を調整します。並べ替えた後も、開始から終了まで順に確認してください。

プレビューとGIF・APNG書き出しは、現在のFPSによる等間隔の再生です。JSONの各フレームの再生時間も現在のFPSから決まります。原本GIFのフレームごとに異なる待ち時間がそのまま保存されるわけではありません。枚数を減らした後はFPSも見直し、動作が速くなりすぎていないか比較します。

3. クロマキーか隅からの除去で背景を透過する

単色背景ならクロマキーで背景色を選び、許容範囲を小さい値から徐々に上げます。四隅からつながる背景だけを消したい場合は、隅を基準にした除去を比較してください。どちらも色を基準にするので、人物と背景が同系色のときは服や目の内部も確認します。

• 服や髪まで消える：許容範囲を下げ、背景色の選び方を見直します。
• 輪郭に背景色が残る：クロマキーの色にじみ除去を比較し、輪郭が薄くなりすぎないか確認します。
• 背景が複雑で消しにくい：許容範囲だけを上げ続けず、背景との色差が大きい原本で比較します。

透過の確認には明るい背景と暗い背景を切り替えます。背景除去の結果をフレームへ適用してから整列を調整すると、何を動かしているか確認しやすくなります。

4. ループの継ぎ目と足位置を整える

最後のフレームから最初へ戻る瞬間を見ます。ポーズが飛ぶなら先頭・末尾の余分な場面と順番を確認します。逆順・往復は揺れる動作に使えますが、歩行や攻撃では意図しない逆動作になる場合があるので再生で判断してください。

キャラクターが揺れる場合は基準点整列を比較します。安定した部分を基準にするか、足を基準にするかを動作に合わせて選びます。整列には透明な背景が必要です。ジャンプの高さや意図した移動まで固定すると動作が変わるため、整列前後をオニオンスキンと再生で確認します。PNGシート書き出し時だけ基準点を整列する設定もあり、フレームに適用する整列とは区別します。

5. 例：8フレームを4列のPNGシートにする

これは配置を理解するための仮定例で、特定のGIFを変換した実測結果ではありません。書き出すフレームが8枚、最終セルが64×64px、列数が4、外側の余白とフレーム間隔が0なら、4列×2行で256×128pxのシートになります。フレームは左から右へ並び、続きが次の行に入ります。

書き出しの幅・高さまたは倍率と列数を設定し、表示されたセルとシート寸法を確認してください。正方形でない原本を無理に64×64へ変形しないよう、縦横比も見ます。外側の余白はシートの縁、フレーム間隔はセル同士の空きピクセルで、どちらかを増やすと全体寸法も変わります。整列を使う場合は整列後のセル寸法を保存結果で確認します。

6. 全体か選択分かを決め、PNG・JSON・GIFを保存する

書き出しは全フレームが初期対象です。一部のフレームを選んだだけでは対象は変わらず、「選択した個数だけ書き出す」をオンにしたときに選択分だけを保存します。保存ボタンのフレーム数とシートプレビューを見てから実行してください。

• PNGシート：ゲーム側でセルを切り出して再生する用途。PNGだけにはFPSが記録されないため、列・行、セル寸法、枚数、FPSも控えます。
• PNGとJSON：ゲームエンジン用JSONをオンにすると、位置と等間隔の再生時間をTexturePacker JSON（Hash）形式で保存します。PNGとJSONを別々に受け取るか、2つをまとめたZIPを選べます。
• GIF・APNG：動作の確認や共有に使います。GIFとAPNGで透明度の扱いが異なるため、薄い境界は実際の保存結果でも確認します。

PNGを開き、透明背景、セルの境界、順番と空セルを確認します。再生用ファイルは末尾から先頭へのつながりも見てください。スプライトシートガイドとサイズ・順番・基準点の記事でゲームへ渡す情報を整理できます。

7. ドット絵の画風も変えたい場合

整理したGIFをドット化で開くと、長辺、色数、輪郭を調整できます。自分の画像・GIF・動画・3Dモデルのドット化への読み込みは無料で、ブラウザ内で処理されるためログインもクレジットも不要です。調整や保存済み作業の復元、再処理もクレジットを消費しません。完成した結果の書き出しやアカウントへの作品保存にはログインが必要です。

画風と操作を先に見たい場合は無料の3Dサンプルを開けます。色を整理する方法はパレットとカラー輪郭の記事、3Dから始める方法は3Dモデルからスプライトを作る記事へ進めます。