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

Midjourney や Stable Diffusion でキャラクターの連続フレームアニメーションを生成しました。すべてのフレームが1枚の画像に整然と並んでいます——立っている状態から走り出し、停止するまで、合計8フレーム。

この画像、一見完璧に見えます。

でも Cocos Creator にインポートすると問題が生じます：これは8枚の独立した画像ではなく、1枚の大きな画像です。どうやって各キャラクターの動作を切り出すのか？どうやって再生可能な Animation Clip を作るのか？

既存の plist 設定ファイルはなく、手動で切るには時間がかかりすぎます。この記事では3つのアプローチ——無料のオンラインツールからプロ向けソフトウェアまで——を紹介し、最も効率的な方法を選びます。

Sprite Sheet とは？ゲーム開発になくてはならない理由

Sprite Sheet、日本では「スプライトシート」や「アトラス」と呼ばれます。要するに、複数の小画像を1枚の大きな画像にまとめ、設定ファイルで各小画像の位置とサイズを記録する仕組みです。

例えば、キャラクターアニメーションがあり、8フレームの動作があり、各フレームが 64x64 ピクセルだとします。個別に保存すれば8つの独立した PNG ファイルになります。でもスプライトシートにすれば、この8フレームを 512x64 や 256x256 の1枚の画像にまとめ、plist や json ファイルで「最初のフレームは (0,0) の位置、2番目のフレームは (64,0)」といった情報を管理できます。

なぜこんな手間をかけるのか？2つの明確な理由があります。

Draw Call の削減。これが最も直接的なパフォーマンス向上です。Draw Call とは GPU が描画命令を呼び出す回数です。8枚の個別画像なら、同じシーンに表示されていても、GPU は8回処理する必要があります——テクスチャを切り替えるたびに新しいバインド操作が必要だからです。1枚の画像にまとめれば、Draw Call は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 プロフェッショナルツール

ゲーム業界の標準的な選択です。TexturePacker はアトラスのパッキングと分割に特化しており、Cocos、Unity、SpriteKit など多数のエンジンをサポートしています。

メリット：機能が充実しています。自動レイアウトアルゴリズム（MaxRects、Grid、Shelf）、ピクセルフォーマット最適化（iOS 用 PVRTC、Android 用 ETC）、回転、トリミング、透明領域の圧縮をサポート。エクスポートフォーマットも豊富で、Cocos の plist も直接使用可能。バッチ処理も便利——数百枚の画像を投入すれば、ワンクリックで完了します。

デメリット：有料です。ベーシック版は $49、プロ版は $199。機能は強力ですが、インディー開発者が小さなプロジェクトを作る場合、この投資が見合うかは分かりません。またソフトウェアのインストールが必要で、Windows/macOS はサポートしていますが、Linux はありません。

適用シーン：長期メンテナンスが必要なプロジェクト、大量のアートリソース、継続的な更新が必要な商用ゲーム。正式にリリースする製品を作っているなら、この投資は価値があります。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

方法2：オンライン自動スライスツール

ソフトウェアのインストール不要、Webページを開けばすぐ使えます。原理は連結成分検出アルゴリズム——透明背景内の独立したピクセルブロックを識別し、自動的にバウンディングボックスを計算して切り出します。

いくつか試しましたが、2つのおすすめを紹介します。

ImgCrop スマート分割（imgcrop.com）。スプライトシートをアップロードすると、中の独立したフレームを自動認識し、個別の PNG ファイルとしてエクスポートします。「視覚順序で名前付け」オプションがあり、上から下、左から右の順に並べ、自分で名前を変更する手間を省けます。

画像ツールボックス（imgtool.net）。同様の機能を持ち、バッチ処理とフォーマット変換もサポートしています。

メリット：無料、インストール不要、高速。50フレームのキャラクターアニメーションで試しましたが、3秒で結果が出力され、ファイル名も整然としていました。

