はじめに
こんにちは！株式会社キッズスターで2Dアニメーションデザイナーをしている Kawamuraです。
今回は光沢表現に使えそうな、ラインが1方向にループ移動するシェーダーを ShaderGraph で作成してみました。
記事では Unlit 設定にしており、2Dのテクスチャ表示(uGUI の Image,SpriteRenderer)を想定しています。
参考
cosθとsinθの関係をアニメーションで理解しよう！[数学入門]
動作環境
- Unity 2021.3.xx
- ShaderGraph 12.1.xx
- ビルトイン レンダリングパイプライン
ノード
ポイント：Sine波の 1→0 の間だけ、光沢のスクロール移動に反映させる
ノード解説
移動値のクリッピング
Sine の 1→0 を取り出すために Cosine の値で条件分岐しています。
条件に使うノード Comparison は LessOrEqual を採用します。
その他の条件は公式マニュアルを参考にしてください。
LessOrEqual
void Unity_Comparison_LessOrEqual_float(float A, float B, out float Out)
{
Out = A <= B ? 1 : 0;
}
大まかな図ですが、赤いエリアを移動に反映する値として取り出す仕組みになります。
※図の値は解説用です。設定している実数値とは異なります
光沢ラインの作成
光沢ラインは Rectangle ノードで生成される長方形を使用します。
Rotateノードの unit は Degrees(度数法)にしておくと、角度を直感的に設定できて便利です。
テクスチャとラインの合成
参照したテクスチャの描画範囲に光沢ラインを加算します。
Discussion