Chapter 24無料公開

🍍 矢印模様 (LineRenderer)

このチャプターの目次

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

LineRendererの設定

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

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

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

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

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

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

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

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

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

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