ドット絵の縁取り・影 · 1pxのアウトラインを一手で
スプライトを囲むきれいな1pxの縁取りと、その下の1pxの影を、キャンバス上のコマンド1つで入れます。比較に使ったスプライトでは縁取りがAsepriteの結果とピクセル単位で一致し、Aseprite 1.3.18では手作業で6手順ほどかかる影がここではコマンド1つです。
ドット絵の縁取りは、シルエットを囲む1pxの暗い色の輪です。外側の縁取りはスプライトに接する透明ピクセルを塗るため、スプライトは上下左右に1pxずつ大きくなり、先にキャンバスの四辺に1pxの余白が必要です。内側の縁取りはスプライト自身の端のピクセルを塗り直し、大きさは変わりません。Nerulioではピクセル › キャンバスサイズ…（Ctrl+Alt+C）が既定で四辺+1を提案し、続けてピクセル › アウトラインが現在のレイヤーとフレームに、描画色で辺が接する外側の縁取りを描きます。ピクセル › ドロップシャドウは背景色で1pxの影を足します。
- .aseprite検証済み· Aseprite 1.3.18
- Palette files測定確認· read back
- Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio通常ファイル
外側か内側か、辺か角か、そしてキャンバスの1ピクセル
外側の縁取りは描いたピクセルをすべて残し、その外に輪を足します。にぎやかな背景の上でキャラを目立たせたいときによく使いますが、スプライトは縦横2pxずつ大きくなるので、32×32のキャラなら34×34のキャンバスが要るか、30×30の中に描く必要があります。内側の縁取りは代わりにスプライトの最も外側のピクセルを塗り直します。大きさは保てますが、1pxの剣や髪の一房のような細い部分が線に埋もれて消えます。
どの隣を数えるかで角の形が決まります。4方向の縁取りはスプライトと辺で接する所にだけピクセルを足すので斜めの角が空き、丸く見えます。8方向は斜めの角まで埋めて角ばって見えます。Nerulioのコマンドは4方向の形を描き、比較テストのスプライトではAsepriteの標準の縁取りと同じ形でした。
縁取りはレイヤー上の透明でないものすべてから計算します。腕と胴の間のすき間のような囲まれた穴も透明なので内側から縁取られ、半透明の光も塗られたものとして数えます。シルエット全体を1つのレイヤーにまとめるか、縁取る範囲を選択してください。選択範囲があると、コマンドは選んだピクセルを1px広げた範囲だけに効きます。
- 外側の縁取り
- シルエットの透明側に新しいピクセルで描く輪。スプライトは四辺に1pxずつ大きくなる。
- 内側の縁取り
- スプライト自身の端のピクセルを塗り替えたもの。大きさは変わらない。
- 4方向の連結
- 辺を共有する隣（上・下・左・右）。角は空いたまま。
- 8方向の連結
- 辺と斜めの隣。角も埋まる。
- キャンバスサイズ
- 絵を拡大縮小せずに、端にピクセルを足したり削ったりする操作。
例：縁取りのピクセルを数える
4×4の塗りつぶした正方形を、コマンドと同じ処理で計算した結果です。
8×8キャンバス上の4×4の正方形 絵 16 px
外側・4方向（Nerulioのコマンド） +16 px（各辺4、角は空く）
外側・8方向 +20 px（角4つも埋まる）
内側 12 px塗り替え、大きさはそのまま
左端に接した正方形 外側 +12 px（片側に余地がない）
左にキャンバス+1したあと 外側 +16 px（元どおり完全）
ドロップシャドウ（右と下に1 px） 正方形だけで+7 px、縁取り後は+9 px
実際のスプライト 96×144 → 98×146 縁取り1846 px、影705 px、Asepriteと一致縁取りを先に、影をあとに入れます。そうすると影は縁取りを含んだシルエットから落ち、比較テストのスプライトも両方のソフトでこの順に作りました。
できること
- ピクセル › アウトラインは不透明ピクセルの外側に描画色で1pxの輪を描きます。辺で接する（4方向）形で、Asepriteの標準のアウトラインと同じ。元の絵は変わりません。
- ピクセル › ドロップシャドウはシルエットを右下に1pxずらし、背景色で絵の後ろに置きます。Aseprite 1.3.18には影のコマンドがなく、レイヤー複製・塗りつぶし・移動・並べ替え・統合が必要です。
- 選択範囲があると、どちらのコマンドも選んだピクセルを1px広げた範囲だけに効くので、混み合ったシートのキャラ1体やスプライトの一部だけを縁取れます。
- 先にキャンバスサイズ（Ctrl+Alt+C）で余白を足せば、端に接した絵の縁取りが切れません。コマンド1つが履歴の1手順なので、まとめて取り消せます。
- 多くのフレームを一度に処理するなら、拡大画像を変換する整理パネルで縁取りと影も同時に付けられ、結果はフレーム・時間・タグを保った新しいスプライトになります。
使い方
- スプライトかフレームをこのページにドロップすると、最初のフレームを開いたピクセル作業画面になります。
- 絵が端に接しているなら、Ctrl+Alt+Cでキャンバスを上下左右1pxずつ広げます。
- 描画色を縁取りの色にしてピクセル › アウトラインを、背景色を影の色にしてピクセル › ドロップシャドウを実行します。
- カンマとピリオドでフレームを移りながら必要な所で繰り返し、.asepriteで保存するか、パック＆書き出しでフレームを書き出します。
縁取りを確認する
- 実行する前に、いちばん外側の行と列を見ます。絵のピクセルが1つでもあれば、先にキャンバスを広げます。
- 400 %に拡大してシルエットをたどります。端のピクセルごとに外側の縁取りピクセルがちょうど1つあり、斜めの角は空いているはずです。
- 縁取ったレイヤーの周りのレイヤーを隠してみます。腕と胴のすき間に不要な縁取りができていたら消すか、先にすき間を埋めます。
- カンマとピリオドでフレームを移ります。コマンドは現在のフレームだけに効くので、必要な各フレームに縁取りがあるはずです。
同じ縁取り・影の作業を実測
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手順 | 操作ごとにそれぞれ取り消し |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 片側の縁取りがない | 絵がキャンバスの端に接していて、外側に塗るピクセルがない | 最初か最後の行・列に不透明なピクセルがある | 取り消し、ピクセル › キャンバスサイズ…で四辺+1にしてから縁取り直す |
| スプライト内の穴まで縁取られた | 囲まれた透明ピクセルも外側として数える | 手足と胴のすき間を拡大して見る | すき間を埋めるか、すき間を除いて選択し、選択範囲に縁取り |
| キャラの一部だけ縁取られた | コマンドは現在のレイヤーだけに効き、シルエットが複数のレイヤーに分かれている | レイヤーの表示を切り替えると、縁取りが1枚のレイヤーの形だけに沿っている | 先に下と結合（Ctrl+E）するか、シルエット全体があるレイヤーに縁取り |
| 光や煙に硬く暗い縁ができた | アルファが0より大きいピクセルはすべて塗られたものとして数える | 光のピクセルを調べるとアルファが1〜254 | 体だけを選択してから縁取るか、光は縁取りのあとで足す |
| 縁取りが2ピクセルの太さ | コマンドを2回実行して輪がもう1本増えた | 履歴にアウトラインが2つある | 1回取り消す。実行ごとに履歴1手順 |
| ほかのフレームに縁取りがない | コマンドは現在のフレームだけを変える | ピリオドで次のフレームへ移って確認 | フレームごとに繰り返すか、整理パネルのアウトラインを範囲（タグか全フレーム）で使う |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Aseprite：Edit › FX › Outline（Shift+O） | 内側の縁取り、隣の形の指定、アニメの全セルへ一度に適用が必要なとき。公式ドキュメントにInside/Outside、形のプリセット、Selected/Allの説明があります。 |
| 縁取りを手で描く | 光の当たる側を明るくしたり、地面に接する所を抜いたりするセレクティブアウトラインは、コマンドでは代われない表現上の判断です。 |
| Nerulioの整理パネル | どのみち拡大画像を変換するとき。アウトラインと影のオプションが範囲全体に効き、新しいスプライトになります。ドット絵の縮小を参照。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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でインデックスモード・レイヤー・合成モード・ロックのまま開きます。
制限
- コマンドで使えるのは外側・4方向の縁取りだけで、内側と8方向はありません。
- コマンドは現在のレイヤーとフレームだけに効きます。アニメ全体には整理パネルか、フレームごとの実行が必要です。
- 影の位置は右に1px、下に1pxで固定です。
- ピクセル作業画面にないもの（Asepriteにはある）：レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮（反転と90°のみ）、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ（四角・丸の1〜16px）、タイル状の連続描画、LuaスクリプトとCLI。
- 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
- 整理：JPEGは近い色で戻りますが（背景を残すと84 %がΔE 0.02以内）、完全一致はまれ（12 %）。模擬的な生成画像でサイズが完全一致したのは20 %（±1px：80 %）、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
- インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の（見た目により近い）色になりました。Lospec検索が唯一の通信で、事前に確認します。
バージョンと出典
Nerulio：96×144のCC0比較用スプライトで、キャンバスサイズ+1・アウトライン・ドロップシャドウが1846pxと705pxを追加し、Aseprite 1.3.18で作った結果とピクセル単位で一致しました（docs/STUDIO-PIXEL.md §6、T8）。上の正方形の数値はsrc/studio/pixel/raster.jsで計算しました。Asepriteのオプションは公式ドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
縁取りはスプライトの内側と外側、どちらに描かれますか？
外側です。不透明ピクセルの隣の透明ピクセルだけを塗るので、絵そのものは上書きしません。比較テストでは1846ピクセルが追加され、同じスプライトにAsepriteのEdit › FX › Outlineで作った4方向の縁取りと完全に一致しました。
アニメーションの全フレームに一度に入れられますか？
コマンドは現在のフレームに効きます。アニメ全体なら各フレームで実行するか、整理パネルのアウトライン・影のオプションを使ってください。選んだ範囲（このフレーム、タグ、全フレーム）に適用して新しいスプライトを作ります。
インデックスのスプライトでも使えますか？
はい。縁取りと影はパレットの描画色・背景色を使い、セルは再びインデックスPNGで保存されるので、スプライトはインデックスモードのままです。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。