おもちゃバコ

主に趣味について

Unity: トランジションを利用して画面遷移を作る

こんちは

RPGのエンカウント演出とかってUnityでどうやって作るのか調べました.
(フェードイン/フェードアウトってやつです.)
そのときの備忘録です.


参考文献

ルール画像(マスク画像?)はこちらのサイトで配布されているものを使用しました.
4you.bz


開発環境

Visual Studio Code 1.63.2 (ShaderToy拡張機能)
Unity 2020.3.25.f1
Windows 10 Home 21H2


トランジションとは

場面切り替え用の演出のことです(多分).
pangaea.top

ゲームだけでなく映像作品にもよく使われていますね.


原理

ルール画像と呼ばれるモノクロ画像の画素値を利用して演出を作るみたいです.

画素座標(X,Y)における元画像の画素値をA,ルール画像の画素値をB,閾値の画素値をTとすると,

B < T ならば 0
B >= T ならば 1

をAに乗算すればいいのではないかと思います.

ShaderToyで実験

我流なので正しいかは分かりませんが,とりあえずShaderToyで実験してみました.

他にもやり方はあるっぽいですが,簡単なので今回はこれで行きます.

ルール画像は参考文献のを使用しました.
元画像は画像処理で有名な人です.

f:id:lambda410:20220107230032g:plain

なぜか画像を保存すると黒くなるはずの箇所が白いんですよね.
勘違いしているのかなぁ.


じゃあUnityではどうやるの?

本題のUnityです.

Unityのイロハが分からないので先人達を頼ります.
blog.cfm-art.net

シェーダーを使ってアルファ値でうんぬんするみたいですね.

前準備

フェード処理を作ってみます.

とりあえずGUIトランジションするために必要なものを用意.

  1. Unlit Shader
    光は関係ないのでこれで良いはず.

  2. Material
    シェーダーをアタッチします.

  3. Imageを付けたCanvas
    初期状態だと小さいので,画面全体にサイズを変更します.

f:id:lambda410:20220109132646p:plain

シェーダ1

手始めにアルファ値をいじってみます.

透明にするために以下の設定をします.

Blend SrcAlpha OneMinusSrcAlpha

docs.unity3d.com

UNITY_APPLY_FOGはいらなそうなのでコメントアウトしました.
あっても大丈夫だとは思いますが.
light11.hatenadiary.com

実行結果1

アルファ値をスライダーで変更しています.
これだけでもフェードイン/アウト出来てそうですね.

f:id:lambda410:20220109142042g:plain

シェーダ2

次はルール画像を使用してみる.

ソースコードのアルファ値を閾値として,ルール画像の画素値と比較する方針で行きます.
ShaderToyの奴と同じ感じです.

ルール画像はモノクロなのでRGBのどの値を使用しても良いです.
あと,閾値の範囲を[-1.0f, 1.0f]にして計算結果を[0.0f, 1.0f]になるように調整しました.

シェーダのTextureにルール画像をセットするのを忘れずに.
f:id:lambda410:20220109140009p:plain

実行結果2

ルール画像の通りになってますね.

f:id:lambda410:20220109142141g:plain

出力にルール画像のRGB値を使用しているので変な感じですが,returnを変更すれば色も変えられます.

// 黒のフェードアウト
return fixed4(0.0f, 0.0f, 0.0f, output);

f:id:lambda410:20220109142351g:plain


まとめ

トランジション処理で表現の幅を広げよう!!!