デメリット：機能が限定的です。複雑なレイアウト、重複領域、非透明背景の場合は処理できません。またネットワークに依存するため、機密性の高い素材はアップロードしないでください。

適用シーン：迅速なプロトタイピング、1回きりの処理、素材量が少ない場合。AI で生成した数枚のアニメーション画像を切り出して使うだけなら、この方法で十分です。

方法3：手動スライス（Photoshop または GIMP）

最も原始的な方法：画像を開き、スライスツールで手動で線を引き、1つずつエクスポートします。

メリット：精密な制御が可能です。不規則な形状、特殊なレイアウト、特定領域をトリミングしたい場合——手動操作が最も柔軟です。PS のスキルがある人なら、数枚の画像を処理するのはそれほど手間ではありません。

デメリット：効率が低く、エラーが起きやすいです。数十フレームのアニメーションを切り出すと、目が疲れて間違いを犯しやすくなります。次に素材を変えるとまた最初からやり直しです。名前付けのルールも崩れやすいです。

適用シーン：特殊な要件、1回きりの処理、もともと PS のスキルがある場合。例えば、手描きの素材でレイアウトが不規則、自動ツールでは認識できない場合、手動スライスが唯一の選択肢です。

方法比較表

実践：大画像からアニメーションへの5ステップ

方法を選んだら、具体的にどうやるのか？「AI 生成のキャラクターアニメーション → Cocos Creator で再生可能な Animation Clip」を例に、完全なフローを見ていきます。

ステップ1：素材の準備

Midjourney でキャラクターの走りアニメーションを生成したと仮定します。プロンプトは character running animation sprite sheet, 8 frames, transparent background のようなものです。出力は PNG で、8フレームが横に並んでいます。

2つのことを確認します：

1. 背景の透明性。PNG フォーマットで、透明領域がきれいで、ノイズや透かしがないこと。AI 生成の画像はエッジに残留物があることがあるので、PS やオンラインツールでクリーンアップしてください。
2. フレーム数の確認。並び順を確認——左から右へ動作の連続フレームか？AI は出力順序が乱れることがあるので、目視で確認します。

名前付けのおすすめ：元画像を character_run_sheet.png とし、後で識別しやすくします。

ステップ2：分割方法の選択

オンラインツールが最速です。ImgCrop（imgcrop.com）を開き、PNG ファイルをアップロードします。

2つのオプションをチェック：

• 「視覚順序で名前付け」——左から右へ、エクスポートされたファイルは自動的に frame_01.png から frame_08.png と名前付けされます
• 「元のサイズを保持」——拡大縮小せず、AI 生成のピクセル精度を維持

分割をクリックし、結果をダウンロード。3秒で完了します。

TexturePacker がある場合、フローも同様です。ソフトウェアを開き、スプライトシートをインポートし、「既存アトラスの分割」モードを選択し（「個別画像のパッキング」ではなく）、plist と複数の SpriteFrame をエクスポートします。この方法はより専門的で、ピクセルフォーマットの最適化も可能です。

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

Cocos Creator 3.8 LTS（現在の長期サポートバージョン）を開きます。分割された PNG ファイルを assets ディレクトリにドラッグします。例えば、assets/sprites/character/ フォルダを作成します。

各 PNG がインポートされると、Cocos は自動的に .meta ファイルを生成します。プロパティパネルで、画像タイプが sprite-frame であることを確認します（デフォルトなので、変更不要）。

TexturePacker でエクスポートしたアトラス（plist ファイル付き）を使用する場合、plist と PNG 全体をドラッグします。Cocos は自動的に Atlas リソースとして認識し、複数の SpriteFrame サブリソースが含まれます。

ステップ4：Animation Clip の作成

これで8つの SpriteFrame が手元にあります。再生可能なアニメーションを作成します。

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

