本文へスキップ

スプライトシートをPNGフレームに · フレームごとに1ファイル(ZIP)

ツールがシートではなく個別の画像を求めるとき、従来のスプライトラボが確認したグリッドや透明なすき間でシートを切り、フレームのZIPを保存できます。各PNGはシート上の該当する枠をそのままコピーしたものです。

スプライトシートを個別のPNGファイルにするとは、マージンと間隔のあるグリッドか透明なすき間に沿ってフレームの枠に切り、枠ごとに1枚の画像として保存することです。Nerulioの従来のスプライトラボはこれをブラウザで行い、枠を付けたフレームごとに1枚のPNGを入れたZIPをダウンロードさせます。名前はシート名にフレーム順の番号を付けたもの(hero_001.png、hero_002.png …)です。どのPNGも枠をピクセルどおりに写したもので、再サンプリングも位置データもありません。アニメーションやピボット、エンジン用ファイルが要るなら、同じシートをStudioで切ってください。

スプライトシート(PNG)をドロップ
ブラウザ内で処理し、ファイルはアップロードされません。
従来のスプライトラボ:書き出し前に全フレームの枠を表示したCC0シート
CC0アセット(OpenGameArt)を開いた実際のスプライトラボ(従来)画面です。
出力
  • Frame PNGs測定確認· Pillow

枠・大きさ・名前

ばらばらのフレーム画像が欲しいのは、画像のフォルダーからアニメーションを作るツールに渡すときや、フレームを別のところで1枚ずつ編集するときです。ファイルにはタイミングも位置もありません。フレームの位置を伝えるのは大きさと透明な縁だけです。だから各PNGは透明な余白を含めた枠全体を保ちます。1つのグリッドから切ったフレームはすべて同じ大きさなので、ツールが重ねてもそろいます。

透明なすき間で切った不規則なシートでは枠ごとに大きさが違い、PNGの大きさもばらばらになるため、角を基準に描くツールではアニメーションが跳ねます。そろえる必要があるなら、先に1つのキャンバスにそろえてください(従来のラボの正規化、またはStudioのフレームをそろえる)。

名前はシート名 + ゼロ埋めの番号(最低3桁、1,000フレーム以上ならさらに桁が増える)なので、どのファイル管理ソフトでも名前順がフレーム順になります。ピクセルが1つもないセルは、空の画像として書かずに飛ばします。

フレームの枠
シートから切り出す矩形。PNGはちょうどこの大きさ。
ゼロ埋めの番号
001、002 … 010のように書いて、文字順の並びをフレーム順と一致させる。

例:64 × 64のフレームでできた256 × 128のシート

マージンも間隔もなく、4列 × 2行:

グリッド 64 × 64        → 256 ÷ 64 = 4列、128 ÷ 64 = 2行 = 8フレーム
ダウンロード            → hero-frames.zip
ファイル                → hero_001.png … hero_008.png、各 64 × 64、行ごとの順
ピクセルの検算          → 8 × 64 × 64 = 32,768 = 256 × 128:すべてのピクセルがどれか1枚に入る

同じ絵にマージン1px・間隔2px(263 × 131のシート)
                        → やはり64 × 64のPNGが8枚。マージンと間隔はどのフレームにも属さない

263 = 1 + 4 × 64 + 3 × 2 + 0、131 = 1 + 2 × 64 + 1 × 2 + 0 です(右と下のマージンなし)。枠がすき間ではなく絵にかかる場合は切り位置がずれるときを参照してください。

できること

  • アルファの島(不規則なシート)か、余白・間隔つきのグリッドでフレームを検出。
  • 表示されたフレームごとにPNGを1枚ずつ、フレーム順に入れたZIP。
  • 各フレームPNGはシートの該当範囲とピクセル単位で一致し、リサンプリングしません。
  • アニメーション・ピボット・当たり判定・エンジン用ファイルが必要なら、同じシートをStudioで開いてください。

使い方

  1. スプライトシートをドロップ。
  2. 検出されたフレームを確認するか、グリッドを設定。
  3. 必要ならフレームの枠を調整。
  4. フレームのZIPをダウンロード。

結果の確認

  • ダウンロード前にシート上の枠を見ます。どの枠にもスプライトが1体まるごと入り、隣のものが入っていないはずです。
  • ZIPを開きます。PNGの数が枠の数と同じで、グリッドのシートなら連続するフレームのピクセルサイズが同じです。
  • 画像ビューアーで名前順に送ってみます。思ったとおりの順でアニメーションが進むはずです。

トラブルシューティング

症状考えられる原因確認方法対処
PNGに隣のスプライトの切れ端が入るグリッドが間隔やマージンを無視し、枠が隣のスプライトにかかっているシート上の枠が絵を横切っているダウンロード前に間隔とオフセットを入れるか、枠をドラッグする
画像から再生するとフレームが跳ねる島モードで枠の大きさがばらばらになり、ツールがPNGを角基準で描いている2枚のPNGのピクセルサイズを比べる同じ大きさのグリッドで切るか、書き出し前に1つのキャンバスにそろえる
あるはずのフレームがないそのセルに不透明なピクセルがなく、飛ばされたシート上で絵のあるセルを数える空のセルなら正常。淡いピクセルがあるならアルファのしきい値を下げる
各フレームの周りに色の付いた枠が残るシートに不透明な背景色があるPNGの四隅が透明でない先に背景を透明にする:スプライトの背景を消す

ほかの方法

方法こんなときに向いています
ezgifのスプライトカッターJPG・BMP・WebPのフレームも欲しい、あるいはそのままGIFツールを使うとき。シートはezgifのサーバーにアップロードされます。比較はezgifの代わりにあります。
Studioのスプライト作業画面フレームをゲームエンジンで使うとき:ばらばらのファイルではなく、タグ・タイミング・ピボットと1枚のパック済みアトラス。スプライトシート分割から始めてください。

出力ファイルと検証方法

「測定確認」は、ダウンロードしたファイルをページ外(Pillow・numpy・独立したパーサー)で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。

書き出し先ファイル検証
Frame PNGs<sheet>-frames.zip (one PNG per frame)測定確認 Pillow各フレームPNGがシート上の枠と一致(Chromium・Firefox)。ZIPに位置情報はありません。

検証の根拠

ZIPから読み直したフレームが元シートの該当範囲とピクセル単位で一致。

制限

  • ZIPに入るのはPNGだけで、位置やタイミングのデータはありません。
  • ばらばらのフレーム画像は従来のスプライトラボの書き出しで、Studioはまだ書き出しません。
  • 従来のラボにはタイムラインとタグがありません。アニメーションはStudioを使ってください。
  • フレームはアルファの島か、確認したグリッドで切ります。
  • 非常に大きいシートは帯ごとに分割し、進行状況を表示します。

バージョンと出典

ブラウザのテストで、実在のCC0シートから作ったZIPの各PNGを枠の領域と比べ、ChromiumとFirefoxの両方でピクセル単位で一致しました。ezgifの出力形式はezgif自身のページから引用しています。

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

よくある質問

なぜStudioにないの?

Studioはエンジン用のアトラスとアニメーションを書き出します。バラのフレームPNGのZIPは、まだ従来のスプライトラボの機能です。

フレームはトリムされますか?

各PNGはシート上に表示された枠そのままです。変えたいときは書き出す前に枠を調整してください。ZIPにはPNGだけが入り、位置情報はありません。

無料ですか?アカウントは必要ですか?

このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。

スプライトはアップロードされますか?

いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ(IndexedDB)に自動保存され、.nerulioファイルとして保存できます。

Asepriteやエンジンのプラグインは必要ですか?

いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています(Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト)。