UIの裏側をボケさせてUIを見やすくしたい時は、ポストプロセスを使うのが楽でエフェクトも色々追加しやすい【Unity】【uGUI】【ポストプロセス】

この記事でのバージョン
Unity 2022.3.32f1

はじめに

ゲーム中にメニュー画面などのUIを重ねて開いた時に、

裏側をボケさせて、前面のUIを見やすくしたいみたいな事はよくありますし、

そういう事が簡単に出来るアセットもあります。

ただ色々試した結果、ポストプロセスを使うのが楽で、

色々なエフェクトを組み合わせる事も簡単に出来るので、オススメという感じになりました。

という事で今回はポストプロセスでのUIの裏側をボケさせる方法の紹介です！

ちなみに参考に出してる画像は鋭意開発中の

【孤独なインディーゲーム開発者の一生】というゲームです！

(よろしければウィッシュリスト登録よろしくお願いします！

ポストプロセスでのUIの裏側をボケさせる方法

まずはポストプロセスの導入からですが、以前記事を書いてるので、そちらをご覧ください。

(上がURP用、下がビルドイン用)

導入が済んだら、カメラを分けて、前面のカメラにだけポストプロセスを効くようにします。

例えばURPでいうと前面用のカメラをOverlayで作成し、Post Processingを無効にします。

それを背面のカメラのBaseに設定し、背面のカメラはPost Processingを有効にします。

そして前面のボケさせたくないCanvasをScreen Space - Cameraにして、

前面のカメラを設定すれば設定完了です。

ちなみにポストプロセスはボヤけさせるだけならDepth Of Fieldだけでいいですが、

以下のように色々付け足すと、

ちょっとリッチな感じのボヤけ方にも出来ます。

(下は比較用の薄い黒だけの背景)

---