LoginSignup
2
3

More than 1 year has passed since last update.

【Unity】Render Textureを使ってPost ProcessingをUIだけに適用する

Last updated at Posted at 2022-07-22

0.完成図

最終的にこんな感じの、特定のUIだけぼんやり光っているような(つまりUI以外は光っていない)ものが目標。
完成図.png

実行環境

Unity2021.3.1f(LTS)

1.準備

1-1.ステージやキャラクター、UIの準備

各自、適当に作って欲しい。
自分はStandard Assetsで2Dで適当にこんな感じに作成した。
別に2Dじゃなくても今回の方法は使えるので、3Dでもよい。

準備ステージ.png

1-2.Post Processingの導入

Post Processingは、ゲーム画面全体をふんわりいい感じにしてくれるUnityの機能。
「画面全体」がポイントで、普通の方法でこれ導入すると、今回の目標である「UIだけ」光らせるのではなくて、もう画面全体色んなところが光る。それをどうにかする方法を今から説明するわけでして...。

とりあえず、Post Processingの導入方法はこちら。

  1. Unity画面左上のメニューから Window→Package Manager でPackage Managerウィンドウを開く。
    Post導入1.png

  2. Package Managerウィンドウ左上、プルダウンで選択して Unity Registry に切り替える。
    Post導入2.png

  3. Post Processing を探してインストールする。
    Post導入3.png

2.レイヤーごとにカメラを分ける

準備ができたところで、どんどん進めていく。
まずは光らせたいUIのレイヤー光らせたくないサムシングのレイヤーを別のものにする。

2-1.光らせたいUIのレイヤーの設定

  1. どのゲームオブジェクトでもいいけど、インスペクタービューのLayerのプルダウンをクリック、 Add Layer をクリック
    レイヤー設定1.png

  2. 光らせるUI専用のレイヤーを新しく作成(名前はなんでもいい...)
    レイヤー設定2.png

  3. ヒエラルキービューから、光らせたいUIの親オブジェクトのCanvasを選択、レイヤーを先程作ったレイヤーに設定
    レイヤー設定3.png

  4. でてきたメッセージでYesを選択すると、一気に子オブジェクト全部のレイヤーを変更してくれる。
    レイヤー設定4.png

2-2.光らせたくないサムシングのレイヤーの設定

当たり前だけど、先程作ったレイヤー以外のものに設定する。
この後の手順の關係で、「レイヤーがない」のはちょっとまずいので(具体的に言うと画面に映らなくなる)、何かしらレイヤーを設定しておこう

自分は適当にサムシング全選択で、Defaultレイヤーにした。
レイヤー設定5.png

2-3.カメラを分ける

光らせたいUIのみを映すカメラを作っていく

  1. Cameraを作成
    別カメつくる1.png

  2. 作ったCameraの Culling Mask の項目を、先程設定した、光らせたいUI用のレイヤーのみに設定する。
    別カメつくる2.png

  3. もともとあったカメラの方は逆に、光らせたいUI用のレイヤーを Culling Mask の項目から外す。
    別カメつくる3.png

  4. 現状UIはどのカメラに限らず映るようになっているので、UI用のカメラのみに映るように設定する。
    光らせたいUIの親オブジェクトのCanvasを選択、インスペクタービューから CanvasコンポーネントのRender ModeScreen Space-Camera に変更する。
    別カメつくる4.png

  5. 続いて、Render Camera の項目に、UI用のカメラをドラッグ&ドロップ。
    別カメつくる5.png

2-4.ここまでの完成図

UI用のカメラをオンオフすると、こんな感じで、UIのみの画面とUIが映ってない画面に切り替わるのならとりあえずOK。
謎に映ってないやつがあったら、そいつのレイヤーをもう一度確認してくるんだ。
途中経過.gif

2-5.カメラの深度を調整する

さて、各レイヤーごとに映すカメラを変えたところで、実際にPost Processingを始める前に一つ、調整しなければいけないのがカメラの「深度(depth)」である。
上記GIFでもわかるが、UI用のカメラが有効化されていた場合、MainCameraではなくUI用のカメラが現状優先されて描写されていると思われる。これを逆にする必要がある。

  1. MainCameraとUI用のカメラ、両者の CameraコンポーネントのDepth を比較する。
    Depth1.png

  2. UI用のカメラの深度(Depth)をMainCameraよりも小さい数字にする。
    Depth2.png

これでゲーム画面には、MainCameraで映しているものが映っているはず!
Depth3.png

3.Post Processingを導入する

いよいよ、Post Processingを使っていい感じにエフェクトをかけていく。

3-1.Post Processingを導入する

  1. UI用のカメラを選択し、レイヤーを光らせるUI専用のレイヤーに設定する。
    postレイヤー設定.png

  2. UI用のカメラに Post-process Layer,Post-process Volume の二つのコンポーネントを追加する。
    postコンポーネント.png

3-2.Post-process Layerの設定

Post-process Layerコンポーネントに関しては、一つだけしか触るところはない。
Layerの項目を、光らせたいUI専用のレイヤーのみに設定する。
post-layer.png

3-3.Post-process Volumeの設定

ここを失敗すると、UIは光らない。Post Processingの根幹。

  1. is Global にチェックをいれ、Profile の項目にあるNewボタンをクリックする。
    post-volume1.png

  2. 続いて、Add effect....ボタンをクリック。
    post-volume2.png

  3. Unity→Bloom という順に選択。
    post-volume3.png

  4. BloomのIntensity,Color の項目にチェックを入れて有効化し、適当に設定する。
    この辺の項目、気になった人は調べるなり実地で検証するなりしてみてください。
    post-volume4.png

  5. MainCameraを一度非表示にしてみて、エフェクトを確認する。
    いろいろと微調整してみて、いい感じになったら次に進む。
    post-volume5.png

4.Render Textureを導入する

Render Textureとは、別のカメラで映しているものをテクスチャとしてとってくれる、めちゃ便利なUnityの機能。
今回は、UI用のカメラで映したものをテクスチャとしてとりこんで、MainCameraに重ねる方針。

  1. プロジェクトビューで、 Render Texture をつくる。
    renderTx1.png

  2. 作成したRender Textureを選択、インスペクタービューにて、Sizeの項目を該当の画面サイズにしておく。
    renderTx2.png

  3. UI用のカメラをヒエラルキービューから選択、 CameraコンポーネントのTarget Texture の項目にRender Textureをドラッグ&ドロップする。
    こうすることで、Cameraで映っている画面がRender Textureに描写される。
    renderTx3.png

  4. 新しくCanvasを作成する。光らせたいUIを配置していたCanvasとは別に作成するのがポイント。(一緒くたにすると、レイヤー關係がややこしくなるぞ)
    renderTx4.png

  5. 新しく作ったCanvasの子オブジェクトに Raw Image を設置する。
    renderTx5.png

  6. Raw Imageの設定諸々を施す。
    Rect Transformはstretch×stretchにしたうえで下記のように数字を入力すると、Raw Imageは画面ピッタリに描写される。
    あとは Raw ImageコンポーネントのTexture 項目に、プロジェクトビューのRender Textureをドラッグ&ドロップすると、Raw Image上にRender Textureのテクスチャが入力される。
    renderTx6.png

5.完成図

感想:Render Textureべんり!!
完成図2.png

6.参考文献

今回の記事は、下記の記事を参考にアレンジしたもの。
この記事にある加算マテリアルを使うと、もっとイイ感じになるぞ。
スクリーンショット (215).png

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3