Chapter 28無料公開

🍇 UI向けのシェーダーグラフの作り方【uGUI】

かもそば
かもそば
2021.03.20に更新

このチャプターでは、uGUIのImage/RawImageで利用可能なShaderGraphの作り方を紹介します。

uGUI向けShaderGraphの作り方

  1. 半透明描画のShaderGraphを作成する
  2. _MainTexプロパティを追加する

半透明描画シェーダー

Graph Settings を以下のように設定します。

_MainTexの追加

Texture2D型のプロパティを追加し、Referenceを _MainTex に設定します。

_MainTexのサンプリング

_MainTexをサンプリングすることで、Image上で設定されたテクスチャを取得できます。

作成したマテリアルの適用

今回のShaderGraphからマテリアルを作成し、ImageコンポーネントのMaterialに登録します。

ShaderGraph上でサンプリングしたテクスチャがそのままImageに表示されます。

ImageのColorの取得

Vertex Colorノードを利用することで、UI上で設定されたカラー情報を取得することができます。

_MainTexとVertex Color を乗算することで、UIに色を付けることができます。