このチャプターでは、集中線エフェクトの作り方を紹介します。
uGUIにシェーダーを適用することで、画面に集中線を付けることができます。
サンプルデータ
サンプルデータはGitHubにて公開中です
Assets/_SampleData/ShaderSamples/03_UI_ConcentrationLine
作り方
Polar Coordinates
今回はPolar Coordinates を使用します。
Polar Coordinatesの出力のR成分には円形グラデーション、G成分には時計回りグラデーションが含まれています。
広がる線を作る
時計回りグラデーションにSimple Noiseを適用して、広がる線を作ります。
Scale に設定している 240 という数値に深い意味はありません (Scaleの数値を変えながらいろいろと試してみたら、240にしたときがイイ感じにだったので、240にしているだけです)
Sineへ入力
Simpleノイズで作った線をSineノードへ入力します。
入力値をズラしたとき、-1~1を往復するような変化を作りたいため、ここではSineを使用しています。
時間を足す
ここで、Sineの入力値に時間を加算します。
こうすることで、Sineノードが以下のように動くようになります。
円形グラデーションとSineを混ぜる
Sineノードと円形グラデーションをLerpで合成します。
Lerpを使うことで、円形グラデーションとSineを 一定の割合でブレンドすることができます。
Lerpの結果は以下のようになります。
Smoothstep で調整
さらに、Smoothstepで調整すると以下のようになります。
頂点カラーの乗算 (完成)
Vertex Colorを乗算して、Masterノードへ出力してシェーダーの完成です。
Vertex Colorを利用することで、UI上で設定されたカラー情報を取得することができます。
集中線エフェクトを使う
画面いっぱいにuGUIのImage(またはRaw Image)を配置して、マテリアルを適用すると以下のようになります。