前半では、
作成したシェーダーの_ProgressというプロパティをC#プログラムから変化させて画面遷移を行いました。
後半では、シェーダーグラフを使った様々な画面遷移演出を紹介します。

テクスチャを使ったトランジション

Tiling and Offsetノードでテクスチャをタイリングさせ、これをトランジションのグラデーションとして利用しています。

以下のLinearテクスチャを使用しました。

Linearテクスチャの作成方法は、以下のチャプターにて解説しています。
🍇Linearテクスチャの作成とインポート【Substance Designer】

広がる丸 その1

丸が広がる画面遷移です。

円形グラデーションを使用しています。

この方法だと、円がつぶれて楕円のようになってしまいます。

広がる円 その2

UVを引き延ばして、正円が広がるような画面遷移を作ってみます。

UVを引き延ばすロジックは複雑なので、Custom Functionを使って実装します。

Custom Functionは以下のように設定します。

float2 r = _ScreenParams.xy; // スクリーン解像度
float2 p = UV * r; // スクリーン座標の計算
Out = length(p * 2.0  - r ) / length(r); // グラデーションの計算

以下のような正円の遷移になります。

時計回り その1

時計回りの画面遷移です。

時計回りグラデーションを利用しています。

時計回り その2

時計回りの画面遷移です。

時計回りのグラデーションを16倍し、Frationを適用しています。

横シマシマ その1

シマシマ模様を使った画面遷移です

横のシマシマグラデーションを利用しています。

横シマシマ その2

こちらはシマシマの中央から上下に広がるような動きをします

グラデーションから0.5を減算し、Absoluteを適用することでグラデーションの変化が上下対象になります。
上下対称グラデーションの値域は0~0.5なので、2倍して0~1にしています。

ノイズ その1

ノイズを使った画面遷移です。

UVから右方向グラデーションを作り、Lerpでノイズを混ぜています。

ノイズ その2

中心から外側へ向かって融けるような表現です。

円形グラデーションにノイズを乗算したものを使用しています。

水玉模様

執筆中...