ドット絵の縁取り・影 · 1pxのアウトラインを一手で
スプライトを囲むきれいな1pxの縁取りと、その下の1pxの影を、キャンバス上のコマンド1つで入れます。比較に使ったスプライトでは縁取りがAsepriteの結果とピクセル単位で一致し、Aseprite 1.3.18では手作業で6手順ほどかかる影がここではコマンド1つです。
- .aseprite検証済み· Aseprite 1.3.18
- Palette files測定確認· read back
- Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio通常ファイル
できること
- ピクセル › アウトラインは不透明ピクセルの外側に描画色で1pxの輪を描きます。辺で接する（4方向）形で、Asepriteの標準のアウトラインと同じ。元の絵は変わりません。
- ピクセル › ドロップシャドウはシルエットを右下に1pxずらし、背景色で絵の後ろに置きます。Aseprite 1.3.18には影のコマンドがなく、レイヤー複製・塗りつぶし・移動・並べ替え・統合が必要です。
- 選択範囲があると、どちらのコマンドも選んだピクセルを1px広げた範囲だけに効くので、混み合ったシートのキャラ1体やスプライトの一部だけを縁取れます。
- 先にキャンバスサイズ（Ctrl+Alt+C）で余白を足せば、端に接した絵の縁取りが切れません。コマンド1つが履歴の1手順なので、まとめて取り消せます。
- 多くのフレームを一度に処理するなら、拡大画像を変換する整理パネルで縁取りと影も同時に付けられ、結果はフレーム・時間・タグを保った新しいスプライトになります。
使い方
- スプライトかフレームをこのページにドロップすると、最初のフレームを開いたピクセル作業画面になります。
- 絵が端に接しているなら、Ctrl+Alt+Cでキャンバスを上下左右1pxずつ広げます。
- 描画色を縁取りの色にしてピクセル › アウトラインを、背景色を影の色にしてピクセル › ドロップシャドウを実行します。
- カンマとピリオドでフレームを移りながら必要な所で繰り返し、.asepriteで保存するか、パック＆書き出しでフレームを書き出します。
同じ縁取り・影の作業を実測
ErisのSumo Hulkシート（OpenGameArt、CC0）、96×144。docs/STUDIO-PIXEL.md §6、T8。
| 手順 | Nerulio ピクセル | Aseprite 1.3.18 |
|---|---|---|
| 余白を作る | キャンバスサイズ+1（コマンド1つ） | キャンバスサイズ+1 |
| 1pxの縁取り | ピクセル › アウトライン：1846px追加 | Edit › FX › Outline：1846px追加、一致 |
| ドロップシャドウ | ピクセル › ドロップシャドウ：705px、手作業の結果と一致 | コマンドなし：複製、塗り、1,1移動、下へ、統合（約6手順） |
| 取り消し | コマンドごとに履歴1手順 | 操作ごとにそれぞれ取り消し |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 検証済み Aseprite 1.3.18実際のAsepriteコマンドラインで、インデックスモード・レイヤー2枚・不透明度160の乗算・編集不可のロックレイヤーのまま開き直し、フレームのピクセルも一致しました。 |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 測定確認 read back各形式を書き出して読み戻し、一致を確認。Asepriteが書いた.gpl・.pal・.hex・.actと実際のAdobe .ase（16色）も読み込めました。 |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 検証済み Godot 4.7.2 · Unity 6000.5描いたスプライトはパック＆書き出しでまとめます。そのエンジン用ファイルは実在のCC0アセットで各エンジンに読み込んで確認済み（49回中47回合格。失敗2回はPhaser 3プリセットで避けられるPhaser 3.90のバグ）。 |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 通常ファイルどのツールでも使える通常ファイルで、エンジンでの検証は主張しません。 |
検証の根拠
整理のベンチマーク（元の1倍画像が分かっているCC0ケース69件）：サイズを正確に当てたのは81 %（±1px：90 %）、背景を残すとピクセルの74.0 %が完全一致。最も良い競合ツールはサイズ30 %（perfectPixel）、完全一致ピクセル44.6 %（unfake.js）。Asepriteで作った×4ニアレスト拡大は100 %、×3.78バイリニアは99.7 %一致で戻り、どちらもサイズは自動で判定。1pxのアウトラインとドロップシャドウはAsepriteの結果とピクセル単位で一致（1846px・705px）。ここで書いた.asepriteはAseprite 1.3.18でインデックスモード・レイヤー・合成モード・ロックのまま開きます。
制限
- ピクセル作業画面にないもの（Asepriteにはある）：レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮（反転と90°のみ）、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ（四角・丸の1〜16px）、タイル状の連続描画、LuaスクリプトとCLI。
- 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
- 整理：JPEGは近い色で戻りますが（背景を残すと84 %がΔE 0.02以内）、完全一致はまれ（12 %）。模擬的な生成画像でサイズが完全一致したのは20 %（±1px：80 %）、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
- インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の（見た目により近い）色になりました。Lospec検索が唯一の通信で、事前に確認します。
よくある質問
縁取りはスプライトの内側と外側、どちらに描かれますか？
外側です。不透明ピクセルの隣の透明ピクセルだけを塗るので、絵そのものは上書きしません。比較テストでは1846ピクセルが追加され、同じスプライトにAsepriteのEdit › FX › Outlineで作った4方向の縁取りと完全に一致しました。
アニメーションの全フレームに一度に入れられますか？
コマンドは現在のフレームに効きます。アニメ全体なら各フレームで実行するか、整理パネルのアウトライン・影のオプションを使ってください。選んだ範囲（このフレーム、タグ、全フレーム）に適用して新しいスプライトを作ります。
インデックスのスプライトでも使えますか？
はい。縁取りと影はパレットの描画色・背景色を使い、セルは再びインデックスPNGで保存されるので、スプライトはインデックスモードのままです。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。