Cocos スプライトシート実践：1 枚の大画像を複数のアニメーションフレームに分割する完全ガイド

Midjourney や Stable Diffusion でキャラクターの連続フレームを生成した——立ち、走り出し、走る、止まる。8 フレームが 1 枚に整然と並んでいる。

一見、完璧に見える。

でも Cocos Creator に入れると問題が浮かぶ。8 枚の独立画像ではなく、1 枚の大画像だ。各ポーズをどう切り出す？ どう再生可能な Animation Clip にする？

plist もなく、手切りは遅すぎる。ここでは無料オンラインツールからプロ向けソフトまで 3 つの方法を紹介し、いちばん楽なルートを選べるようにする。

Sprite Sheet とは？ ゲーム開発で欠かせない理由

Sprite Sheet は国内では「精灵图」「图集」とも呼ばれる。複数の小画像を 1 枚にまとめ、設定ファイルで各フレームの位置とサイズを記録する仕組みだ。

例えば 8 フレーム、各 64×64 px のキャラアニメ。バラバラなら PNG が 8 枚。スプライトシートなら 512×64 や 256×256 の 1 枚にまとめ、plist や json で「1 フレーム目は (0,0)、2 フレーム目は (64,0)」と管理する。

なぜわざわざ？ 理由は 2 つ。

Draw Call の削減。GPU が描画命令を出す回数だ。8 枚バラなら、同じシーンでもテクスチャ切り替えのたびに 8 回処理が必要。1 枚にまとめれば 1 回で済み、レンダリング効率が上がる。モバイルのような制約のある環境では差がはっきり出る。

Cocos 公式ドキュメントによると、複雑シーンで Draw Call を数十回から数回に下げると 60 FPS を安定させやすい。小さなゲームで実測したところ、散在画像からアトラスへ替えただけで低スペック Android のカクつきが目に見えて減った。

メモリ断片化の低減。TexturePacker 公式テストでは、アトラスは散在画像より 30〜50% メモリを節約できる。散在は各画像が独立バッファを持ち、アライメントやフォーマット変換のオーバーヘッドが積み上がる。1 枚にまとめると割り当てがコンパクトになり、GPU 処理も楽になる。

設定ファイルの形式は？ Cocos Creator は plist、汎用ツールは json が多い。plist は Apple 系の XML 形式で、SpriteFrame 名・座標・サイズ・回転を記録する。json も同様だが簡潔で、多くのオンラインツールや Unity も対応している。

3 つの分割方法： どれがいちばん楽か

大画像 1 枚、設定ファイルなし——どう切る？ シーンに合わせて 3 案から選ぶ。

方法 1：TexturePacker（プロ向け）

ゲーム業界の定番。Cocos、Unity、SpriteKit など多数のエンジン向けにパック／分割に特化している。

メリット：MaxRects・Grid・Shelf などの自動レイアウト、PVRTC（iOS）・ETC（Android）のピクセル最適化、回転・トリム・透明圧縮、Cocos 用 plist 出力、数百枚の一括処理。

デメリット：有料。ベーシック $49、プロ $199。インディー小規模案件では費用対効果を要検討。Windows/macOS のみ（Linux 非対応）。

向いている場面：長期運用、大量アート、継続更新の商用ゲーム。本番リリースなら投資の価値あり。

方法 2：オンライン自動スライス

インストール不要。連結成分検出で透明背景の独立ブロックを見つけ、境界ボックスで切り出す。

試した中でおすすめは 2 つ。

ImgCrop（imgcrop.com）。スプライトシートを投げるとフレームを自動認識し、個別 PNG で出力。「視覚順序で名前付け」で上→下・左→右に並べ、リネームの手間を省ける。

画像ツールボックス（imgtool.net）。同様の機能に加え、バッチ処理とフォーマット変換も可能。

メリット：無料・高速。50 フレームのキャラで試したら 3 秒で揃ったファイル名付き出力。

