スプライトエディター オンライン · ゲーム用スプライト編集
絵は描き終えたのに、エンジンに入れるまでが面倒——そんなときの続きの作業場です。.asepriteファイル、スプライトシート、連番PNG、GIFを入れると、時間・ピボット・ボックス付きのアニメーションになり、エンジンがそのまま開けるファイルにまとまります。
ゲーム用のスプライトエディターの仕事は2つです。フレームごとにピクセルを描くことと、フレームをエンジンが再生できる形にすること（タグ、フレームごとのタイミング、ピボット、ボックス、パックしたアトラス、エンジン用データファイル）です。Nerulio Studioはブラウザの1つのプロジェクトで両方を行います。ピクセル作業画面で描き（鉛筆・塗りつぶし・図形・選択・レイヤー・パレット・オニオンスキン）、スプライト作業画面でフレームに時間と印を付け、Pack & ExportがGodot 4、Unity 6ほか16形式を書き出します。長時間の作画やタイルマップレイヤー、スクリプトを使う作業は、今もAsepriteの出番です。
- 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
スプライト編集の2つの半分
作画はピクセルの仕事です。キャンバス、パレット、レイヤー、アンチエイリアスしない鉛筆、中割りを描くためのオニオンスキン。準備はデータの仕事です。どのフレームが「run」か、それぞれ何ミリ秒出すか、どのピクセルをキャラの位置に置くか、攻撃がどこに当たるか、そしてそれらをGodot・Unity・Phaser向けにどう書くか。多くのツールは片方が得意で、そのあいだの受け渡し（シートで書き出し、切り直し、タイミングを入れ直す）でタイミングやピボットやそろえが失われます。
Studioでは両方が同じフレームを編集します。ピクセル作業画面の1ストロークは現在のフレームに対する1回の取り消し単位で、スプライト作業画面に切り替えると同じフレームが長さ・ピボット・ボックスとともにタイムラインに並びます。プロジェクトはブラウザのIndexedDBに自動保存され、.nerulioファイルにも保存できます。何もアップロードしません。
書き出しはエンジン自体で確認しています。検証済みの書き出し先は、UIで作ったバンドルをそのエンジンが読み込んで描画しており、書き出し先の行にそう表示されます。GameMakerは実行できないためUNVERIFIEDと表示します。
- ピクセル作業画面
- 作画：鉛筆・消しゴム・塗りつぶし・図形・選択・合成モード付きレイヤー・インデックスパレット・オニオンスキン。
- スプライト作業画面
- データとしてのフレーム：読み込み・タイムライン・タグ・長さ・ピボット・ボックス・そろえ。
- Pack & Export
- アトラスのパックとエンジン用ファイル。
例：白紙のキャンバスからUnity 6まで、4フレームの歩き
1行が1つのプロジェクト内の1工程です。
ピクセル 新規スプライト 32 × 32、4フレーム、16色パレット、オニオンスキン オン
スプライト タグ walk = フレーム1–4、各120ms → 1周480ms（8.33FPS）
ピボット (0.5, 1.0) = ピクセル (16, 32)、(10, 6) に 12 × 26 のハートボックス
パック Unityプリセット：トリム、シェイプ余白2px、回転なし → 1ページ
書き出し hero.png + hero.unity.json + Editor/NerulioSpriteImporter.cs + README-UNITY.md
Unity Tools › Nerulio › Import Studio JSON → スプライト4つ（Point、無圧縮）+ walk.animハートボックスはUnityには渡りません（入れるスプライトの項目がないため）。Godotバンドルと汎用JSONには入ります。ヒットボックスエディターを参照してください。
各作業をどこで行うか
| 作業 | Nerulio Studioでは | Asepriteなどの専用ドット絵エディターでは |
|---|---|---|
| ピクセルを描く・直す | ピクセル作業画面、Asepriteと同じショートカット、レイヤー合成モード19種、インデックスパレットとLospecパレット | Asepriteは作画ツールがより充実し、タイルマップレイヤーとスクリプトがある。Nerulioにはレイヤーグループ、タイルマップレイヤー、RotSprite、テキストがない |
| タグとフレームごとのタイミング | スプライトのタイムライン。.asepriteのタグと長さを読み書き | Aseprite自身のタイムラインとタグ |
| ピボットとヒット・ハートボックス | フレーム・タグ・選択単位のピボットツールとボックスツール | ピボット点付きのスライスを手で描く |
| エンジン用ファイル | Pack & Export：エンジンで確認したプリセット付きの18形式 | スプライトシート + JSON。エンジン用ファイルはプラグインやインポーターが作る |
できること
- いま使える作業画面は5つ：スプライト（読み込み・タイムライン・ピボット・ボックス）、ピクセル（パレットと拡大画像の整理を備えたドット絵エディタ）、パック＆書き出し（アトラスと18形式）、タイル（オートタイルのルールとテストマップ）、テクスチャ（ノーマルマップと2Dライト）。
- グリッド、背景色、島の切り分け、行ごとのアニメーションといった自動推定は、すべて信頼度（高・中・低）と理由、ワンクリックの代替案つきで表示。「適用」を押すまで何も切りません。
- ピボットツール（P）、矩形・円・ポリゴンのボックス（B・C・Q）、タグの反転コピー、フレームの整列はすべて整数ピクセル単位。ドット絵がにじみません。
- ファイルはアップロードされません。プロジェクトはブラウザのIndexedDBに自動保存され、.nerulioファイルとして保存可能。アカウントも透かしもなし。
- ドットは同じフレーム上でピクセル作業画面から打てます。Asepriteのキーで使う鉛筆・バケツ・選択・レイヤー・インデックスパレット・オニオンスキン。レイヤーグループ、タイルマップレイヤー、RotSprite、テキストなどはないため、大きな描き込みは今もAsepriteが向く場合があります。
使い方
- ピクセル作業画面かいつものドット絵ツールで描き、PNGシート・連番フレーム・GIF・.asepriteのいずれかを用意。
- このページにドロップすると、切り方の提案とその根拠を表示した状態でスプライト作業画面が開きます。
- 「適用」を押し、タイムラインでタグ名と各フレームの時間を決め、フレームごとにピボットとヒット・ハートボックスを置く。
- パック＆書き出しでGodot 4・Unity 6など18形式から選び、バンドルをダウンロードしてプロジェクトへ。
結果の確認
- スプライト作業画面で、出荷時と同じ倍率で各タグを再生します（F7のプレビュー、1〜8倍）。
- 書き出す前に書き出し先の検証の行を、書き出したあとに注記を読みます。
- バンドルをエンジンで開き、Studioのプレビューと並べて同じタグを再生します。
Studioの6つの作業画面
各作業画面でいまできることと、準備中の1つの代わりに使うページです。
| 作業画面 | いまできること | 状態 |
|---|---|---|
| スプライト | シート・フレーム画像・GIF/APNG・.aseprite・アトラスデータの読み込み、タグとフレームごとの時間を持つタイムライン、ピボット・ボックス・衝突ポリゴン、フレームの整列 | 利用可 |
| パック＆書き出し | MaxRects・Skyline・Guillotineでのパック、トリム・重複除去・縁の拡張・マルチパック、Godot 4・Unity 6からCSS・GIFまで18形式 | 利用可 |
| タイル | ピクセルからオートタイル配置を認識、地形ビット、足りないタイルの確認、テストマップ、セットの生成、Godot・Tiled・Unity・LDtk用ファイル | 利用可 |
| テクスチャ | シルエットからノーマルマップを生成、Godot 2Dと同じ計算のライティング、OpenGLかDirectXかの判定、Godot・Unity用バンドル | 利用可 |
| ピクセル | Asepriteのキーで使う鉛筆・バケツ・図形・選択、19種の合成モードのレイヤー、インデックスパレットとLospec、オニオンスキン、拡大したドット絵を1倍に戻す整理 | 利用可 |
| UI | ナインスライスのパネル、ボタンの状態、ビットマップフォントはいまUIラボで対応 | 準備中（当面はUIラボ） |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| エンジンでピクセルがぼやける | エンジンが最近傍ではなくフィルタリングでテクスチャを描いている | 拡大すると縁がにじむ | 同梱のインポート設定（UnityはPoint、GodotのシーンはNearest）を保つか、エンジン側で最近傍フィルターにする |
| Unityのインポータースクリプトがコンパイルできない | 2D Spriteパッケージ（com.unity.2d.sprite）がない。3Dテンプレートなど | コンソールにUnityEditor.U2D.Sprites関連のエラー | 2D Spriteパッケージを入れてから取り込み直す |
| 書き出したGIFの色が変わる | 255色を超えるとmedian cutで減色し、アルファはオンかオフだけになる | 書き出しの注記にパレットを減らしたと出る | 色を正確に残したいならPNGかAPNGで書き出す |
| ブラウザのデータを消したら作業が消えた | プロジェクトはブラウザの保存領域に自動保存され、サイトデータを消すと一緒に消える | プロジェクト一覧が空 | 残したい作業は.nerulioファイルに保存する |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Aseprite（デスクトップ） | 長時間の作画、タイルマップレイヤー、スクリプト。Nerulioは.asepriteを読み書きするので併用できます：Asepriteの代わりを参照。 |
| エンジンのエディター（UnityのSprite Editor、GodotのSpriteFramesパネル） | 長さが均一でほかに何も要らないとき、シート1枚をプロジェクト内で切ってアニメーションにする。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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プリセットで回避できます。
制限
- ピクセル作業画面にはレイヤーグループ、タイルマップレイヤー、RotSprite、テキストがありません。
- UI作業画面（ナインスライス、ボタンの状態、ビットマップフォント）はまだStudioになく、UI Labが担当します。
- GameMaker書き出しはGameMakerではUNVERIFIEDです。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
.asepriteのテストファイル231件すべてが、同じタグ・長さ・ピクセルのままAseprite 1.3.18で開き直せました。Unity 6書き出しはUnity 6000.5.3f1のバッチモードで適用されました（矩形、ピボット、ピクセル、クリップのキー）。
参照した公式ドキュメント
よくある質問
このエディターでドット絵を描けますか？
はい、ピクセル作業画面で描けます。ピクセルのタブに切り替えると鉛筆・消しゴム・バケツ・図形・選択が現在のフレームで使え、1本の線が1回の取り消しです。Aseprite・Pixelorama・Piskelのファイルも読み込めます。.asepriteはレイヤー・タグ・長さ・スライスごと、ほかのツールはPNGシートかフレーム画像で。
UnityのSprite Editorと同じものですか？
違います。UnityのSprite Editorはプロジェクト内でテクスチャを切る機能です。こちらはブラウザでグリッドを測り、スプライト範囲・ピボット・タグごとのAnimationClipを作るJSONと小さなエディタースクリプトを書き出します（Unity 6000.5.3f1のバッチモードで確認）。
どのくらい大きなシートまで開けますか？
一辺32,768px（2億6,800万ピクセル）までで、ブラウザのメモリにも左右されます。パックはChromiumのワーカーで1,000フレームを2.4秒で処理し、キャンセルすればすぐ止まります。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。