【Unity】ShaderGraphでLoadingっぽいアイコンを作る

はじめに

ShaderGraphでLoadingっぽいアイコンを作っていきます。

環境は Unity 2019.3.0f3

Universal Render Pipeline(テンプレートのプロジェクトです)

UnlitGraph を使用しています。

ノード作成

アイコン作成

最初にRectangleノードで4つの細長い矩形を作成してそれをRotateのノードで角度調整をして下記の上下左右に交差している矩形を作成します。

円形上の細い線は大きさの異なるEllipseノードを2つ作成し、それをSubtractノードで減算して作成します。

あとは円形上の細い線からSubtractノードで上下左右に交差している矩形を減算すれば完成です f:id:Brave345:20200511174500j:plain

色の回転部分

先ず最初にPolar CoordinatesノードからY成分をを取り出しその値に0.5加算させて値を0~1の間にします。

それをTimeから減算し、Fractionノードで0~1を繰り返すことによって、ずっと色を回転させることができます。

f:id:Brave345:20200511174508j:plain

色の設定

ここではアイコンと回転色を合成しています。 たいしたことはしていないのでここは説明なしで

f:id:Brave345:20200511174505j:plain

完成

f:id:Brave345:20200511174600g:plain シーン上に試しに置いて色をつけてみたやつ f:id:Brave345:20200511174607g:plain

今回作成したシェーダーはBoothで公開しています braveshop.booth.pm