Chapter 24無料公開

🍍 矢印模様 (LineRenderer)

このチャプターでは、LineRenderとShaderGraphを組み合わせて、流れる矢印模様を作る方法を紹介します。

LineRendererの設定

LineRenderer の Texture Mode を Tile に設定します



TextureModeはLineRendererへのUVの貼り方を設定するものです。
StretchだとUVが引き延ばされるのに対して、TileではUVがタイリングされます。

矢印模様を作る

手順1 : X - Y

UVのX成分からY成分を引くと、斜めのグラデーションになります。

黒い部分は X - Y < 0、白い部分は X - Y > 0、境界部分は X - Y = 0の領域です。

手順2 : 上下対称にする

Yから0.5を引き、Absoluteを取ることで、グラデーションが上下対称になります。

手順3 : 二値化

グラデーションにFractionとStepを適用すると、矢印の模様になります。

結果

このシェーダーをLineRendererで表示してみると、以下のようになります。

手順4 : 着色

Lerpノードを利用して、矢印に色を付けます。

手順5 : 矢印を動かす

UVのX成分にTimeを加算することで、矢印が動くようになります。

手順6 : 矢印を逆にする

矢印の向きを逆にしたい場合、UVのX成分にOne MinusやNegateを適用してグラデーションを左右反転させます。

ShaderGraph全体