Shader Forgeを使えばプログラムのコードを書かなくても、シェーダーが作れるよと
教えてもらって、最近Unityの勉強と同時進行でShader Forgeを触っています。
・・・しかし
知らない言葉が次から次に出てきて、「うわぁぁーーーー！！！(心の叫び)」と頭を抱えながら試行錯誤の日々を送っております・・・。
まだわからないことは沢山ありますが、今日はこんなシェーダーを作ることができたので、喜びと記念を兼ねてブログに書きます。
UIデザインの練習用に作っていた、メニュー画面の背景用のシェーダーを想定して作りました。「不思議な模様がゆっくり動いている」シェーダーのつもりです。
下の図は「こんなシェーダーを作ってみたいなあ」というラフです。
大まかなデザインのテーマはSF・近未来なイメージ。
このような感じで作りました
UIで使用するためのシェーダーなので、Shader Forgeを起動して「New Shader」ボタンを押したらば2D Spriteを選択します
以下のような画面が出てきたら小さい丸いアイコンをクリック・Planeを選択。
Cubeなどよりこっちのほうが平面で見やすいので変えます。
終わったら、Return to menuの隣にあるSettingを押します
作業に入る前に
上の図の項目にチェックマークが入っているかを確認します。
これらにチェックを入れることによって、今どんな動きになっているか目視できるのと、作業に必要なウィンドウが表示されるようになるのでおすすめです。
ノードを作るときに作業しやすくなるショートカット
例えば「ADD」を出したい。そんなときは
SHADER FORGE画面にマウスを持っていきます。そこでキーボードのAを押すと
こんな風にAの付く項目たちを素早く取り出すことができます！素敵
繋げてできたものがこちら
このような項目をつなげて、あのシェーダーを作ることができました。
自分がまだ勉強中なのでもしかしたら無駄なノードのつなぎ方とかになっている?＆
間違った解釈してる可能性があるのであんまり参考にはならないかもですが・・・。
作り終わったら「Compile Shader」ボタンを押しましょう
Unityの画面へ行き、以下のようにしてマテリアルを作ります
マテリアルを作ったら、Hierarchy→右クリック)UI→Imageで1枚の画像を配置します
配置したImageのInspector・Materialの項目に作ったマテリアルをドラッグ&ドロップします
すると以下のように動く画像ができましたー(すごく感動しました)
とりあえず今日はここまでです('◇')ゞ
・・・・。
今日のシェーダーを作っている途中に偶然面白い動きをするやつができたので記念にupしてみます。明日からも勉強がんばろう
