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

グラデーションマップ

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ノードで、パレット管理されたドット絵テクスチャの下地が作れます。

使い方のポイント

  • ドット絵では基本 mode = Steps(段階)。段数=パレットの色数になり、くっきりした 色分けになる。Smooth はグラデ壁紙など非ドット絵的な用途向け
  • 陰影の色付けの定番: グレーで明暗だけ作ってから、このノードでランプ(3〜5色)を当てる。 「形と陰影」「配色」を分離できるので、パレット差し替えだけで色違いが量産できる
  • source は迷ったら既定の OKLCH-L(見た目の明るさ)。マスクの塗り分けには Alpha が便利
  • パレット入力には palette_create / common_palette_ref をつなぐと、プロジェクト全体の 配色管理に乗る

よくある失敗

  • 色が2色にしかならない: パレットが未接続で 色A/色B の2色モードになっている。 パレット入力の接続を確認する
  • 暗い部分と明るい部分の色が逆: パレットの並び順は「暗い側→明るい側」。並び替えるか invert をONにする
  • 半透明部分の濃さが変わる: preserve_alpha(既定ON)は元のアルファを保つ。 OFFではアルファが0より大きいピクセルにランプ色のアルファを使う。完全に透明な ピクセルはOFFでも塗られない

技術詳細

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

使用例

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

関連ノード

  • noise_generate — 着色対象のグレー模様を作る定番の前段
  • palette_create — ランプに使うパレットをグラフ内で組む
  • palette_quantize — 「既存のカラー画像をパレットに寄せる」場合はこちら(こちらは近似色探索)
  • tone_curve — 塗る前に明暗の分布を調整して、段の面積バランスを整える

関連ノード

ノイズnoise_generateパレット作成palette_createパレット減色palette_quantizeトーンカーブtone_curve
ノード一覧に戻る
グラデーションマップ — PixPipeline ノード解説