スプライトシート · 実測
GIF からスプライトシートへ: 取り込む前に AI に全フレームを確かめてもらう
GIF はアニメーションを共有するには便利ですが、ゲームに組み込むには向いていません。Godot、Unity、Phaser などのゲームエンジンが必要とするのはスプライトシートです。すべてのフレームを同じ大きさのセルに並べ、絵の本来のピクセルサイズで保存し、各フレームが画面に表示される時間を添えたものです。さらに GIF は、ゲームの中でアニメーションがループするまで問題を隠します。繰り返されたフレーム、1 ピクセルずれたフレーム、間違った位置の間などです。
2026年9月30日、スライムが跳ねる 7 フレームの GIF を Ciyo Agent に渡し、取り込めるシートを頼みました。エージェントはすべてのフレームを読み、ループの問題を三つ見つけ、頼むとそれを直しました。どのファイルも私たち自身で確かめました。
ゲームエンジンが GIF に求めるもの
必要なものは三つです。本来の大きさのフレームを同じ大きさのセルに並べたもの、フレームの大きさと枚数、そして各フレームの表示時間です。本来の大きさとは、描いた人が描いたときの大きさです。ピクセルアートの GIF の多くは、ソーシャルメディアできれいに見えるように 4×、6×、8× で書き出されています。その大きさのまま取り込むとメモリを無駄にし、拡大縮小したときにぼやけます。
Ciyo のエージェントは、添付した GIF のすべてのフレームを読めます。これは大切なことです。GIF を通常の速度で見ている人は、1 ピクセルずれたフレームに気づけないからです。
| 頼むもの | 理由 |
|---|---|
| 本来のピクセルサイズ | 絵の 1 ピクセルがファイルの 1 ピクセル。整数倍ならどの拡大率でもくっきり |
| 同じ大きさのセルを一列に | エンジンはセルの大きさでシートを切り分ける |
| 透明な背景 | カラーキーが不要で、縁ににじみが出ない |
| フレームごとの表示時間 | GIF のフレームは遅延がばらばらなことが多い |
| 全フレームの確認 | 重複フレームやぶれは、ループを再生して初めて見える |
テスト用の GIF: 架空の横スクロールゲームのスライムのジャンプ
架空の横スクロールアクションゲーム Tumblebrook のために、小さなテスト用 GIF を作りました。緑のスライムがつぶれ、跳ね、着地するアニメーションです。大きさは 192 × 192 ピクセル、7 フレーム、4 色で、実際には 32 × 32 の絵をちょうど 6× で書き出したものです。遅延は、よくあるように 80 から 200 ミリ秒までばらついています。
エージェントが気づくかどうかを見るため、フレームの一つをわざと絵のピクセルで 1 つ右にずらしました。また GIF の最後には最初のフレームのコピーが入っていましたが、これは意図したものではありませんでした。
この GIF は、私が Godot で作っている小さな横スクロールゲーム Tumblebrook のジャンプのアニメーションです。取り込めるスプライトシートにしてください: 一列、同じ大きさのセル、透明な背景、絵の本来のピクセルサイズ（6x の書き出しサイズではなく）。作る前にすべてのフレームを見て、フレーム数、各フレームの遅延、ループしたときにおかしく見えそうな点を教えてください。シートと、フレームの大きさと表示時間を書いた JSON ファイルをボードに保存してください。エージェントが 7 フレームの中に見つけたもの
エージェントは 192 が 6 で割り切れることを確かめ、本来の大きさが 32 × 32 であることを確認し、224 × 32 のシートを作りました。一列に七つのセルが並び、背景は透明で、縁に混ざったピクセルはありません。遅延は 120、80、80、80、200、80、140 ミリ秒と一覧にしました。
続いて問題を三つ報告し、三つとも本物でした。最後のフレームは “pixel-for-pixel the same as frame 0”（フレーム 0 と 1 ピクセル単位でまったく同じ）で、そのため休みのポーズが 260 ms 画面に残り、“the hop will seem to stall at the landing”（ジャンプが着地で止まったように見える）とのことでした。フレーム 5 はフレーム 3 を “moved 1 px right and 2 px down”（右に 1 px、下に 2 px 動かした）コピーで、中心が 16 ではなく x = 17 にあるため、スライムが横にぴくっと動きます。さらにフレーム 5 は落ちる途中で上昇のポーズを使い回していたため、下の縁が着地に向かって 4 ピクセル跳んでいました。
できなかったことも伝えてきました。ボードは画像と動画しか受け付けないので、.json ファイルはそこに保存できませんでした。代わりに JSON をチャットに貼り付けることを提案しました。
ループを直してから書き出す
直したシートを頼みました。エージェントは何かを描く前に既存のフレームを調べ、輪郭線、角、陰影、ハイライトのルールをつかみました。自分の誤りも正し（“Highlight sits one pixel further in than I assumed”、つまりハイライトは思っていたより 1 ピクセル内側にある）、元のフレームのうち三つを 1 ピクセル単位で作り直して、そのルールが正しいことを示しました。
直したシートは六フレームです。重複したフレームはなくなり、どのフレームも中心が x = 16 にそろい、13 × 19 ピクセルの縦に伸びた新しい落下のポーズが、4 ピクセル跳ぶ代わりに 3 ピクセル下がって着地のフレームにつながります。ループ一回は 640 ms になりました。エージェントは、休みのポーズが短くなった（260 ms から 120 ms）ので、ジャンプがせわしなく感じられるかもしれないと指摘しました。クレジットは使いませんでした。
はい、お願いします: 直したシートを作ってください。重複したフレームを外し、フレーム 5 を中心に戻し、着地の前には使い回した上昇のポーズではなく、ちゃんと縦に伸びた落下のポーズを入れてください。同じ 4 色と 32x32 のセルはそのままにしてください。そのあと、Godot ですぐ使える JSON（フレームの大きさ、フレーム数、フレームごとの表示時間）をここに貼り付け、直したループを確認できるように 6x のプレビュー GIF を保存してください。JSON と Godot の設定
エージェントは JSON のブロックを貼り付けました。画像の名前、シートの大きさ（192 × 32）、フレームの大きさ（32 × 32）、一列に並んだ六フレーム、各フレームの領域とミリ秒単位の表示時間、そして Godot 用の相対的な表示時間が入っています。どの遅延も 40 ms の倍数なので、エージェントは 25 フレーム毎秒の SpriteFrames アニメーションで相対的な表示時間を 3、2、2、2、5、2 にすること、そしてピクセルがくっきり保たれるように最近傍のフィルタリングを使うことを勧めました。
JSON はプロジェクトの中で PNG の隣に保存してください。エンジンが別の形式を使う場合は、その形式を名前で指定して頼んでください。大切なのはフレームの一覧です。
どのシートでも、取り込む前に五つの確認
シートが AI から来たものでも、変換ツールや自分の書き出しから来たものでも、これらの確認でよくある問題を見つけられます。最後の列は、直した Tumblebrook のシートの結果です。
| 確認項目 | 方法 | 直したシート |
|---|---|---|
| 本来の大きさ | GIF の大きさ ÷ 書き出しの倍率が整数になる | 192 ÷ 6 = 32 |
| 重複フレームがない | 最後のフレームを最初のフレームと比べる | 重複フレームを削除済み |
| ぶれがない | どのセルでも中心（または足の線）が同じ | 六つとも中心 x = 16 |
| パレット | 色を数える。背景は透明 | 4 色と透明 |
| タイミング | 遅延をすべて書き出し、休みのポーズの長さを確かめる | ループ 640 ms、休み 120 ms |
2026-09-26に投稿。投稿者は中国語で、AI で生成したスプライトシートのよくある悩みを挙げています。フレームごとにキャラクターが変わる、緑やマゼンタの背景が縁ににじみを残す、フレームがグリッドにそろわない、の三つです。そしてこの作業にオープンソースのツール sprite-gen を勧めています。これは別の製品で、ワークフローも異なります。私たちのテストでも同じ三つのリスクが現れ、一つずつ確認しています。
ゲームの絵の次の一歩
きれいなシートがエンジンに入ったら、スタイルがそろうように同じフレームから次のアニメーションを描き、プレイヤーが見る大きさでスプライトを確かめてください。
GIF からスプライトシートへ
GIF の本来のピクセルサイズはどうすればわかりますか
GIF の大きさを書き出しの倍率で割り、結果が整数になるか確かめてください。私たちの 192 × 192 の GIF は、32 × 32 の絵を 6× にしたものでした。エージェントは、すべてのフレームがぴったり縮小できることを確認しました。
ループが止まったり、ぴくっと動いたりするのはなぜですか
たいていは、最後に重複したフレームがある（休みのポーズが二倍の長さ画面に残る）か、中心から 1 ピクセルずれたフレームがあるかのどちらかです。私たちのテストでは、エージェントがすべてのフレームを比べて両方を見つけました。
Ciyo のボードに JSON ファイルを保存できますか
いいえ。2026年9月30日の時点で、ボードが受け付けたのは png、jpg、webp、gif、mp4、mov だけでした。そのためエージェントは、保存してもらえるように JSON をチャットに貼り付けました。
費用はいくらでしたか
私たちのテストでは無料でした。フレームの読み取り、二つのシートの作成、新しいフレームとプレビュー GIF の作画は、すべて画像モデルを使わずにエージェントの作業スペースで行われました。
Ciyo で GIF を確かめる
アニメーションを添付し、使っているエンジンと書き出しの倍率を Ciyo Agent に伝え、シートを作る前にすべてのフレームを確かめるよう頼みましょう。