スプライトラボ

1枚のシートで分割・整列・アニメ・基準点・ヒットボックス・アトラスまで1画面で。

スプライト作業画面は、完成した絵とゲームエンジンのあいだの工程です。PNGシート、連番のフレーム画像、GIF・APNG、.asepriteファイル、JSONやXMLの付いた既存のアトラスを読み込み、フレームごとにミリ秒の長さを持つアニメーション(タグ)、フレームごとのピボット、ヒット・ハート・任意のボックスに変えます。その後Pack & Exportが、Godot 4、Unity 6、Phaser、PixiJS、LÖVEなどが読むファイルを書き出します。ピクセルを描く作業は同じプロジェクトのピクセル作業画面で行います。

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

ゲームで使うには、ピクセル以外に何が要るか

エンジンが再生するのは1枚の絵ではなく、フレームの一覧です。フレームごとに、テクスチャ上の矩形、元のキャンバス(トリムしたフレームを描いた位置に戻すため)、オブジェクトの位置に置かれるピクセルを示すピボット、表示時間が要ります。アニメーションは方向と繰り返し回数を持つ名前付きのフレームの並びで、ヒット・ハートボックスはゲームのコードが判定に使うフレームごとの矩形です。

Studioはまさにこの文書を保存します。シートは共有の画像1枚で、フレームはその上の領域なので、並べ替えやタグの付け直しでピクセルは変わりません。ピボットはフレームキャンバスに対する0〜1で保存し(指定しなければ下中央の0.5, 1.0)、長さはミリ秒(Asepriteと同じく既定100)、タグの繰り返しはAseprite方式(0は無限ループ、nはn回再生)です。読み込み時の自動判断はすべて信頼度とワンクリックの代替案つきで示され、適用は1回の取り消し単位です。

書き出し先ごとに、そのエンジンが読めるものを書き、載せられないものは知らせます。Godotはフレームごとの長さとボックス(リソースのメタデータ)を受け取り、Unityはフレームごとのピボットとタグごとのクリップを受け取りますがボックスは受け取らず、Defoldはアニメーションごとに1つのFPSで再生します。

タグ
方向(順・逆・ピンポン)と繰り返し回数を持つ、名前付きのフレームの並び。
ピボット
オブジェクトの位置に置かれるフレーム上の点。フレームキャンバスに対する0〜1で保存。
フレームキャンバス
不透明部分だけをパックしても、フレームが描かれる本来の大きさ。

例:384 × 256のシート1枚をGodot 4のバンドルへ

48 × 64のフレームが8列 × 4行、1行に1動作のシートです。

読み込み   グリッド 48 × 64、マージン 0、間隔 0 · 32フレーム · 行ごとに1アニメーション
タイムライン 行の名前を idle, run, jump, attack に変更
idle       8 × 100ms = 800ms、繰り返し 0(ループ)
attack     7 × 100ms + 5番目を250ms保持 = 950ms、繰り返し 1(1回再生)
ピボット   下中央 (0.5, 1.0) = 全フレームでピクセル (24, 64)
ヒット     attack 4〜6番目:(34, 30) に 16 × 12px、3フレームとも同じボックスID
書き出し   Godot 4 → hero.tres(アニメーション4つ)+ hero.png + hero.tscn + hero.png.import
           Godotでは attack は loop オフ、idle は loop オン

同じプロジェクトは、タイムラインを作り直さずにUnityやPhaserにも書き出せます。Godotでの続きはAsepriteをGodotへとGodotでスプライトシートを使うにあります。

結果の確認

  • 書き出す前にすべてのタグをEnterで再生します。各フレームが自分のミリ秒だけ表示され、1回再生のタグは最後のフレームで止まるはずです。
  • Pack & Exportで書き出し先の下の行を読みます。「Loaded in Godot 4.7.2」(GameMakerは琥珀色のUNVERIFIED)と、書き出し前に先方の都合で変わる設定が表示されます。
  • 書き出し後の注記を読みます。1つのGodotアニメーション内でピボットが違う、Unityにボックスが渡らない、など書き出し先が載せられなかったものが並びます。
  • エンジンで結果を開き、同じ倍率でNerulioのプレビューと並べてタグを1つ再生してみます。