1. シーンに Sprite ノードを作成（Hierarchy 右クリック → Create → Sprite）
2. このノードに Animation コンポーネントを追加（Inspector → Add Component → Animation）
3. Animation Clip を作成：assets を右クリック → Create → Animation clip、名前を character_run.anim に
4. この Clip を Animation コンポーネントの Clips プロパティにドラッグ

次が重要な操作です：

Animation エディターを開きます（メニュー Window → Animation）。Sprite ノードを選択すると、エディターにアニメーショントラックが表示されます。

8つの SpriteFrame をアニメーショントラックにドラッグします。デフォルトで8つのキーフレームが作成され、各フレームが1つの画像に対応します。位置は自動的に並び、間隔は1秒——遅すぎます。

フレーム間隔を調整：エディター下部で Sample（サンプリングレート）を 10 または 12 に変更します。これは毎秒 10-12 フレームを意味し、アニメーションの再生速度が適切になります。走りアニメーションは約 10fps が自然です。

プレビュー：Animation エディターの再生ボタンをクリックすると、Sprite ノードの画像が順番に切り替わり、キャラクターが走り始めます。

ステップ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 は2つのアニメーションをスムーズに遷移させ、瞬間的なジャンプを防ぎます。このディテールは重要です。そうしないと、アニメーションの切り替えが非常に硬く見えます。

これらの落とし穴を経験したので、回避方法を紹介します

スプライトシートの処理にはいくつかの一般的な問題があり、事前に知っておくとデバッグ時間を大幅に節約できます。

落とし穴1：Cocos Creator 3.x は旧バージョンの TexturePacker を認識しない

TexturePacker 4.x 以前を使用している場合、エクスポートされた plist ファイルを Cocos Creator 3.0+ にインポートするとエラーが発生します：「Atlas format not supported」。

原因：Cocos Creator 3.x はアトラスパーサーが変更され、TexturePacker 5.x のフォーマットしか認識しません。

解決策：TexturePacker を 5.x にアップグレードします。または TexturePacker を使わず、Cocos 内蔵の Auto Atlas（自動アトラス機能）を使用します。Cocos Creator で、assets フォルダを右クリック → Create → Auto Atlas、個別画像をドラッグすると自動的にアトラスが生成されます。

落とし穴2：フレーム名の順序が乱れている

オンラインツールで分割後、ファイル名は frame_01.png、frame_02.png……となりますが、順序が間違っていることがあります。例えば、AI 生成の画像でフレームが右から左に並んでいる場合、ツールが「視覚順序」で名前を付けると、最初のフレームが動作の最後のフレームになります。

アニメーションにインポート後、キャラクターの走りが「逆再生」になります——後退しているように見えます。

解決策：分割前にフレームの並び方向を目視で確認します。右から左に並んでいる場合、手動で名前を変更するか、PS でバッチ名前変更を行います。TexturePacker には「空間ソート」オプションがあり、方向をカスタマイズできます（上から下、左から右）。

落とし穴3：透明ピクセルのトリミング問題

Sprite コンポーネントには Trim プロパティがあり、デフォルトで画像のエッジの透明ピクセルをトリミングします。これは本来、レンダリングをコンパクトにする最適化設計です。

しかし、トリミングが問題を引き起こすことがあります。例えば、キャラクターアニメーションの各フレームのサイズが完全に一致していない——最初のフレームは 64x64、2番目のフレームは腕が伸びているため 64x70 になります。トリミング後、2番目のフレームのバウンディングボックスが変わり、アニメーション再生時にキャラクターの位置が飛びます。

解決策：SpriteFrame のプロパティで、Trim Type を None（トリミングなし）または Custom（カスタムトリミング）に変更します。すべてのフレームのサイズを統一し、位置のドリフトを防ぎます。

落とし穴4：Animation Clip のフレーム間隔が正しくない

初心者によくある問題：Animation Clip の再生が速すぎるか遅すぎる。

デフォルトのサンプリングレートは 60、毎秒 60 フレームです。8フレームの画像しかない場合、この速度では 0.13 秒で再生が終わります——キャラクターの走りが瞬間移動のように見えます。

