スプライトシートの作り方 — 総合ガイド
スプライトシートとは何か、どう作るのか、ゲームエンジンでどう使うのか。基礎知識から実践テクニックまで、この1ページですべてわかる総合ガイドです。
スプライトシートとは？
スプライトシートとは、複数の画像を1枚のテクスチャにまとめたファイルです。ゲームやWebアプリのパフォーマンスを大幅に向上させる基本テクニックです。
パフォーマンス向上
1枚の画像をまとめて読み込むことで、HTTPリクエストとGPUのテクスチャ切り替えを大幅に削減。描画処理が高速化します。
スムーズなアニメーション
シート内の各領域がアニメーションの1フレームに対応。ゲームエンジンがフレームを順番に切り替えることで、滑らかな動きを表現します。
メモリ効率
GPUは少数の大きなテクスチャを効率的に処理します。スプライトをパッキングすることで、個別ファイルのオーバーヘッドやパディング分のメモリ浪費を抑えられます。
アセット管理の簡素化
関連するスプライトが座標マップ（JSON/XML/CSS）と共に1ファイルに収まり、バージョン管理や配布がシンプルになります。
スプライトシートを作る4つの方法
ワークフロー、予算、技術レベルに合った方法を選びましょう。
オンラインツール（無料・最速）
Sprite Sheet Makerに画像をアップロードし、ドラッグ＆ドロップで配置。パディングやレイアウトを調整して、PNG＋JSON/CSS/XML付きのZIPをダウンロード。インストール不要、ブラウザだけで完結します。
TexturePacker（プロフェッショナル）
業界標準のデスクトップアプリ。高度なパッキングアルゴリズム、メッシュスプライト、マルチパック、主要ゲームエンジンすべてに対応しています。無料版あり（機能制限付き）、Pro版は$40。
Aseprite / Photoshop（手動）
お好みのツールでフレームを1枚ずつ制作。Asepriteにはスプライトシート書き出し機能が内蔵されています。Photoshopでは手動配置またはスクリプトが必要。ピクセル単位の精密な制御が必要な場合に最適です。
コード（Python / Node.js）
Python PIL/PillowやNode.js Canvasでプログラム的に画像を結合。CI/CDパイプライン、バッチ処理、独自のパッキングロジックが必要な場合に最適です。
ステップバイステップ：オンラインでスプライトシートを作成
ソフトウェアのインストール不要 — ブラウザだけで最速でスプライトシートを作成する方法。
ステップ1：フレームをアップロード
PNG/JPG/WebP画像をアップロードエリアにドラッグ＆ドロップ。ファイル名順に自動ソートされます。GIFをアップロードしてフレームを自動抽出することも可能です。
ステップ2：配置と設定
グリッド・水平・垂直レイアウトから選択。列数、フレーム間のパディング、背景色を設定できます。「均一サイズ」を有効にすると、全フレームが同じサイズにスケーリングされます。
ステップ3：プレビューと調整
設定変更がリアルタイムでスプライトシートに反映されます。アニメーションプレビューでフレーム順序とタイミングを検証し、グリッドオーバーレイで配置を確認できます。
ステップ4：ZIPをダウンロード
「ZIPダウンロード」をクリックすると、スプライトシートPNGと選択した形式（JSON Hash、JSON Array、CSS、XML TextureAtlas）の座標ファイルをまとめて取得できます。
ゲームエンジンでのスプライトシートの使い方
主要なゲームエンジンやWebフレームワークごとに、スプライトシートの読み込みとアニメーション方法を紹介します。
Phaser（JavaScript）
this.load.atlas()でJSON Hashを読み込み、this.anims.create()でアニメーションを定義。PhaserはJSON Hash・JSON Arrayの両フォーマットをネイティブサポートしています。
Unity（C#）
PNGをインポートしSprite Modeを「Multiple」に設定。Sprite Editorでスライス後、Animatorコンポーネントでアニメーション化。TexturePackerのUnityプラグインも利用可能です。
Godot（GDScript）
AnimatedSprite2DとSpriteFrames、またはSprite2DとAnimationPlayerを使用。Godot 4ではRegionを有効にしてアトラステクスチャとして利用できます。
Pixi.js（JavaScript）
PIXI.Assets.load()でJSONアトラスを読み込み、テクスチャ配列からAnimatedSpriteを作成。PhaserとJSON形式が共通なので、同じアセットを使い回せます。
CSSスプライト（Web開発）
background-imageでスプライトシートを指定し、background-positionで個別アイコンを表示。HTTPリクエストを削減し、Webページの読み込みを高速化する定番テクニックです。
スプライトシートのベストプラクティス
デバイスやゲームエンジンを問わず最適に動作するスプライトシートを作成するためのガイドラインです。
2のべき乗サイズを使用
GPUテクスチャは256、512、1024、2048、4096ピクセルなどの寸法で最も効率的に動作します。古いハードウェアでのテクスチャパディングによるメモリの無駄を避けられます。
1〜2pxのパディングを追加
フレーム間のパディングはテクスチャブリーディング（隣接フレームがにじむアーティファクト）を防ぎます。特にバイリニアフィルタリング使用時に重要です。
フレームサイズを統一
すべてのアニメーションフレームを同じサイズにすると、描画処理が安定します。サイズが異なる場合は「均一サイズ」オプションで正規化できます。
ファイル名は論理的に
「walk_001.png」「walk_002.png」のような命名規則を使うと、自然な順序でソートされます。インポート時にフレームが正しい順序で並びます。