Chapter 29無料公開

🍍 集中線エフェクト【uGUI】

かもそば
かもそば
2021.10.18に更新

このチャプターでは、集中線エフェクトの作り方を紹介します。

uGUIにシェーダーを適用することで、画面に集中線を付けることができます。

サンプルデータ

サンプルデータはGitHubにて公開中です

https://github.com/rngtm/ShaderGraphCookBookSample

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)を配置して、マテリアルを適用すると以下のようになります。