KiloClaw - 企業向けマネージド OpenClaw、AI エージェントのオーケストレーションとスマートルーティングを加速

今すぐ始める →広告

解決策：Sample パラメータを調整します。走りアニメーションは一般的に 8-12fps、10 または 12 に変更します。スローモーションアニメーション（呼吸、待機など）の場合、6-8fps で十分です。

Animation エディターで各フレームの長さを手動で調整することも可能です。キーフレームを選択し、位置をドラッグして、間隔を精密に制御します。

パフォーマンス最適化：アトラスの設計方法

スプライトシートができたら、パフォーマンスをさらに最適化できます。

アトラスサイズの推奨

1枚のアトラスは 2048x2048 ピクセルを超えないでください。多くの低スペックデバイスのテクスチャ上限です。このサイズを超えると、一部のデバイスでエラーや画質の低下が発生します。

キャラクターアニメーションのフレームが多い場合（例えば 50 フレームの攻撃アクション）、2枚のアトラスに分割することを検討してください。TexturePacker は自動分割が可能で、Max Size を 2048 に設定すると、超過分は自動的に新しいアトラスが作成されます。

ピクセルフォーマットの選択

プラットフォームごとに最適なフォーマットがあります：

• iOS：PVRTC（Apple 専用圧縮フォーマット）。TexturePacker でエクスポート時に PVRTC 4bpp を選択すると、ファイルサイズは元の 1/4 に圧縮されます。
• Android：ETC1 または ETC2。ほとんどのデバイスがサポートしており、圧縮効率も良好です。
• クロスプラットフォーム汎用：RGBA8888（非圧縮）。ファイルサイズは大きいですが、互換性は最高で、テスト段階に適しています。

正式リリース時は、ターゲットプラットフォームに応じて対応するフォーマットを選択します。TexturePacker は「マルチフォーマットパッキング」をサポートしており、iOS と Android の2つのアトラスセットを一度に生成できます。

動的アトラス機能

Cocos Creator には Auto Atlas 機能があり、シーン内に散らばっている SpriteFrame を自動的にバッチレンダリングできます。

有効化方法：assets を右クリック → Create → Auto Atlas、すべての個別画像をドラッグします。ビルド時に自動的にアトラスが生成され、Draw Call が自動的に削減されます。

この機能はリソースが多くないプロジェクトに適しています。アート素材が多い場合は、TexturePacker で事前にパッキングすることを推奨します。コントロール性が高いためです。

Draw Call の監視

スプライトシートが本当に最適化されたかどうかを確認するには？Draw Call 数を見ます。

Cocos Creator の開発者ツールで、Profiler パネルがリアルタイムの Draw Call を表示します。シーンが複雑な場合、個別画像とアトラスの数値の差を比較します。

理想的な状態：同じキャラクターのすべてのアニメーションフレームが1つのアトラス内にあり、Draw Call は1回を維持。キャラクターが異なるアトラスにある場合、アニメーション切り替え時に Draw Call がジャンプします——この場合、関連するアニメーションを1枚の画像に統合することを検討してください。

まとめ

AI で生成されたスプライトシート1枚から、Cocos Creator で再生可能な Animation Clip まで、フローは複雑ではありません：

1. 素材の確認（透明背景、フレーム順序が正しい）
2. 分割方法の選択（オンラインツールが最速、TexturePacker が最もプロフェッショナル）
3. Cocos Creator へのインポート（PNG または Atlas フォーマット）
4. Animation Clip の作成（フレームをドラッグ、間隔を調整、プレビュー）
5. スクリプトで再生制御（ループ、切り替え、遷移）

ツールの選択：迅速なプロトタイピングはオンラインツール、商用プロジェクトは TexturePacker。落とし穴の警告：バージョン互換性、名前順序、トリミング設定、フレーム間隔調整。

これらのステップを完了すれば、キャラクターアニメーションがゲーム内で再生されるようになります。