このチャプターでは、ShaderGraphを利用してUIにグラデーションをつける方法を紹介します。

HPバーのようなグラデーション付きのゲージを作る際に役に立ちます。

uGUI用のシェーダーグラフの作り方は以下のページを参考にしてください。
🍇 UI向けのシェーダーグラフの作り方【uGUI】

グラデーションをつくる

以下のようなシェーダーグラフを作成します。

結果

UI素材にグラデーションが付きます

マテリアル上から色を変更できるようにする

今回、Colorノードで緑色と赤色を決め打ちしていました。
Colorノードをプロパティ化することで、マテリアル上から色を変更できるようになります。

Colorノードのプロパティ化

Colorノードを右クリックし、Convert to -> Property を選択します。

Colorノードはプロパティに置き換わります。

プロパティ一覧にColorが追加されます。

ShaderGraphを保存すると、マテリアル上から色が変更できるようになります。

結果

色を変えることで、様々グラデーションのHPゲージを作れます.

グラデーションのコントラストを調整する

グラデーションのコントラストを調整する方法を紹介します。
Lerpノードへグラデーションを入力する前に、グラデーションに対してSmoothstepを適用します。

Smoothstepに接続している Smooth Edge 1ノード や Smooth Edge 2 ノードはFloat型のシェーダープロパティです。

結果

Smooth Edge 1 や Smooth Edge 2 の値を変えることで、グラデーションのコントラストが調整できます。