トラブルシューティング

症状考えられる原因確認方法対処
提案されたグリッドが違う間隔が不ぞろい、またはグリッドに見えるシートに大きさの違うスプライトがある判断の信頼度が中・低で、理由にセルの分割や境界またぎが出ている代替案か島モードを選ぶ。切り位置がずれるときを参照
.asepriteファイルが統合されて入るレイヤーがStudioで正確に合成できない(テスト231件中5件)、またはセルがz-indexを使う(231件中4件)インポートパネルに理由が出るフレームとタイミングは正しいまま。レイヤー編集はAsepriteで行って読み込み直す
エンジンでボックスやピボットがない書き出し先に入れる場所がない:Unityはピボットのみでボックスなし、DefoldとCSSはどちらもなし書き出しボタンの下の注記ボックスが要るならGodotバンドルか汎用JSONで書き出すか、エンジン側で追加する
アニメーションが切り替わるときにキャラが跳ねるフレームごとにピボットが違うが、Godotのシーンのノードのオフセットは1つGodot書き出しの注記にピボット不一致の警告タグ全体でピボットを1つにそろえる。フレームごとのピボットを参照

ほかの方法

方法こんなときに向いています
AsepriteのFile › Export Sprite Sheetとエンジン用プラグインどのみちAsepriteで描いて動かし、エンジンに保守されたインポーターがあるとき。Asepriteを呼び出すプラグインは、取り込むすべてのPCにAsepriteが必要です。
TexturePacker主にばらばらの画像を多くのフレームワーク向けのアトラスにまとめ、コマンドラインで自動化したいとき。タグやフレームごとのピボット、ボックスをスプライトエディターのようには扱いません。
エンジン内のエディター(UnityのSprite Editor、GodotのSpriteFramesパネル)長さが均一なアニメーション1〜2個を、プロジェクトの中で設定したいとき。

この方法の限界

  • 読み込んだアトラスの回転フレームは回転したまま残り、その書き出しはUNVERIFIEDです。回転なしでパックし直してください。
  • GameMaker用ストリップはGameMaker本体では検証していません。
  • 描画ツールはピクセル作業画面にあり、Asepriteの一部の機能(レイヤーグループ、タイルマップレイヤー、RotSprite、テキスト)はありません。

バージョンと出典

読み込み:既定の選択で実在アセット16件すべてのフレームが正しく、.asepriteの231件はNerulioの書き出しを経てAseprite 1.3.18で同じタグ・長さ・ピクセルのまま開けました。書き出し:エンジンでの実行49件中47件が合格(Godot 4.7.2、Unity 6000.5.3f1、Phaser 3.90・4.2、PixiJS 8.21、LÖVE 11.5、Spineランタイム4.2、Defold bob.jar 1.13.1)。不合格の2件はトリムしたSparrow XMLに対するPhaser 3.90の不具合で、Sparrow XML (Phaser 3) プリセットで回避できます。

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

スプライトラボ

1枚のシートで分割・整列・アニメ・基準点・ヒットボックス・アトラスまで1画面で。

使い方

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

対応形式

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

このツールでできること

1枚のシートで分割・整列・アニメ・基準点・ヒットボックス・アトラスまで1画面で。

処理方式と検証状況

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水準はまだ実証されていません。

書き出す前に

離れた部品は距離で結合します。重なったキャラクターの意味的な分離や回転パッキングには非対応で、Unityの取り込みは未検証です。

よくある質問

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

離れた部品は距離で結合します。重なったキャラクターの意味的な分離や回転パッキングには非対応で、Unityの取り込みは未検証です。

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

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

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

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