[Unity, URP, Shader Graph] 2Dで波紋のような歪みエフェクトを作る
はじめに
記事の内容
この記事では、URPを使った2Dゲームで使える円形の歪みエフェクトをシェーダーグラフを用いて作っていきます。
似たエフェクトを作っている記事が無く、このエフェクトを作るにあたりかなり色々な所を調べたので最近シェーダーグラフを触り出した素人ですが、同じことを実現したい方の役に立てると思います。
できるもの
このように円形に広がる歪みエフェクトを作っていきます。
Celesteのダッシュっぽいやつに使えます
動作原理
歪み系のシェーダーは主に、
- カメラの描画内容を取得する
- オブジェクト位置の描画内容をテクスチャに適用する(これで完全に背景と同化する)
- UVを歪ませ、オブジェクトの背景を歪める
という3つの手順で実装します。
事前準備
URPの設定
カメラの描画内容を取得するために、Universal Render Pipeline Assetの設定から不透明テクスチャの描画を有効にする必要があります。下の画像の赤枠部分を有効にしてください。
ソーティングレイヤーの設定
3Dのプロジェクトでは、上の設定をした後にScene Colorノードなどを使ってカメラの描画内容を取得できるようです。しかし2Dプロジェクトではその方法が使えないようなので、_CameraSortingLayerTextureという値を使ってレイヤーごとの描画内容を取得します。
新しいソートレイヤーTopMostを作成しておきます。対象のオブジェクトをこのレイヤーに設定することで、このレイヤーより前に描画されたレイヤーの描画内容を取得できるようになります。
シェーダーグラフ
ようやくシェーダーグラフを作っていきます。
シェーダーグラフの全体です
準備
Graph SettingのMaterialをUnlit、Surface TypeをTransparentにします。
また、Texture2Dのプロパティを作成し、Referenceを_CameraSortingLayerTextureにします。
その他のプロパティはお好みで設定したいものを追加してください。
Time グループ
以下がTimeグループです。
TimeノードとFractionノードを使って0~1を繰り返す値を取り出します。
Ripple グループ
Distance, Fraction, SmoothStepなどを使い、波紋のような図形を取り出します。
SubstractのBは先ほどのTimeグループからの出力を繋げてください。
UV グループ
Normal From HeightによってRippleの図形をUVとして使えるものに変換します。
それとScreen Positionを掛け算することで波紋の形に歪んだスクリーン座標のUVを作成します。
出力
作成したUVと準備で作成した_CameraSortingLayerTextureのTexture2DをSampleTexture2Dに入力し、それをBaseColorに繋ぎます。
使い方
上で作成したシェーダーを使用したマテリアルを作成し、適当なSpriteRendererのマテリアルに設定します。
また、SpriteRendererのソートレイヤーを事前準備で作成したTopMostに設定します。
これでSpriteの位置に歪みエフェクトが発生します🎉🎉🎉
歪みの波紋が繰り返される形になっているので、波紋を一度だけ出したいという場合はちょうどいいタイミングでオブジェクト自体を非表示にして使っています。
(シェーダーグラフで1度だけTimeが動くようにする方法がわかりませんでした...)
宣伝
自作ゲームをunityroomで公開しています！このエフェクトもその一環で作りました。
ぜひプレイしてみてください！
Discussion