この記事のターゲット

初めて Unity でシェーダーを触る方
シェーダーで何が出来るかを知り合い方
2D（UI）の演出が作りたい方

はじめに

株式会社 Graffity で Unity エンジニア兼テクニカルアーティストとして働いている Muraishi です。

今回は、会社の学習用の資料として作成した Unity2D での Shader Graph によるシェーダー作成法を Qiita 向けに展開いたしました。

ぜひよろしければ、ご自身や会社での学習用教材としてご活用いただければと思います！

まずは、2D 演出をやってみることのススメ

大きな理由としては、こちらで学んでいただいた方が 2D のクリエイティブに強い方が多かったため、2D・UI向けとして作成したという経緯があります。

しかし、最初に 2D から始めることには、以下のようなメリットがあります。

学習コストが少なくて済む
- 学習と実践を同時に行えるくらいにはコストを安くスキル習得できる
そのまま3Dへの移行がしやすい
- 今まで学習した内容が無駄にならない
意外と扱えると便利なケースが多い
- 3Dゲームでも2D演出は結構使用する

前準備

Unityエディタは、なるべく最新のものをご用意ください。

ファイルのダウンロード

この記事を確認する場合、以下の Unity 用パッケージファイルを同時に確認してください。

2DShaderGraphSample.unitypackage

対応Unityバージョン … * 2022.03.44f1 以上
確認方法 … 上記、unitypackage ファイルを Unity にドラッグしてインポートする。追加された各シーンの内容を再生する

シェーダーで何をやっているのかを簡単に解説

まずは、2D 演出用に初期の Sprite 挙動を持つシェーダーを作ってみます。

初期の Sprite を Shader Graph で作る（00_Default Sprite）

全体像

まず、Unity を開き Project ウインドウの任意の場所（Shadersフォルダ内が望ましい）で右クリック（or Assets メニュー） → Create → Shader Graph → URP → Sprite Unlit Shader Graph を選び、Shader ファイルを作成

作成した Shader を選択し、Inspector から Open Shader Editor で Shader Editor を表示
以下が実際に開いた画面

テクスチャを表示したい場合

ワークスペースで右クリック → Create Node を選びメニューから Simple Texture 2D を選択する（検索窓が便利）。

出来たノードをそれぞれ Base Color (3)と Alpha にドラッグでつなぎ、Texture で任意のテクスチャを入れると、Preview で表示されることが確認できる。

実際に Image コンポーネント上でこのマテリアルを貼り付けると、Source Image を無視して、Shader 側で設定した画像がそのまま表示される。

外部パラメータを参照したい場合

バックボードの「＋」ボタンから、Texture 2D を選択。

作成したパラメータを選択し、グラフインスペクタから Reference を「_MainTex」に変更し、あとは任意のパラメータを設定する（こうすることで、Image コンポーネントの Source Image で設定したテクスチャを受け取ることができる）。

同様に、バックボードから Color を作成し、Reference を「_Color」に変更し、後は任意のパラメータに変更する。

それらをワークスペースにドラッグし、Texture は Sample Texture に、Color は、Texture の RGBA出力と Multiply（乗算）で合成する。

この状態で保存し、実際に Image コンポーネントの Source Image と、Color を変更すると、それらが反映されることを確認できる。

UV・テクスチャについて

2Dに限らずシェーダー全般において、基本的には、UV〜テクスチャ、テクスチャ〜出力までの間で必要なノードを追加することで該当の挙動のシェーダーを作成していきます。

UV 〜テクスチャ間 … テクスチャの位置・大きさなどを加工する
テクスチャ〜出力間 … カラーの加工・合成などを行う

UV について

UVの加工（拡大・縮小・移動・スクロール）

加工のサンプルのために以下の内容を用意する

拡大

UV に x2 倍すると、画像が50%縮小して表示される（UVは2軸のベクトルなのでXYにのみ適用）

縮小

逆に UV を x0.25 倍すると、画像が4倍に拡大される

移動

上記のノードの Multiply の後 X軸に 0.25 を足すと隣のハートが表示される

スクロール

上記の内容から、例えば Time ノードで時間を X軸のみ追加すると、以下のように画像がスクロールされる

テクスチャの加工（加算・乗算）

加工のサンプルのために以下の内容（テクスチャノードｘ２）を用意する

加算

2つのテクスチャノードを Add ノードで結ぶと、画像の加算合成が出来る

乗算

2つのテクスチャノードを Multiply ノードで結ぶと、画像の乗算合成が出来る

ノードの分割・結合

ノードの分割・結合はそれぞれ以下のノードで行える
- 分割 … Split ノード
- 結合 … Combine ノード
四則演算とともに、よく使用するノードなので覚えておくと良い

UVを分割・結合した例

UV を分割すると、それぞれ X軸、Y軸に対して0（黒）〜1（白）までグラデーションがされていることを確認できる
- ノードベースのシェーダーエディタでは、固定値でない数値（座標によって変化する数値）の表示をカラーで表示する場合が多い
- 1軸だと白黒、2軸以上だとそれぞれのカラー（RGB）で表示される

Sub Graph について

よく使うノード群一式を Sub Shader にまとめて使い回すことが可能です。

Sub Graph の作り方

Project ウインドウの任意の場所（Shadersフォルダ内が望ましい）で右クリック（or Assets メニュー） → Create → Shader Graph → Sub Graph を選び、Shader ファイルを作成

画面はほとんど一緒だが、アウトプット時の形式を選べるようになっている

例えば、以下のような形式でテクスチャ同士を加算する Sub Graph を作成できる

上記の内容を実際に Shader Graph からファイル名でノードを取得可能
（プレビューは Sub Greaph のインスペクタから Preview を Preview 2D に変更）

最後に

ここまでは、Unity Shader Graph を 2D で使用する場合についての基礎的な機能の説明を行いました。
次回は、実際の作例とそのポイントについてご説明します。

後半、Unity2D Shadar Graph 完全習得マニュアル（実制作編）はこちら。

記事一覧