アウトライン

概要

スプライトのシルエット(不透明部分)に輪郭線を付ける、ドット絵仕上げの定番ノードです。 キャラクターやアイテムの視認性がぐっと上がるため、ゲーム素材の最終段によく置きます。

使い方のポイント

• まずは既定のまま(太さ1・黒・外側)で十分機能する。ゲーム背景に沈む素材は これ1つで浮き上がる
• キャンバスに余白がない素材は padding を先に設定する。外側の線はキャンバス外に 描けないため、ぴっちりサイズの素材だと線が欠ける(下記)
• 線の色は真っ黒よりも「素材の最暗色を少し暗くした色」にすると馴染みやすい。 配色管理するなら color を変数やパレット参照にバインドする
• 1pxの外側線で角がカクつく場合は pixel_perfect をON。L字の余分なドットが整理される
• outline_only で線だけ取り出し、blend で好きな位置に重ねる合成的な使い方もできる

よくある失敗

• 線が途切れる・出ない辺がある: シルエットがキャンバス端に接している。 padding に太さ以上の値を入れて余白を確保する
• 半透明のふちに線がガタつく: アンチエイリアスされた素材は threshold の 境界判定が揺れる。しきい値を上げ下げして安定する値を探す(ドット絵なら通常0.5でよい)
• 内側線で塗りが痩せて見える: Inside は不透明領域を線で置き換えるため、 小さい素材では本体が細る。外側線+padding を検討する

注意

• placement = Outside でも出力サイズは元画像と同じです。キャンバス端からはみ出す輪郭線はクリップされます。
• placement = Inside の時も従来どおり、輪郭線は元画像の内側に描かれます。
• 出力サイズを広げたい場合だけ padding を指定します。上下左右へ指定値分の透明余白が追加されます。
• outline_only = true の時は、元画像部分は出力しません。
• pixel_perfect はパス由来のベクタ補正ではなく、2 値化した画像マスクに対するラスタ補正です。
• pixel_perfect_side = SourceSide は元画像に接する側、OuterSide はアウトライン帯の外側を基準に L 字コーナーを整理します。
• pixel_perfect_side = SourceSide で透明穴が出るケースは、元画像色を補って自然につながるように補正します。
• placement = Inside かつ外側補正で塗りがはみ出すケースは、塗り側も合わせて削って輪郭と整合させます。
• pixel_perfect_also_outer は SourceSide を選んだ時の追加オプションで、外側に残る L 字だけをもう一段除去します。

使用例

1. ピクセル文字やアイコンに縁取りを付ける
2. outline_only で、ふちだけ別レイヤーとして使う
3. placement = Inside で、元画像の塗り領域を使って内側縁取りにする
4. pixel_perfect を併用して 1px アウトラインの L 字を整理する
5. padding を足して、後段の合成で切れないようにする

関連ノード

• drop_shadow — 輪郭ではなく影を落としたい場合
• glow — 発光風のぼんやりした縁が欲しい場合
• surface_outline / surface_edge_highlight — Surface(3D由来)素材の輪郭・エッジ処理
• anti_alias — 輪郭を付けた後のジャギ緩和