スプライトシート分割 · フレームに切り出し
シートを入れると、Studioがピクセルからセルサイズ・余白・間隔を測るか、透明なすき間で不規則なスプライトを切り分け、何かを変える前に信頼度つきで結果をプレビューします。
スプライトシートを切り分けるには、軸ごとに4つの値が要ります。セルの幅と高さ、最初のセルまでの余白（マージン）、セル同士の間隔です。PNGをここにドロップすると、Nerulioが絵のあいだの透明なすき間からこれらを測り、信頼度つきで切り方をプレビューし、適用を押したときに初めて切り出します。グリッドのないシートは透明なすき間に沿って切ります。フレームはタグ・タイミング・エンジン書き出しのために1つのプロジェクトに残り、フレームごとのPNGファイルは従来のスプライトラボで作れます。
- Godot 4検証済み· Godot 4.7.2
- Unity 6検証済み· Unity 6000.5.3f1
- Phaser 3 / 4検証済み· Phaser 3.90 + 4.2
- PixiJS 8検証済み· PixiJS 8.21
- 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
セル・マージン・間隔：グリッドシートの構造
グリッドシートは同じ大きさのセルが並んだ表です。n列目は「マージン + n ×（セル幅 + 間隔）」から始まるので、値が1つ違うだけで切り位置がずれていく、1行目が欠ける、スプライトが2つに割れる、といったことが起きます。ファイルの大きさだけではグリッドは決まりません。256 × 256のシートは8・16・32・64・128のどれでも割り切れ、作者がどれを使ったかはピクセルを見ないとわかりません。
インポートは、示せる根拠で候補のグリッドを採点します。グリッド上すき間になるはずの行・列が完全に透明か、絵がセルの周期で繰り返しているか、内容がセルの境界をまたがないか、セルごとの内容の範囲が似ているか、です。マージンは64pxまで、間隔はセルの4分の1（最大16px）まで試し、最有力の候補と代替案を高・中・低の信頼度と理由つきで並べます。
別の切り方が必要なシートが2種類あります。大きさの違うスプライトをグリッドなしで詰めたシートは「島」単位で切ります。つながった不透明ピクセルのまとまりが1フレームになり、火花のような小さな欠片は、最寄りのスプライトがはっきりしていればそこに付きます。マゼンタなどの単色背景に描いたシートは透明度がないため、まず外周から背景色を見つけて透明にし、元の画像は取り消し用にプロジェクトに残します。
- セル
- シート上の1フレーム分の矩形。幅 × 高さ（ピクセル）。
- マージン（オフセット X / Y）
- 最初のセルの手前、左端と上端の空きピクセル。
- 間隔（Gap X / Y）
- 隣り合う2つのセルのあいだの空きピクセル。
- 島（アイランド）
- グリッドではなく透明なすき間に沿って切ったフレーム。グリッドのないシート用。
例：マージン1px・間隔2pxの136 × 68シート
32 × 32のフレームが4列2行。各セルの開始位置と、マージンと間隔を入れ忘れたときに起きること：
n列目のx = 1 + n × (32 + 2) → 1, 35, 69, 103
r行目のy = 1 + r × (32 + 2) → 1, 35
使う幅 = 1 + 4 × 32 + 3 × 2 = 135 → 右に1px余る（右マージン）
使う高さ = 1 + 2 × 32 + 1 × 2 = 67 → 下に1px余る（下マージン）
カスタムグリッド W 32 H 32 オフセット 1 間隔 2 → 「4 × 2 = 8セルがまるごと収まる」
オフセットも間隔もなしで32 × 32と入れると、n列目はn × 32から → 0, 32, 64, 96
列ごとのずれ → 1, 3, 5, 7px（間隔ぶんずつ増える）カスタムグリッドのパネルは、この計算を入力と同時に行い、右と下に余るピクセル数も表示します。値が違うとずれは列ごとに大きくなります。症状別の診断は切り位置がずれる・欠けるときを参照してください。
できること
- 余白・間隔を含むグリッド候補を、絵のすき間をどれだけ説明できるかで順位づけして表示。
- 不規則なシートは島モードで分割。小さなエフェクト片は本体にくっつき、どこにも属さない片は赤で表示。
- マゼンタや単色の背景を透明に（元画像は取り消し用に保持）。
- 行ごとに1アニメーションと再生時間を決定。ワンクリックで変更できます。
使い方
- このページにシートをドロップ（または選択）。
- フレーム数・グリッド・背景色・アニメーションのプレビューと信頼度を確認。
- 「適用」を押す（取り消しは1回）。必要ならフレーム範囲をドラッグで修正。
- パック＆書き出しで使うエンジン向けに書き出し。
結果の確認
- 適用の前に、プレビューのフレーム数と目に見えるフレーム数を比べます。半端な最終行の空セルは数えずに飛ばします。
- 適用後、シート表示（`）に切り替えます。どの領域の枠も絵ではなくすき間を通っているはずです。ずれている領域はドラッグで直します。
- 1行をEnterで再生します。間隔の幅ぶん跳ねるフレームは間隔の値が違います。1px程度の上下動は、たいてい元の絵がそうなっています（違うならフレームをそろえる）。
- 島モードでは赤い欠片がないか確認します。どのフレームにも属さず、領域を広げて覆わないかぎり抜け落ちます。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 列が進むごとに少しずつずれる | セル間の間隔をグリッドが無視している | シート表示で、ずれが列ごとに同じだけ増える | 間隔X（必要ならY）を入れるか、一覧から間隔つきの候補を選ぶ |
| シート全体が1フレームになる | 不透明な背景（マゼンタ・黒・単色）でフレームのあいだに透明なすき間がない | インポートパネルに背景色の判断がない、または却下されている | インポートパネルで背景色の候補を選ぶ。手つかずの元画像は取り消し用に残る |
| スプライトが半分に切れる／2体が1フレームに入る | セルの大きさが実際の半分か2倍 | フレーム数が見た目の2倍か半分 | 一覧から別のセルサイズを選ぶか入力する。大きさがまちまちなら島モード |
| 火花や砂ぼこりが消える、または極小のフレームになる | 島モードは離れたピクセルを欠片とみなし、どのスプライトからも遠い欠片は割り当てない | プレビューのキャンバスに赤い欠片がある | フレーム領域を広げて覆うか、島ではなくグリッドで切る |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| エンジン側の分割機能：GodotのSpriteFramesパネル（Add frames from a Sprite Sheet）、UnityのSprite Editor（Slice: Grid By Cell Size / Grid By Cell Count / Automatic） | セルの大きさがわかっていて、プロジェクトの中でフレームを作りたいとき。Unity側はOffsetとPaddingも指定できます。Godotでスプライトシートを使う、Unityでスプライトシートを使うも参照。 |
| 従来のスプライトラボ | フレームごとのPNGファイルをZIPで欲しいとき：スプライトシートをPNGフレームに。 |
| シートに付いてきたアトラスデータ | パック済みのアトラスにはそもそもグリッドがありません。PNGとJSON・XMLを一緒にアトラスビューアで開いてください。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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は完全一致。 |
検証の根拠
GIFデコーダー：実在のGIF 29本で408/408フレームがPillowと一致、APNG 16本で132/132。.aseprite：コーパス231ファイルを読み込み・書き直し、Aseprite 1.3.18で開いてタグ・長さ・ピクセルが231/231一致。書き出し：実在のCC0アセットで実際のエンジンを49回実行し47回合格。失敗2回はPhaser 3.90のトリムXMLの不具合で、Phaser 3プリセットで回避できます。
制限
- 自動検出が探すのはマージン64px・間隔16pxまでです。それより広いレイアウトはカスタムグリッドで入力します。
- トリムや回転をしたアトラスはPNGだけでは復元できません。矩形の情報はデータファイルにあります。
- フレームごとのPNGファイルは、まだStudioの書き出しにありません。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
既定の選択のまま、実在のアセット16件をすべて正しく切り出しました（通常・背景色つきシート、4096²のエフェクトシート、アトラスデータ、フレーム画像、GIF、.aseprite；2026-09-23）。上に挙げたエンジン側の分割機能は、Unity 6マニュアルとGodot 4.7ドキュメントに基づきます。
参照した公式ドキュメント
従来のツール
フレームごとのPNG（ZIP）、アウトライン、フチの除去は従来のスプライトラボにあります。
従来のツールを開く →よくある質問
グリッドの推定が違っていたら？
一覧の別の候補を選ぶか、セルサイズ・余白・間隔を入力してください。切る前にプレビューが更新されます。
フレームを1枚ずつPNGで保存できますか？
Studioではまだできません。下のリンクの従来のスプライトラボでフレームPNGのZIPを保存できます。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。