スプライトを分割

透明部分からフレーム候補を検出し、範囲を修正してPNGに分割。

スプライトシートを切り分けるには、軸ごとに4つの値が要ります。セルの幅と高さ、最初のセルまでの余白(マージン)、セル同士の間隔です。PNGをここにドロップすると、Nerulioが絵のあいだの透明なすき間からこれらを測り、信頼度つきで切り方をプレビューし、適用を押したときに初めて切り出します。グリッドのないシートは透明なすき間に沿って切ります。フレームはタグ・タイミング・エンジン書き出しのために1つのプロジェクトに残り、フレームごとのPNGファイルは従来のスプライトラボで作れます。

画像をここにドロップ複数のファイルをまとめて処理できます
アップロードなし · この端末で処理

セル・マージン・間隔:グリッドシートの構造

グリッドシートは同じ大きさのセルが並んだ表です。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行を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を一緒にアトラスビューアで開いてください。

この方法の限界

  • 自動検出が探すのはマージン64px・間隔16pxまでです。それより広いレイアウトはカスタムグリッドで入力します。
  • トリムや回転をしたアトラスはPNGだけでは復元できません。矩形の情報はデータファイルにあります。
  • フレームごとのPNGファイルは、まだStudioの書き出しにありません。

バージョンと出典

既定の選択のまま、実在のアセット16件をすべて正しく切り出しました(通常・背景色つきシート、4096²のエフェクトシート、アトラスデータ、フレーム画像、GIF、.aseprite;2026-09-23)。上に挙げたエンジン側の分割機能は、Unity 6マニュアルとGodot 4.7ドキュメントに基づきます。

参照した公式ドキュメント

使用例

元の図形サンプル · 96 × 64
元の図形サンプル · 96 × 64
処理後のサンプル · 24 × 36
処理後のサンプル · 24 × 36

このツールで作成した例です。ZIPツールはプレビューを表示します。すべてのファイルはダウンロードしたZIPで確認してください。

スプライトを分割

透明部分からフレーム候補を検出し、範囲を修正してPNGに分割。

使い方

  1. 画像を追加
  2. 設定を調整して結果を確認
  3. 新しいファイルを保存

対応形式

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。

このツールでできること

透明部分からフレーム候補を検出し、範囲を修正してPNGに分割。

処理方式と検証状況

advanced · Studio Sprite workspace: measured grid (margin, spacing) or alpha islands, colour key, previewed import decisions; GIF/APNG/.aseprite decoders; timeline, pivots, boxes, alpha contour collision. 品質検証中です。Pro・Flagship水準はまだ実証されていません。

書き出す前に

離れた部品は別候補になります。重なったキャラクターの意味的な分離はできません。

よくある質問

このツールにはどのような制限がありますか?

離れた部品は別候補になります。重なったキャラクターの意味的な分離はできません。

ファイルはアップロードされますか?

このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。

作業は自動保存されますか?

いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。