0.完成図
最終的にこんな感じの、特定のUIだけぼんやり光っているような（つまりUI以外は光っていない）ものが目標。
実行環境
Unity2021.3.1f（LTS）
1.準備
1-1.ステージやキャラクター、UIの準備
各自、適当に作って欲しい。
自分はStandard Assetsで2Dで適当にこんな感じに作成した。
別に2Dじゃなくても今回の方法は使えるので、3Dでもよい。
1-2.Post Processingの導入
Post Processingは、ゲーム画面全体をふんわりいい感じにしてくれるUnityの機能。
「画面全体」がポイントで、普通の方法でこれ導入すると、今回の目標である「UIだけ」光らせるのではなくて、もう画面全体色んなところが光る。それをどうにかする方法を今から説明するわけでして...。
とりあえず、Post Processingの導入方法はこちら。
-
Unity画面左上のメニューから
Window→Package ManagerでPackage Managerウィンドウを開く。
-
Package Managerウィンドウ左上、プルダウンで選択して
Unity Registryに切り替える。
-
Post Processingを探してインストールする。
2.レイヤーごとにカメラを分ける
準備ができたところで、どんどん進めていく。
まずは光らせたいUIのレイヤーと光らせたくないサムシングのレイヤーを別のものにする。
2-1.光らせたいUIのレイヤーの設定
-
どのゲームオブジェクトでもいいけど、インスペクタービューのLayerのプルダウンをクリック、
Add Layerをクリック
-
光らせるUI専用のレイヤーを新しく作成（名前はなんでもいい...）
-
ヒエラルキービューから、光らせたいUIの親オブジェクトのCanvasを選択、レイヤーを先程作ったレイヤーに設定
-
でてきたメッセージでYesを選択すると、一気に子オブジェクト全部のレイヤーを変更してくれる。
2-2.光らせたくないサムシングのレイヤーの設定
当たり前だけど、先程作ったレイヤー以外のものに設定する。
この後の手順の關係で、「レイヤーがない」のはちょっとまずいので（具体的に言うと画面に映らなくなる）、何かしらレイヤーを設定しておこう。
自分は適当にサムシング全選択で、Defaultレイヤーにした。
2-3.カメラを分ける
光らせたいUIのみを映すカメラを作っていく
-
Cameraを作成
-
作ったCameraの
Culling Maskの項目を、先程設定した、光らせたいUI用のレイヤーのみに設定する。
-
もともとあったカメラの方は逆に、光らせたいUI用のレイヤーを
Culling Maskの項目から外す。
-
現状UIはどのカメラに限らず映るようになっているので、UI用のカメラのみに映るように設定する。
光らせたいUIの親オブジェクトのCanvasを選択、インスペクタービューからCanvasコンポーネントのRender ModeをScreen Space-Cameraに変更する。
-
続いて、
Render Cameraの項目に、UI用のカメラをドラッグ＆ドロップ。
2-4.ここまでの完成図
UI用のカメラをオンオフすると、こんな感じで、UIのみの画面とUIが映ってない画面に切り替わるのならとりあえずOK。
謎に映ってないやつがあったら、そいつのレイヤーをもう一度確認してくるんだ。
2-5.カメラの深度を調整する
さて、各レイヤーごとに映すカメラを変えたところで、実際にPost Processingを始める前に一つ、調整しなければいけないのがカメラの「深度（depth）」である。
上記GIFでもわかるが、UI用のカメラが有効化されていた場合、MainCameraではなくUI用のカメラが現状優先されて描写されていると思われる。これを逆にする必要がある。
-
MainCameraとUI用のカメラ、両者の
CameraコンポーネントのDepthを比較する。
-
UI用のカメラの深度（Depth）をMainCameraよりも小さい数字にする。
これでゲーム画面には、MainCameraで映しているものが映っているはず！
3.Post Processingを導入する
いよいよ、Post Processingを使っていい感じにエフェクトをかけていく。
3-1.Post Processingを導入する
-
UI用のカメラを選択し、レイヤーを光らせるUI専用のレイヤーに設定する。
-
UI用のカメラに
Post-process Layer,Post-process Volumeの二つのコンポーネントを追加する。
3-2.Post-process Layerの設定
Post-process Layerコンポーネントに関しては、一つだけしか触るところはない。
Layerの項目を、光らせたいUI専用のレイヤーのみに設定する。
3-3.Post-process Volumeの設定
ここを失敗すると、UIは光らない。Post Processingの根幹。
-
is Globalにチェックをいれ、Profileの項目にあるNewボタンをクリックする。
-
続いて、Add effect....ボタンをクリック。
-
Unity→Bloomという順に選択。
-
Bloomの
Intensity,Colorの項目にチェックを入れて有効化し、適当に設定する。
この辺の項目、気になった人は調べるなり実地で検証するなりしてみてください。
-
MainCameraを一度非表示にしてみて、エフェクトを確認する。
いろいろと微調整してみて、いい感じになったら次に進む。
4.Render Textureを導入する
Render Textureとは、別のカメラで映しているものをテクスチャとしてとってくれる、めちゃ便利なUnityの機能。
今回は、UI用のカメラで映したものをテクスチャとしてとりこんで、MainCameraに重ねる方針。
-
プロジェクトビューで、
Render Textureをつくる。
-
作成したRender Textureを選択、インスペクタービューにて、Sizeの項目を該当の画面サイズにしておく。
-
UI用のカメラをヒエラルキービューから選択、
CameraコンポーネントのTarget Textureの項目にRender Textureをドラッグ＆ドロップする。
こうすることで、Cameraで映っている画面がRender Textureに描写される。
-
新しくCanvasを作成する。光らせたいUIを配置していたCanvasとは別に作成するのがポイント。（一緒くたにすると、レイヤー關係がややこしくなるぞ）
-
新しく作ったCanvasの子オブジェクトに
Raw Imageを設置する。
-
Raw Imageの設定諸々を施す。
Rect Transformはstretch×stretchにしたうえで下記のように数字を入力すると、Raw Imageは画面ピッタリに描写される。
あとはRaw ImageコンポーネントのTexture項目に、プロジェクトビューのRender Textureをドラッグ＆ドロップすると、Raw Image上にRender Textureのテクスチャが入力される。
5.完成図
感想：Render Textureべんり！！
6.参考文献
今回の記事は、下記の記事を参考にアレンジしたもの。
この記事にある加算マテリアルを使うと、もっとイイ感じになるぞ。