デメリット：複雑レイアウト、重なり、非透明背景は苦手。ネット必須なので機密素材は避ける。

向いている場面：プロトタイプ、一度きり、少量素材。AI 生成の数枚アニメを切り出すだけなら十分。

方法 3：手動スライス（Photoshop / GIMP）

画像を開き、スライスツールで線を引いて 1 枚ずつ書き出す古典的手法。

メリット：不規則形状や特殊レイアウトを精密に制御できる。PS に慣れていれば数枚は大きな負担ではない。

デメリット：効率が低く、ミスしやすい。数十フレームは目が疲れる。素材差し替えのたびにやり直し。命名規則も崩れやすい。

向いている場面：特殊レイアウト、一度きり、手描き素材で自動ツールが効かない場合。

方法比較表

方法	コスト	効率	精度	向いている場面
TexturePacker	$49 〜	高	高	商用、長期運用
オンラインツール	無料	中	中	プロトタイプ、少量
手動スライス	時間	低	カスタム	特殊レイアウト、一度きり

実践：大画像からアニメまで 5 ステップ

「AI 生成キャラアニメ → Cocos Creator で再生可能な Animation Clip」を例に、流れを追う。

ステップ 1：素材の準備

Midjourney で走りアニメを生成したとする。プロンプト例：character running animation sprite sheet, 8 frames, transparent background。出力は 8 フレーム横並びの PNG。

確認は 2 点。

1. 背景透明。PNG で透明領域がきれいか。AI 出力は端にノイズが残ることがあるので PS やオンラインツールで除去。
2. フレーム順。左→右が動作の連続か。AI は順序が乱れることがあるので目視確認。

命名例：原画像を character_run_sheet.png に。

ステップ 2：分割方法を選ぶ

手早く試すなら ImgCrop（imgcrop.com）へ PNG をアップロード。

チェックする 2 項目：

• 「視覚順序で名前付け」——左→右で frame_01.png 〜 frame_08.png
• 「元サイズを保持」——AI の解像度を維持

分割 → ダウンロード。数秒で終わる。

TexturePacker なら、スプライトシートを読み込み「既存アトラス分割」モード（散在パックではない）で plist + SpriteFrame を出力。ピクセルフォーマット最適化もここでできる。

ステップ 3：Cocos Creator へインポート

Cocos Creator 3.8 LTS を開き、切り出し PNG を assets/sprites/character/ などへドラッグ。

各 PNG に .meta が自動生成される。プロパティで画像タイプが sprite-frame（デフォルト）か確認。

TexturePacker 出力（plist 付き）なら plist + PNG をまとめてドラッグ。Atlas として認識され、複数 SpriteFrame 子リソースができる。

ステップ 4：Animation Clip を作る

8 つの SpriteFrame を 1 本のアニメにする。

1. Hierarchy 右クリック → Create → Sprite でノード作成
2. Inspector → Add Component → Animation
3. assets 右クリック → Create → Animation clip、名前 character_run.anim
4. Clip を Animation コンポーネントの Clips へドラッグ

ここからが本番。

Window → Animation でエディターを開き、Sprite ノードを選択。8 つの SpriteFrame をトラックへドラッグすると 8 キーフレームができる。デフォルト間隔 1 秒は遅すぎる。

下部の Sample を 10 か 12 に。走りは約 10 fps が自然。再生ボタンでプレビューし、順番に切り替わるか確認。

ステップ 5：スクリプトで再生制御

Animation Clip ができたら、ゲーム内で呼び出す。

自動ループの例：

// CharacterController.ts
import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterController')
export class CharacterController extends Component {
    
    @property(Animation)
    animation: Animation | null = null;
    
    start() {
        if (this.animation) {
            // 走りアニメーションを再生、ループモード
            this.animation.play('character_run');
            // ループ再生に設定
            const state = this.animation.getState('character_run');
            if (state) {
                state.repeatCount = Infinity;
            }
        }
    }
}

