スプライトシートをAIで作る：コマの一貫性を保つ方法
遊びをつくる執筆にClaudeを使用しています。
スプライトシートとは、キャラクターや物体のアニメーションコマを一枚の画像にまとめたファイルです。ゲームエンジンやブラウザゲームは、このシートから決まった座標・サイズで切り出しながら連続再生してアニメーションを作ります。AIを使えばキャラクターイラスト自体は生成できますが、「歩き・ジャンプ・攻撃」と複数コマ並べたときに顔の輪郭が変わる、服の色味がコマごとにずれる、という一貫性の問題が必ずついて回ります。この記事では、その問題をどう防ぐかに絞って手順と判断基準を整理します。 一貫性が崩れる原因は主に二つあります。一つはAI生成の確率的なばらつきで、同じプロンプトを使っても毎回わずかに異なる結果が出ます。もう一つはコマごとにポーズを変えるとき、モデルがキャラクターを「再解釈」してしまうことです。どちらも完全に排除はできませんが、生成の組み立て方と後処理の順序を工夫することで、実用レベルに抑えることは十分に可能です。
この記事の目次
最初に「リファレンスコマ」を確定させる
アニメーション全体の基準になる静止画を一枚だけ先に完成させてください。これをリファレンスコマと呼びます。正面向き・直立・標準ポーズが扱いやすく、色・輪郭・サイズの基準になります。このコマを決める前に他のポーズを生成し始めると、後から「何に揃えるか」が曖昧になって手戻りが増えます。
リファレンスコマを固めるときに決めておくべき項目は次のとおりです。
- サイズと余白：最終的に切り出す1コマの解像度（例：128×128px）と、キャラクターが占める割合（縦の8割など）を決める。全コマで統一する。
- パレット：主要色のHex値を記録しておく。後でずれが生じたときに数値で比較できます。
- 輪郭の太さ：ドット調なら1px、イラスト調なら2pxなど、プロンプトに明示する。
AIでポーズ違いのコマを生成するときの設定
リファレンスコマができたら、それを入力として使える生成方法を選びます。テキストプロンプトだけで複数コマを作ると一貫性が低くなりやすいため、画像参照（Image-to-Image）または画像条件付き生成（ControlNetやReference機能）が使えるツールを選ぶのが現実的です。
Image-to-Imageを使う場合：リファレンスコマをベース画像として渡し、ポーズ説明をプロンプトで加えます。Denoise strength（変化量）を低め（0.5〜0.65程度）に設定すると、色や輪郭を引き継ぎながらポーズだけを変えやすくなります。強すぎると元コマに引っ張られてポーズが変わらず、弱すぎると一貫性が失われます。この数値はキャラクターの複雑さや使うモデルによって変わるため、0.1ずつ試して判断してください。
ControlNetを使う場合：OpenPoseなどのコントロールタイプでポーズのスケルトンを先に決め、それをコントロール画像として入力します。スケルトンを一コマずつ準備する手間はありますが、「何フレーム目でどの姿勢にするか」を数値で管理できるため、走りサイクルや攻撃モーションのように正確なタイミングが必要なアニメーションに向いています。BlenderやMixamo、あるいはWebで使えるポーズエディタでスケルトンを書き出してControlNetに渡す方法が広く使われています。
参照機能（Reference / IP-Adapter）を使う場合：一部のツールはリファレンス画像のスタイルやキャラクター外見を保持したまま別ポーズを生成する専用機能を持ちます。ControlNetほど厳密なポーズ指定はできませんが、準備が軽く、歩きや待機モーションのように差異が小さいアニメーションには十分対応できます。
生成後に必ずやる「一貫性チェック」の手順
生成が終わったコマを並べただけではシートは完成しません。見た目の統一を確認・修正するステップが必要です。
- 全コマを横一列に並べて目視する：人の目は差分検出が得意です。並べてスクロールするだけで色ずれや輪郭の膨張が目立ちます。
- パレットを参照値に近づける：Aseprite、Photoshop、GIMPなどで「選択範囲→色域選択」を使い、ずれた色だけを置換します。Aspriteはドット絵向けにパレット操作が直感的で、スプライト制作に広く使われています。
- 輪郭の太さを揃える：生成AIは同じ設定でも輪郭が太くなるコマが出ることがあります。太くなったコマだけを画像編集ソフトで0.5〜1px細らせ、他と揃えます。
- 透過処理を統一する：背景を切り抜くとき、コマごとにアンチエイリアス（エッジのぼかし具合）が変わることがあります。ゲームに組み込む前に全コマを同じ閾値でアルファ処理してください。
シートとしての組み立てと注意点
コマが揃ったら一枚のシートにまとめます。
コマの並べ方は等間隔グリッドを基本にしてください。コマサイズが128×128pxで8コマなら1024×128pxのシート、16コマなら1024×256pxなどです。コマによってサイズがばらけていると、ゲームのコード側で切り出し座標の計算が複雑になります。生成段階でサイズを揃えておくのが最も効率的です。
ツールはTexturePackerやShoebox（デスクトップ）、またはWebで動くGlue的なシートパッカーが利用できます。JSONやXMLでコマの座標情報を出力できるツールを選ぶと、ゲームエンジンへの組み込みが楽になります。
失敗しやすい点を一つ補足します。AIで生成したコマを切り抜くとき、「キャラクターの足が枠に入りきっていないコマ」が混ざることがあります。シート化した後では修正が大変なので、生成時に必ずキャラクター全身が余白付きで収まっているかを確認してからパッキングしてください。
品質とコストのバランスをどこで取るか
全コマをAI＋手修正で作るか、リファレンスコマだけAIで生成して残りを手動ドット絵にするか、あるいはフレームの少ないアニメーション設計に変えるかは、求めるクオリティと使える時間によって異なります。判断の目安として、以下を参考にしてください。
- 全コマをAI生成＋手修正、向いているケース：アニメーションコマが多い（12コマ以上）・イラスト調
- リファレンスのみAI、残りは手動、向いているケース：ドット絵スタイル・コマ数が少ない（4〜8コマ）
- ControlNetで厳密に管理、向いているケース：格闘ゲーム風など、フレーム単位で動きを設計したいとき
- コマ数を減らしてアニメーション設計を変える、向いているケース：開発時間を優先する・作りたいゲームに高品質アニメが必須でない
どの方針でも「リファレンスコマを先に固める」という最初のステップは変わりません。
次の行動
まずリファレンスコマを一枚だけ生成・確定させ、パレットのHex値とコマサイズをメモしてください。その設定を維持したままImage-to-ImageかControlNetで別ポーズを1〜2コマ試し、色と輪郭のずれを確認してから量産に進むと、後戻りを最小限に抑えられます。完成したスプライトシートを使ったブラウザゲームは、HTMLまたはZIPとしてアソバースに投稿・公開できます。
参考資料
- Aseprite 公式ドキュメント
- Stable Diffusion WebUI（AUTOMATIC1111）ControlNet 拡張機能 README
- TexturePacker 公式ドキュメント
