GPT-Image 2.5のスプライトシートを補正・分割。ガタつくGIFをゲーム素材へ

GPT-Image 2.5で、1枚のキャラクターから戦闘モーションのスプライトシートを作る投稿が続いています。

4×4・16コマの画像を作り、GIFで動かす。ここまで画像生成AIだけで進められるのは、素直にすごいです。

ただ、GIFになった瞬間に気づくことがあります。

• 足元がコマごとに上下する

• キャラクターの大きさや余白が揃わない

• 背景色が残り、透過できていない

• 髪や服の色がコマごとにちらつく

• 4×4の境界がずれ、隣のコマが混ざる

「動いた」と「ゲームで使える」の間には、分割・位置合わせ・透過・色整理という仕上げが残っています。

そこで、AI生成などのスプライトシートをブラウザで整える無料ツール「スプライトシート 補正・分割」を作りま
した。

生成したスプライトを、ゲーム素材へ仕上げる

画像生成AIでスプライトシートを作り、GIFへ変換する流れは、ゲーム制作の入口をぐっと身近にしました。ここでは、生成後に必要になる分割・位置合わせ・透過・色整理の工程を紹介します。制作例として参考にした投稿はこちらです。

同じテーマの制作例として、こちらの投稿も参考になります。

生成AIへ何度も指示して直す方法もあります。ただ、分割線、足元、透過、色数を目で確かめながら揃えるなら、専用の画面がある方が早く、結果も確認しやすくなります。

まず4×4の分割線を合わせる

画像を読み込むと、ツールが列数と行数を提案します。16コマなら基本は4×4です。

自動検出が合わない場合は、横・縦のコマ数、外側の余白、コマ同士の間隔を変更できます。分割線は1pxずつ動かせるので、隣のコマの腕やエフェクトが混ざらない位置へ合わせます。

足元を揃えると、動きのガタつきが減る

静止画では数ピクセルの差を見落としやすくても、GIFで繰り返すと上下動として目立ちます。

歩行や戦闘キャラクターは「足元」、顔やバストアップは「頭頂」、エフェクトは「中央」を基準にできます。キャラクター自体を無理に拡大縮小せず、各コマのフレームと余白を揃えます。 下の比較では、左が均等に分割しただけの状態、右が補正後です。足元の基準と余白を揃えることで、不要な上下動が減り、動作そのものを追いやすくなります。

背景透過は、外側につながる色から処理する

AI生成のスプライトシートは、背景が単色に見えても、近い色が混ざっていることがあります。単純に一色だけ消すと背景が残り、判定を広げすぎると服や目まで消えます。

このツールは、画像の外周からつながっている近似色を背景候補として処理します。被写体の内側にある同系色を残しやすい方法ですが、キャラクターが画像の端へ接している場合は巻き込むことがあります。そのときは判定を弱めるか、透過を切って保存できます。

透過後は市松模様のプレビューで、背景が残っていないか、輪郭が欠けていないかを確認します。

色数を揃えて、再生時のちらつきを抑える

同じ髪や服でも、AI生成ではコマごとに少し違う色が入ります。静止画では気にならなくても、再生すると色が点滅して見えることがあります。

元の色を維持するほか、64色・32色・16色の共通パレットへ整理できます。目的は、ただ色を減らすことではありません。コマをまたいで同じ部分の色を揃え、輪郭と陰影をパリッと見せることです。

動きを確認してから、必要な形式で保存

「動きを確認」を押すと、補正後のコマをその場でループ再生できます。

保存できる形式は次のとおりです。

• 補正後のスプライトシートPNG

• 1コマずつ分けたPNG ZIP

• フレーム順と設定を含むJSON

• ループGIF

• MP4動画

フレームの順番を入れ替え、不要なコマを外してから書き出すこともできます。

無料・登録不要。画像はブラウザ内で処理

ツールは無料で、会員登録も不要です。分割、位置合わせ、透過、減色、PNG作成はブラウザ内で行い、選んだ画像をサーバーへ送信しません。

GIF・MP4は初回だけ動画エンジンを読み込みますが、画像の合成と動画化は端末内で行います。

GPT-Image 2.5でスプライトシートを作れたら、次は「動いた」で終わらせず、足元・透過・色・分割線を揃えてみてください。

関連する開発記事はこちらです。

#ドット絵 #ピクセルアート #スプライトシート #GPTImage #AI画像 #ゲーム制作 #GIF #無料ツール #個人開発