Yotsuba Games
Back to Node List

Gradient Map

gradient_map

Recolors an image by mapping brightness to a palette ramp or a two-color gradient

Draft
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

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

Output Ports

NameTypeDescription
画像
output
Image
塗り直した画像です

Parameters

NameTypeDefaultRangeDescription / Options
判定基準
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 を併用し、明暗を逆にして塗る
Back to Node List
Gradient Map — PixPipeline Node Reference