しゅふみん日記

家庭と会社とその他もろもろ

【Shader Forge】動的なU I背景シェーダーを作る

 

Shader Forgeを使えばプログラムのコードを書かなくても、シェーダーが作れるよと

教えてもらって、最近Unityの勉強と同時進行でShader Forgeを触っています。

・・・しかし

 

知らない言葉が次から次に出てきて、「うわぁぁーーーー!!!(心の叫び)」と頭を抱えながら試行錯誤の日々を送っております・・・。

 

まだわからないことは沢山ありますが、今日はこんなシェーダーを作ることができたので、喜びと記念を兼ねてブログに書きます。

f:id:yuumin5220:20180703213718g:plain

UIデザインの練習用に作っていた、メニュー画面の背景用のシェーダーを想定して作りました。「不思議な模様がゆっくり動いている」シェーダーのつもりです。

 

下の図は「こんなシェーダーを作ってみたいなあ」というラフです。

大まかなデザインのテーマはSF・近未来なイメージ。

f:id:yuumin5220:20180703213050p:plain

このような感じで作りました

UIで使用するためのシェーダーなので、Shader Forgeを起動して「New Shader」ボタンを押したらば2D Spriteを選択します

f:id:yuumin5220:20180703214648p:plain

以下のような画面が出てきたら小さい丸いアイコンをクリック・Planeを選択。

Cubeなどよりこっちのほうが平面で見やすいので変えます。

 f:id:yuumin5220:20180703215534p:plain

終わったら、Return to menuの隣にあるSettingを押します

作業に入る前に

f:id:yuumin5220:20180703220341p:plain

上の図の項目にチェックマークが入っているかを確認します。

これらにチェックを入れることによって、今どんな動きになっているか目視できるのと、作業に必要なウィンドウが表示されるようになるのでおすすめです。

 

ノードを作るときに作業しやすくなるショートカット

例えば「ADD」を出したい。そんなときは

SHADER FORGE画面にマウスを持っていきます。そこでキーボードのAを押すと

f:id:yuumin5220:20180703221205p:plain

こんな風にAの付く項目たちを素早く取り出すことができます!素敵

 繋げてできたものがこちら

f:id:yuumin5220:20180703223307p:plain

 このような項目をつなげて、あのシェーダーを作ることができました。

自分がまだ勉強中なのでもしかしたら無駄なノードのつなぎ方とかになっている?&

間違った解釈してる可能性があるのであんまり参考にはならないかもですが・・・。

 

作り終わったら「Compile Shader」ボタンを押しましょう

f:id:yuumin5220:20180703223726p:plain

Unityの画面へ行き、以下のようにしてマテリアルを作ります

f:id:yuumin5220:20180703224609p:plain

 

マテリアルを作ったら、Hierarchy→右クリック)UI→Imageで1枚の画像を配置します

配置したImageのInspector・Materialの項目に作ったマテリアルをドラッグ&ドロップします

f:id:yuumin5220:20180703225315p:plain

すると以下のように動く画像ができましたー(すごく感動しました)

f:id:yuumin5220:20180703225647g:plain

 

とりあえず今日はここまでです('◇')ゞ

・・・・。

今日のシェーダーを作っている途中に偶然面白い動きをするやつができたので記念にupしてみます。明日からも勉強がんばろう

f:id:yuumin5220:20180703231127g:plain