Sprite ノードにアタッチし Animation 参照をバインド。起動と同時に走り始める。

走りから停止へ切り替える例：

playAnimation(name: string) {
    if (this.animation) {
        this.animation.crossFade(name, 0.2); // 0.2 秒でフェード、唐突さを防ぐ
    }
}

// 呼び出し：走るのを止める
this.playAnimation('character_idle');

crossFade で 0.2 秒かけてブレンドしないと、切り替えがカクッと見える。

よくあるつまずき

事前に知っておくとデバッグ時間を省ける。

つまずき 1：Cocos Creator 3.x が旧 TexturePacker を認識しない

TexturePacker 4.x 以前の plist を Cocos Creator 3.0+ へ入れると Atlas format not supported。

Cocos Creator 3.x はパーサー変更で 5.x 形式のみ。対処は 5.x へ上げるか、assets 右クリック → Create → Auto Atlas で散在画像から自動アトラス。

つまずき 2：フレーム名の順序が逆

frame_01.png 〜 と出ても順序が狂うことがある。AI 出力が右→左だと「視覚順序」命名で先頭が最終フレームになり、走りが逆再生に見える。

分割前に並び方向を確認。必要なら手動リネーム、PS バッチ改名、TexturePacker の空間ソート方向設定。

つまずき 3：透明ピクセルのトリム

Sprite の Trim は透明端を切り詰める最適化だが、フレームサイズが揃わないと位置が飛ぶ。例：64×64 と 64×70 が混在すると 2 フレーム目の基準点がずれる。

SpriteFrame の Trim Type を None か Custom にし、全フレームサイズを統一。

つまずき 4：Animation Clip の速度

デフォルト Sample 60 だと 8 フレームが 0.13 秒で終わり、瞬間移動のように見える。

走りは 8〜12 fps（10 か 12 が無難）、待機・呼吸は 6〜8 fps。キーフレーム間隔を手動ドラッグでも調整できる。

性能最適化： アトラス設計

アトラスサイズ

1 枚 2048×2048 px を超えない。低スペック端末の上限を超えるとエラーや画質低下の原因になる。

50 フレーム級の長アニメは 2 枚に分割。TexturePacker の Max Size を 2048 にすると超過分を自動で別アトラスに。

ピクセルフォーマット

• iOS：PVRTC。TexturePacker で PVRTC 4bpp ならサイズ約 1/4。
• Android：ETC1 / ETC2。広くサポートされ圧縮効率も良い。
• 汎用テスト：RGBA8888（非圧縮）。大きいが互換性最高。

本番はターゲット別に選ぶ。TexturePacker のマルチフォーマット出力で iOS / Android セットを一度に作れる。

Auto Atlas（動的合图）

assets 右クリック → Create → Auto Atlas に散在 SpriteFrame を入れると、ビルド時に自動アトラス化され Draw Call が減る。

素材が少ない案件向け。大量アートなら TexturePacker で事前パックした方が制御しやすい。

Draw Call 監視

Profiler でリアルタイム Draw Call を確認。同一キャラの全フレームを 1 アトラスにまとめれば理想は 1 回。アニメ切替で Draw Call が跳ねるなら、関連フレームを 1 枚に統合を検討。

まとめ

AI 生成スプライトシート 1 枚を Cocos Creator の Animation Clip にする流れは次の 5 段階。

1. 素材確認（透明背景・フレーム順）
2. 分割方法選択（手早さならオンライン、本番なら TexturePacker）
3. Cocos へインポート（PNG または Atlas）
4. Animation Clip 作成（ドラッグ・間隔調整・プレビュー）
5. スクリプト制御（ループ・切替・crossFade）

注意点はバージョン互換、命名順、Trim 設定、Sample 調整。この 5 ステップを踏めば、キャラがゲーム内で走り出す。