スプライトシート作成ツール比較 · サイズ・正確さ・重複を実測
スプライトシートを無料で作る4つの方法を、実在のCC0フレームセット5つにトリムあり・余白2の同じ条件で実行しました。CodeAndWebの無料Webパッカー、GAPToolsのテクスチャパッカー、free-tex-packerのnpmコア0.3.9、そしてStudioのPack & Exportです。どれもフレームをPNGとデータファイルにまとめますが、シートの大きさ、フレームがピクセル単位でそのまま戻るか、重複フレームの扱い、ページサイズの上限を守るかが違います。
4つの無料パッカーを、同じ5つのCC0フレームセットに、トリムあり・間隔2・最大4096で実行しました。CodeAndWebの無料Webパッカー、GAPTools、free-tex-packerのnpmコア0.3.9、Nerulioのパック＆書き出しです。差はパッキングの規則よりも、何を保つかに出ました。ブラウザのツール2つはcanvasを通る間にピクセルの色を変え、2つは重複フレームを毎回保存し、1つはページの上限を無視しました。Nerulioは回転ありなら5セットすべて、なしなら4セットで最小のシートを作りました。free-tex-packerはコマンドラインで動きますが、Nerulioにはそれができません。
- Godot 4検証済み· Godot 4.7.2
- Phaser 3 / 4検証済み· Phaser 3.90 + 4.2
- PixiJS 8検証済み· PixiJS 8.21
- Unity 6検証済み· Unity 6000.5.3f1
- Aseprite JSON検証済み· Phaser load.aseprite · PixiJS 8.21
- .aseprite検証済み· Aseprite 1.3.18
- Spine / libGDX検証済み· spine-canvas 4.2
- Starling / Sparrow XML検証済み· Phaser 4.2
- LÖVE検証済み· LÖVE 11.5
- Defoldビルド確認· Defold bob.jar 1.13.1
- GameMaker未検証
- CSS sprites検証済み· Chromium
- GIF / APNGデコード確認· Pillow
パッカーで比べるべきこと
シートの面積：ページのうちフレームが占める割合です。ここでの効率はフレームの不透明なバウンディングボックスの合計 ÷ ページの面積で、0.84ならページの16%が間隔か空白です。細長い帯は面積が小さくても、エンジンの最大テクスチャサイズに収まらないことがあります。
正確なピクセル：各フレームをデータ（トリムのオフセット、回転）に従ってシートから切り出し直し、元ファイルとピクセル単位で比べます。画像要素と2D canvasを通してフレームを描くブラウザのツールは色を変えることがあります。gAMA/cHRMの色チャンクを持つフレームで灰色(50, 50, 50)が(46, 46, 46)になり、乗算済みアルファによって柔らかい縁が最大10段階ずれました。
作業の端での振る舞い：同一フレームを1回だけ保存するか毎回保存するか、最大ページサイズを複数ページに分けて守るか無視するか、出力を実際のゲームエンジンで読み込んだことがあるかです。
- 効率
- 全フレームの不透明なバウンディングボックスの面積 ÷ ページ全体の面積。
- 正確
- アトラスから戻した全フレームが元ファイルと一致（完全に透明なピクセルの色は無視）。
- エイリアス / 重複除去
- 同一フレームを1回だけ保存し、複数の名前から参照すること。
計算例：忍者セットの効率と正確さ
40 × 29pxのフレーム6枚。不透明なバウンディングボックスの合計は1,591 px²です（docs/STUDIO-PACK-H2H.md、2026-09-23）。
ツール シート 面積 効率 正確なフレーム
Nerulio（回転なし） 38 × 50 1,900 0.84 6 / 6
Nerulio（回転あり） 33 × 57 1,881 0.85 6 / 6
GAPTools 64 × 36 2,304 0.69 0 / 6
free-tex-packer-core 0.3.9 129 × 20 2,580 0.62 6 / 6
CodeAndWeb無料（トリムなし） 126 × 62 7,812 0.20 0 / 6
効率 = 1,591 / 面積、例：1,591 / 1,900 = 0.84弓兵のセットを回転なしでパックすると順位が変わります。free-tex-packerの3037 × 540の帯（1,639,980 px²）が、Nerulioの1543 × 1066のページ（1,644,838 px²）より0.3%小さくなります。
できること
- 回転ありなら5セットすべて、回転なしでも5セット中4つで最小のシート。例外のarcherではfree-tex-packerが3037×540の細長い形で0.3%小さくなりました。
- PNGはキャンバスを通さずJavaScriptでデコードするため、gAMA/cHRMの色情報を持つPNGや半透明の縁も変わりません。5セットの全フレームが正確に復元できました。
- 同一フレームはバイト単位で確かめてから1回だけ保存（ninjaの18フレーム→6枚）。最大ページサイズを超える分は最大64ページに分割。
- 書き出し先が別の設定を必要とするとき（Godotは回転なし、Aseprite JSONは1ページ）は、その書き出し用に詰め直し、変更点をボタンの横に表示。
CC0フレームセット5つで比べた無料パッカー4つ
各ツールが作ったシート1枚の幅×高さです。トリムあり、余白2、最大4096。Studioの欄は回転なしの結果を先に、回転ありの結果を後に書いています。
| Nerulio Studio | CodeAndWeb 無料Webパッカー | GAPTools | free-tex-packer-core 0.3.9 | |
|---|---|---|---|---|
| ninja（6フレーム） | 38×50、回転ありで33×57 | 126×62（トリムなし） | 64×36 | 129×20 |
| archer（10フレーム） | 1543×1066、回転ありで1071×1526 | 1532×1668 | 1936×872 | 3037×540（細長い帯） |
| samurai（60フレーム） | 275×248、回転ありで313×216 | 400×400 | 292×256 | 276×300 |
| toon（45フレーム） | 631×591、回転ありで587×592 | 784×780 | 760×496 | 3560×105（細長い帯） |
| spaceshooter（294フレーム） | 966×977、回転ありで944×996 | 1158×1051 | 1024×1024 | 1003×1003 |
| ピクセル単位で復元できたセット | 5つ中5つ | samuraiのみ | samuraiのみ | 5つ中5つ |
| ninja ×3（18フレーム、異なるもの6） | 6枚保存、38×50 | 18枚保存、168×155 | 18枚保存、120×52 | 6枚保存 |
| archer ×8、最大2048 | 5ページ、12,841,021px²。重複除去ありで10枚保存、1543×1066の1ページ | 4213×4448のシート1枚（上限を無視） | 5枚、13,253,792px² | — |
| トリムと回転 | なし・トリム・位置保持クロップ・クロップ、エンジンごとに回転 | どちらもなし（有料のPro機能） | トリム、回転 | トリム、回転 |
| 動作形態 | ブラウザ、ローカル | ブラウザ、ローカル | ブラウザ、ローカル | npmパッケージ（Webアプリは消滅） |
| エンジンが実際に読み込んだ出力 | Godot・Unity・Phaser 3/4・PixiJS 8・Spine・LÖVE・Aseprite、Defoldはビルドで確認 | — | — | — |
この数値の出典: docs/STUDIO-PACK-H2H.md (2026-09-23)
free-tex-packer / GAPTools / CodeAndWebのほうが向いている場合
- free-tex-packerのコアはコマンドライン付きのnpmパッケージなので、ビルドスクリプトの中で動かせます。Studioにはコマンドラインがありません。回転なしのarcherでは、このコアのシートが0.3%小さくなりました（細長い形）。
- GAPToolsとCodeAndWebの無料パッカーはWebページ1つで完結。フレームを入れてボタンを押すだけなので、一度きりのシートならこちらが手早い。
- CodeAndWebの有料版TexturePacker Proは、ここにある無料ツールのどれよりも多機能です。ポリゴンパッキング、GPUテクスチャ形式、スマートフォルダ付きのコマンドライン。Studioは矩形のパッキングのみです。
使い方
- 連番PNG、フォルダ、GIF、.asepriteのどれかをこのページにドロップ。Spriteを経てPack & Exportが開きます。
- トリムあり・余白2・最大サイズを合わせ、自分の素材で同じ比較をしてみる。
- 処理の強さをbestに上げ、使用率とページのタブを今のツールの結果と見比べる。
- エンジン向けに書き出すか、TexturePacker形式のhashであるGeneric JSONで書き出し。
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| free-tex-packer（npmコア0.3.9） | ビルドスクリプトやCIでパックするとき。コマンドラインのあるNodeパッケージで、フレームは正確に戻り、重複は1回だけ保存されました。Webアプリはなくなっています。 |
| GAPToolsやCodeAndWebの無料Webパッカー | 色の正確さが問題にならない一回限りのシートを、1つのWebページで作るとき。どちらもサムライのセットしか正確に復元できず、CodeAndWebの無料版はトリムも回転もしません。 |
| TexturePacker Pro（有料） | ポリゴンパッキング、GPUテクスチャ形式、68のデータ形式、コマンドライン。Nerulioとの計測はTexturePackerとの比較にあります。 |
| Asepriteのパック済みシート書き出し | 絵がAsepriteにあり、タグ付きの1ページで足りるとき：--trimと--merge-duplicatesを付けた--sheet-pack。今回の計測には含めていません。 |
| Nerulio パック＆書き出し | フレームを正確に保ち、重複をまとめ、ページの上限を守り、結果をそのままエンジンで読み込みたいとき：スプライトシート作成。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | 検証済み Godot 4.7.2Godotで読み込み、全アニメーションフレームを描画して元ファイルと比較。シーンはNearestフィルターで、回転は使いません。 |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | 検証済み Unity 6000.5.3f1バッチモードでスプライト範囲・ピボット・ピクセル・クリップのキーと長さを確認。 |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | 検証済み Phaser 3.90 + 4.2両バージョンでフレームとアニメーションを描画。 |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | 検証済み PixiJS 8.21回転・複数ページのアトラスも確認。 |
| Aseprite JSON | hash / array · frameTags · slices | 検証済み Phaser load.aseprite · PixiJS 8.21タグの方向と繰り返し回数を保持。 |
| .aseprite | layers · tags · durations · slices | 検証済み Aseprite 1.3.18Asepriteのコマンドラインで開いて描画。 |
| Spine / libGDX | .atlas | 検証済み spine-canvas 4.2Spineランタイムで回転・トリム領域をすべて描画。libGDX本体は未実行。 |
| Starling / Sparrow XML | XML per page | 検証済み Phaser 4.2Phaser 3.90はトリムされたXMLフレームを誤って描画します（Phaser側の不具合）。「Sparrow XML (Phaser 3)」プリセットはトリムを切り、3.90・4.2とも合格。 |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | 検証済み LÖVE 11.5同梱ヘルパーで全フレームを描画し、全アニメーションを再生。 |
| Defold | .atlas · .tilesource | ビルド確認 Defold bob.jar 1.13.1Defoldのコマンドラインビルダーでビルドし、生成テクスチャのUVを読み戻して確認。 |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | 未検証GameMakerでは読み込んでいません（ヘッドレス実行不可）。ストリップはGameMakerの取り込み方式どおりに切ります。 |
| CSS sprites | .css · preview .html | 検証済み Chromium同梱スタイルシートで全クラスを描画。 |
| GIF / APNG | one file per animation | デコード確認 Pillow書き出し後に全フレームと遅延を再デコード。APNGは完全一致。 |
検証の根拠
書き出し：実在のCC0アセットで実際のエンジンを49回実行し47回合格。失敗2回はPhaser 3.90のトリムXMLの不具合で、Phaser 3プリセットで回避。実在の5フレームセットでパッカー比較（CodeAndWeb無料Webパッカー、GAPTools、free-tex-packer）：回転ありで5つすべて最小、回転なしで5つ中4つ。全フレームがピクセル単位で復元できます。
この比較でNerulioにないもの
- コマンドラインやnpmパッケージがありません。パックにはブラウザが必要です。
- 回転なしの弓兵セットでは、free-tex-packerのシートが0.3%小さくなりました（3037 × 540の帯）。
- 矩形のみで、ポリゴンパッキングはありません。
- ツール間でパック時間は比べていません。Nerulio自身の時間だけを計測しました（Nodeでセットあたり2–60ms、spaceshooterは0.42秒）。
- Webツールは2026-09-23時点の状態で計測しており、バージョン番号なしに変わります。
制限
- ポリゴン（メッシュ）パッキングはありません。検証したエンジンのどれも、書き出しデータからメッシュアトラスを描画しないためです。
- GameMakerのストリップはGameMaker本体では未検証です。
- 拡大縮小バリエーション（@0.5x〜@4x）はニアレストネイバーのみです。
- トリムしたStarling XMLはPhaser 3.90で正しく描画されないため、「Sparrow XML (Phaser 3)」プリセットを使ってください。
バージョンと出典
2026-09-23に計測：CodeAndWebの無料WebパッカーとGAPToolsは実際のサイトをPlaywrightで、free-tex-packer-core 0.3.9はnpmから、NerulioはStudioが使うモジュールで実行しました。判定ではTexturePackerのJSONの規則で全フレームを復元しました。Nerulioの書き出しはGodot 4.7.2、Unity 6000.5.3f1、Phaser 3.90と4.2、PixiJS 8.21、spine-canvas 4.2、LÖVE 11.5で読み込み、DefoldのファイルはDefoldのbob.jar 1.13.1でビルドしました。
参照した公式ドキュメント
よくある質問
Webのパッカーでフレームの色が変わるのはなぜ？
今回比べたブラウザツールは<img>と2Dキャンバスを通してPNGをデコードします。そのためgAMA/cHRMを含むninjaのフレームではカラーマネジメントで灰色(50,50,50)が(46,46,46)になり、spaceshooterでは乗算済みアルファにより半透明の縁が最大10段階ずれました。
free-tex-packerはもう使えませんか？
Webアプリのドメインではアプリが提供されていません。npmのコア（0.3.9）はまだ動き、今回測ったのもこのコアです。フレームは正確、重複は1回だけ保存、そしてStudioより小さいシートを作った唯一のケース（回転なしのarcher）もこのコアでした。
「正確に復元」はどう確かめましたか？
アトラスからデータファイル（トリムのオフセット、回転）に従い、TexturePacker JSONの規則で各フレームを切り出し直し、完全に透明なピクセルの色を除いて元のファイルとピクセル単位で比べました。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。