はじめに
ShaderGraphでLoadingっぽいアイコンを作っていきます。
環境は Unity 2019.3.0f3
Universal Render Pipeline(テンプレートのプロジェクトです)
UnlitGraph を使用しています。
ノード作成
アイコン作成
最初にRectangleノードで4つの細長い矩形を作成してそれをRotateのノードで角度調整をして下記の上下左右に交差している矩形を作成します。
円形上の細い線は大きさの異なるEllipseノードを2つ作成し、それをSubtractノードで減算して作成します。
あとは円形上の細い線からSubtractノードで上下左右に交差している矩形を減算すれば完成です
色の回転部分
先ず最初にPolar CoordinatesノードからY成分をを取り出しその値に0.5加算させて値を0~1の間にします。
それをTimeから減算し、Fractionノードで0~1を繰り返すことによって、ずっと色を回転させることができます。
前のブログに書いていたやり方だと均等にグラデーションを回転できなかったけどこんな感じにすればいい感じに回転できる#Unity pic.twitter.com/Ny9MYBsMmW
— 武0武/ (@zenkai1127) 2020年5月10日
色の設定
ここではアイコンと回転色を合成しています。 たいしたことはしていないのでここは説明なしで
完成
シーン上に試しに置いて色をつけてみたやつ
ゲーミングLoading#Unity pic.twitter.com/7VrFGCvIHZ
— 武0武/ (@zenkai1127) 2020年5月11日
今回作成したシェーダーはBoothで公開しています braveshop.booth.pm