よつばゲームズ
ノード一覧に戻る

グラデーションマップ

gradient_map

画像の明るさをパレットのランプや2色グラデーションに割り当てて塗り直します

下書き
解説あり

入力ポート

名前型説明
画像
input
Image
必須
明るさの元にする画像です
パレット
palette
Palette
任意の色ランプです。パレットの並び順を暗い側→明るい側として使います。未接続なら色A・色Bの2色を使います

出力ポート

名前型説明
画像
output
Image
塗り直した画像です

パラメータ

名前型既定値範囲説明・選択肢
判定基準
source
Enum
OKLCH-L—

各ピクセルのどの値をランプ位置として使うかです

  • OKLCH 明度OKLCH-L
    見た目の明るさで判定します。影やハイライトなど、目で見た明暗に合わせたい時に使います。
  • OKLCH 彩度OKLCH-C
    色の鮮やかさで判定します。くすんだ色と鮮やかな色を分けたい時に使います。
  • HSV 彩度HSV-S
    HSV の鮮やかさで判定します。一般的な色相・彩度・明度の感覚で選びたい時に使います。
  • HSV 明度HSV-V
    RGB の一番明るいチャンネルを基準にします。光った色や原色の強さを見たい時に使います。
  • RGB 赤RGB-R
    赤の強さで判定します。赤みだけを抜き出したい時に使います。
  • RGB 緑RGB-G
    緑の強さで判定します。緑成分だけを抜き出したい時に使います。
  • RGB 青RGB-B
    青の強さで判定します。青成分だけを抜き出したい時に使います。
  • アルファAlpha
    透明度で判定します。不透明な形だけをマスクにしたい時に使います。
  • 輝度Luminance
    RGB から計算した明るさで判定します。OKLCH より単純な白黒変換に近い結果が欲しい時に使います。
塗り方
mode
Enum
Steps—

ランプから色をどう選ぶかです

  • 段階Steps
    各ピクセルをランプの1色に割り当てます。ドット絵向けのくっきりした段になります
  • 滑らかSmooth
    隣り合うランプ色の間を補間して滑らかに塗ります
色A
color_a
Color
[0,0,0,1]—

パレット未接続時に、暗い側で使う色です

色B
color_b
Color
[1,1,1,1]—

パレット未接続時に、明るい側で使う色です

段数
steps
Int
42–64

パレット未接続かつ段階モードのとき、2色を何段に分けるかです

反転
invert
Bool
false—

ランプの暗い側と明るい側を入れ替えます

元の透明度を保つ
preserve_alpha
Bool
true—

色を塗り直しても、元画像の透明度はそのまま残します

概要

ノイズや高さマップのようなグレースケール画像を、パレットの色で「暗い側→明るい側」に塗り分けるノードです。 ノイズ → グラデーションマップ の2ノードで、パレット管理されたドット絵テクスチャの下地が作れます。

技術詳細

  • 各ピクセルの source 値（0〜1）をランプ上の位置として色を選びます。
  • Steps: ランプを等幅の段に分け、値が入った段の色をそのまま使います。輪郭のはっきりした色分けになります。
  • Smooth: 隣り合うランプ色の間を線形補間します。
  • 完全に透明なピクセルは塗らずにそのまま残します。
  • パレット接続時はインスペクタにスウォッチ格子が表示されます。

使用例

  1. ノイズの着色: Noise(Perlin) → Gradient Map に草むら用パレットをつなぎ、Steps で塗る → タイル下地
  2. 陰影ランプの適用: Height From Image の高さマップを、キャラクターの肌ランプ（3〜4色パレット）で塗り分ける
  3. 単色グラデーション: パレットを繋がず色A=紺、色B=水色、steps=4 で空の背景を段階塗りする
  4. 反転マスク着色: Threshold で作ったマスクに invert を併用し、明暗を逆にして塗る
ノード一覧に戻る
グラデーションマップ — PixPipeline ノード解説