はじめに
株式会社 Graffity で Unity エンジニア兼テクニカルアーティストとして働いている Muraishi です。
今回は、会社の学習用の資料として作成した Shader Graph による 2D シェーダー作成法を Qiita 向けに展開いたしました。
ぜひよろしければ、ご自身や会社での学習用教材としてご活用いただければと思います！
後半は、Unity2D シェーダーの実際の作例とそのポイントについてご説明します。
前半、Unity2D Shadar Graph 完全習得マニュアル（基礎編）はこちら。
2Dシェーダーエフェクトサンプル
以下のサンプルをご紹介していきます。
- 01_Color ... 画像を任意のカラー単色で着色したもの
- 02_Mosaic ... 画像をモザイクにしたもの
- 03_Noise ... 画像にノイズを加えたもの
- 05_Wave ... 画像を波打たせたもの
01_Color （単色で着色）
レシピ
ポイント
- Image コンポーネントからテクスチャの乗算元として受けとっていた Color をそのまま Base Color に接続
- テクスチャ部分は、アルファの型取りのみに利用
02_Mosaic（モザイクエフェクト）
レシピ
ポイント
- Posterize ノードで、UVの持つ階調を減らす
03_Noise（ノイズ）
レシピ
ポイント
- UV 用の Random Range ノードの Seed 値に Time ノードを接続して 0〜1 のランダム値を連続して作成
- 上記で作成したランダム値を UV に加算し、Simple Noise に接続することで砂嵐状のアニメーションを作成
- その内容を元のテクスチャに合成
04_Noise Sub Shader (Sub Graph を利用して作成)
レシピ
Sub Graph
本体
ポイント
- 02 で作成したシェーダーから、ノイズ部分を切り取って、Sub Graph に移行
- 作成した Sub Graph をメインのシェーダー側に組み込み
05_Wave（波のエフェクト）
レシピ
Sub Graph
本体
ポイント
- Sub Graph 側では元の UV に、Y軸にアニメーションする波情報を加算したものを、本体側で UV 情報として使用する
- 波は、UV の Y軸情報を Time ノードでアニメーションさせたうえ、それらの数値情報を Sine ノードで -1〜1を往復する波に変換する
他の演出を作りたい場合のヒント
基本的には、ここまでの内容を把握できれば、あとは調べながら実際の演出作成は可能と思います。
その際に、参考になる学習サイトや調べ方を記載しました。
学習教材
-
Unity公式マニュアル：初めてのShader Graph
- Unityの公式ドキュメントで、Shader Graphの基本的な使い方や設定方法が詳細に解説。初めてShader Graphを触る方にとって、基礎を固めるのに最適なリソース
- URL: https://docs.unity3d.com/ja/Packages/com.unity.shadergraph%4010.0/manual/First-Shader-Graph.html
-
Unity道場2D編：Shader Graphはじめてみよう！基礎編
- Unity Japanが提供する公式動画で、Shader Graphの基本的な使い方や2Dゲームでの活用方法について解説。実際の操作手順を視覚的に学べる
- URL: https://www.youtube.com/watch?v=3TXHMS8xFJ0
-
渋谷ほととぎす通信：初心者向けShader Graphの始め方
- Shader Graphの導入から基本的なシェーダーの作成方法までを、ステップバイステップで解説しているブログ記事。文章と画像で丁寧に説明されており、初心者でも理解しやすい内容
- URL: https://shibuya24.info/entry/unity-start-shadergraph
-
Unity Learn：シェーダーグラフの紹介
- Unityの公式学習プラットフォームで提供されているチュートリアル。Shader Graphを使用してシンプルなノードベースのシェーダーを作成し、軽量レンダーパイプラインで実装する方法を学べる
- URL: https://learn.unity.com/tutorial/introduction-to-shader-graph-jp
-
YouTube：Unity ShaderGraphを初心者にわかりやすく解説する
- Shader Graphの基本的な概念や操作方法を初心者向けに解説した動画。視覚的に学習できるため、実際の操作イメージを掴みやすい
- URL: https://www.youtube.com/watch?v=pr0CWXOBV4Y
やりたいことから調べる
- 有志の方が作り方をインターネット上で公開していることも多く、調べたらレシピ付きで確認できる場合もあります
例）グリッチエフェクトを作りたい場合
- 例えば「グリッチエフェクト unity ShaderGraph」などで検索すると、以下のサイトがヒットする
- AIで参考元を調べるのもあり
最後に
今回ご紹介した Shader Graph を使った 2D シェーダーの作例は、基本的な構成要素を組み合わせることで、視覚的に多様な表現を生み出せることを目的としています。
初心者の方でも実際に手を動かしながら試してみることで、Shader Graph の仕組みや表現の幅を自然に理解できるはずです。
今後もより実践的な演出や応用的なエフェクトについても紹介していけたらと思いますので、ぜひ引き続きチェックしていただければ幸いです。
ご意見・ご感想・質問などもお気軽にコメントください！