ドット絵やキャラクターの連番画像を1枚のスプライトシートにまとめ、座標データ（JSON）も同時に出力します。 逆に1枚のシートをコマごとの画像に分割することも可能です。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しくスプライトシート作成・分割ツールとは？ゲーム制作向けのコマ画像管理
本ツールは、2Dゲームのキャラクターアニメーションに使う連番画像（コマ画像）をブラウザ上で1枚のスプライトシートにまとめ、各コマの座標データ（JSON）も同時に出力できる無料ツールです。逆に、すでに作られている1枚のシート画像をコマごとの連番画像に分割することもできます。
サイト内には、Webサイトのアイコン表示を高速化するためのSVG形式の「スプライット作成ツール」も用意していますが、本ツールはドット絵やキャラクターのラスター画像（PNG）を対象とした、2Dゲーム制作に特化したツールです。コマ間の余白（スペーシング）やシート外周の余白（マージン）を個別に設定できるほか、アニメーションのプレビュー再生（ループ・往復再生）にも対応しているため、書き出し前にモーションのつながりをその場で確認できます。
個人でゲームを開発している方、ドット絵・アニメーションの制作者、ゲーム制作を学ぶ学生の方まで、 Unity・Phaser・Pixi.js・Godotなど、お使いのエンジンを問わずそのまま活用いただけます。
こんなシーンで便利です
キャラクターの歩行・攻撃モーションをシートにまとめる
描き上げた連番のコマ画像をアップロードして並び順を整え、1枚のスプライトシートとして書き出します。座標JSONも同時に出力されるため、エンジン側への組み込みがスムーズです。
配布・購入したスプライトシートをコマごとに分解したい
素材サイトで入手したシート画像や、他のツールで作られたシートを、列数・行数やコマサイズを指定するだけでコマごとの連番画像に分割できます。
書き出し前にアニメーションのつながりを確認したい
コマ画像を並べた状態でその場に再生プレビューができるため、歩行モーションの繋ぎ目が不自然でないか、コマ数が適切かを、ゲームエンジンに読み込む前に確認できます。
ゲーム制作を学ぶ学生の教材・練習素材作りに
フリー素材の連番画像をスプライトシート化する練習や、授業・独学でのゲーム制作演習用に、座標データの仕組みを実際に手を動かしながら理解する教材としても使えます。
使い方は簡単 4ステップ
- 「作成（結合）」か「分割」のモードを選びます。
- 作成モードでは連番画像を複数アップロードして並び順を整え、分割モードでは1枚のシート画像をアップロードします。
- 列数・コマサイズ・余白（マージン／スペーシング）・トリミングなどの設定を調整しながら、プレビューで仕上がりを確認します。
- 「アニメーションプレビュー」でコマのつながりを再生確認したら、シート画像（PNG）と座標データ（JSON）をダウンロードします。
※分割モードでは、シート画像の上にスライス用の格子線を重ねて表示するため、コマの境界がずれていないかを目で確認しながら数値を調整できます。
ご利用時の注意点
- 連番画像をアップロードする際は、ファイル名に「001」「002」のような連番を含めておくと、自動的に正しい順序で並び替えられます。順序がずれる場合は一覧から手動で並び替えてください。
- 分割モードで余白（マージン・スペーシング）の数値を誤ると、隣のコマの一部が混ざって切り出されることがあります。プレビューの格子線がコマの境界に正しく沿っているかを必ず確認してください。
- 画像の解像度が大きい場合やコマ数が非常に多い場合、処理やプレビュー描画に時間がかかることがあります。
- 完全無料・安全：アップロードした画像はすべてブラウザ内（Canvas処理）のみで扱われ、外部サーバーへ送信されることはありません。
ドット絵・2Dゲームでよく使われるコマサイズの目安
キャラクターのコマサイズを決める際によく使われる解像度と、代表的な用途の目安です。
| コマサイズ（px） | 主な用途 | 特徴 |
|---|---|---|
| 16×16 | レトロ調のドット絵キャラクター | ファミコン風・最小限のディテール |
| 32×32 | 一般的な2Dアクション・RPGのキャラクター | ドット絵表現として扱いやすい標準サイズ |
| 48×48 | やや大きめのキャラクター・ボス敵 | 表情やディテールを増やしやすい |
| 64×64 | 見下ろし型アクション・シミュレーションのキャラクター | 高精細なドット絵表現に向く |
| 128×128以上 | 高解像度イラスト調のキャラクターアニメーション | ハイエンド向け・ファイル容量が大きくなりやすい |
【コマサイズ選びのポイント】
コマサイズは大きいほど表現力が増しますが、シート全体の解像度とファイル容量も比例して大きくなります。配信プラットフォームやゲームエンジンの推奨容量を踏まえて、過不足のないサイズを選びましょう。
※本ツールの「作成（結合）」モードでは、アップロードした画像の最大サイズに合わせて自動でコマサイズを揃えることも、固定サイズを指定することも可能です。
スプライトシートの基礎知識と、ゲーム制作で失敗しないための考え方
スプライトシートを扱う上で押さえておきたい、仕組みと実務上の注意点を解説します。
結論：スプライトシートは「1枚にまとめて読み込み負荷を減らす」ための仕組み
スプライトシートとは、アニメーションの各コマを1枚の画像ファイルに敷き詰めてまとめたものです。
ゲームエンジンが画像ファイルを読み込む際には、ファイル数が増えるほど処理のオーバーヘッドが大きくなるため、コマを1枚にまとめて座標データ（どの位置に何個目のコマがあるか）で管理することで、読み込み回数を減らし、描画パフォーマンスを向上させることができます。本ツールが出力する座標JSONは、この「位置の地図」の役割を果たします。
連番ファイル名の命名規則とアニメーションの並び順
連番画像をアップロードする際は、「walk_001.png」「walk_002.png」のように、数字部分をゼロ埋めした連番にしておくことで、ツールが文字列順ではなく数値の大小で正しく並び替えられます。
ゼロ埋めをしていない「1」「2」...「10」のような命名だと、文字列としては「1」「10」「2」の順に並んでしまう場合があるため、並び替え結果を必ずプレビューで確認し、必要であれば手動で順序を調整してください。
余白（パディング・マージン）を入れる理由とテクスチャブリーディング対策
コマとコマの間に余白を入れずにぴったり敷き詰めると、ゲームエンジンが画像を縮小・拡大表示する際に隣のコマの色がわずかににじんで表示される「テクスチャブリーディング」という現象が起きることがあります。
コマ間に数ピクセルの余白（スペーシング）を設けておくことで、この現象を防ぎやすくなります。本ツールの作成モードでは、この余白をピクセル単位で指定できます。
代表的な2Dゲームエンジンでのスプライトシートの扱い方
Phaser3やPixi.jsでは、座標データをもとにテクスチャの一部分だけを切り出して描画する「フレーム」という仕組みでスプライトシートを扱います。Unityでは、スプライトエディタ上でシート画像をスライスし、スライス位置を数値で調整できます。Godotでも同様に、AnimatedSprite2DやSpriteFramesリソースでシート画像をコマ単位に分割して管理します。いずれのエンジンも、本ツールが出力する座標情報（X・Y・幅・高さ）があれば、スライス作業の参考値としてそのまま活用できます。
よくある失敗と対策
コマ間に余白を入れずに敷き詰め、テクスチャブリーディングが発生する
コマとコマの間を完全に密着させてシートを作成した結果、ゲームエンジン上で拡大縮小表示をした際に隣のコマの色がにじんで表示されてしまう失敗です。特にキャラクターの輪郭部分に色の違いがあると目立ちやすくなります。
💡 対策・解決策を見る▼
連番ファイル名の並び順を考慮せずアップロードし、アニメーションの順番が崩れる
「1.png」「2.png」...「10.png」のようにゼロ埋めしていない連番でアップロードした結果、文字列順に並び替えられてしまい、「1」「10」「2」という意図しない順序でシートが作成されてしまう失敗です。
💡 対策・解決策を見る▼
座標JSONを保存し忘れ、後からコマの位置を手打ちする羽目になる
シート画像（PNG）だけをダウンロードして満足してしまい、各コマの座標データを控え忘れた結果、エンジン側への組み込み時に画像を見ながら座標を1つずつ手打ちすることになってしまう失敗です。
💡 対策・解決策を見る▼
分割時のマージン・スペーシングの数値を誤り、隣のコマの一部が混ざって切り出される
配布されているスプライトシートを分割する際、実際に設定されている外周の余白やコマ間の余白の数値を把握しないまま分割を実行し、コマの端に隣のコマの一部が混入した状態で切り出されてしまう失敗です。
💡 対策・解決策を見る▼
シートの解像度が2のべき乗でないため、エンジン上で余計な余白が自動付与される
一部のゲームエンジンやグラフィックスAPIでは、テクスチャの解像度が2のべき乗（256、512、1024など）でない場合に、内部的に余白を付与して2のべき乗サイズに自動補正されることがあり、意図しない表示崩れやメモリ使用量の増加につながる失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.スプライトシートとは何ですか、なぜ1枚にまとめる必要があるのですか
A. スプライトシートとは、歩行・攻撃・ジャンプといったアニメーションの各コマ（連番画像）を、1枚の画像に敷き詰めてまとめたものです。ゲームエンジンは画像を1枚読み込むごとに処理コストがかかるため、コマごとに別々のファイルとして読み込むより、1枚のシートにまとめて座標データで切り出す方が、読み込み負荷が下がり描画も高速になります。Unity、Phaser、Pixi.js、Godotなど主要な2Dゲームエンジン・フレームワークで広く使われている基本的な仕組みです。
Q.連番画像からシートを作成する際、座標JSONはどのような形式で出力されますか
A. 各コマのファイル名・X座標・Y座標・幅・高さに加え、シート全体の列数・行数・1コマあたりのサイズ・シート全体の幅と高さをまとめたシンプルな構造のJSONで出力されます。特定のゲームエンジン専用フォーマットに縛られない汎用的な形式のため、Unity・Phaser・Pixi.jsなど、お使いのエンジンの読み込み処理に合わせて加工・変換しやすい内容になっています。
Q.サイト内の「SVGスプライット作成ツール」とは何が違うのですか
A. サイト内の既存のSVGスプライットツールは、Webサイトのアイコンをひとまとめにして表示を高速化するための、ベクター形式（SVG）に特化したツールです。一方で本ツールは、ドット絵やキャラクターアニメーションのコマ単位のラスター画像（PNG）を対象とした、2Dゲーム制作向けのスプライトシートに特化しています。対象とする画像形式と用途（Webアイコン表示か、ゲームのアニメーション素材か）が異なりますので、用途に応じて使い分けてください。
Q.シートを分割する際、余白（マージン・スペーシング）がある場合はどうすればいいですか
A. 分割モードには、シート全体の外周にある「マージン（外周の余白）」と、コマとコマの間にある「スペーシング（コマ間の余白）」をそれぞれ個別に数値で設定できる欄があります。実際にスライスされる格子線をシート画像の上に重ねてプレビュー表示しますので、コマの境界がずれていないかを目で確認しながら数値を微調整できます。
Q.Unity・Phaser・Pixi.jsなど特定のゲームエンジンの形式に直接対応していますか
A. 特定のエンジン専用バイナリ形式（Unityのメタファイルなど）への直接出力は行っていませんが、出力される座標JSON・シート画像はどのエンジンでも読み込みやすい汎用的な内容です。Phaser3やPixi.jsであれば、出力されたX・Y・幅・高さの情報をもとにテクスチャフレームを登録するコードを容易に書くことができ、Unityであればスプライトエディタ側でスライス位置を手動設定する際の数値の参考として活用できます。
Q.アップロードした画像は外部のサーバーに送信されますか
A. 一切送信されません。画像の結合・分割・座標計算・プレビュー描画は、すべてお使いのブラウザ内（Canvas処理）で完結しています。未公開のゲーム素材や制作中のキャラクター画像でも、外部に漏れる心配なく安心してご利用いただけます。
Q.アニメーションのプレビュー再生はどのように使えますか
A. 作成モードではアップロードした連番画像を、分割モードでは切り出したコマ画像を、それぞれ指定したフレームレート（FPS）で順番に再生できます。再生・一時停止に加え、最後のコマまで来たら最初に戻る「ループ再生」と、逆再生しながら往復する「往復（ピンポン）再生」にも対応しているため、歩行モーションなどのつながりを書き出し前にその場で確認できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。