[Unity2D] メニュー画面などの背景全体にぼかしをかけるUIの作り方

この記事の所要時間: 約10分

使用環境

• Unity6.3
• Universal 2D(URP環境)

できること

以下のようにメニュー画面などで背景全体にぼかしをかけたいことがありますよね。
本記事ではこれを実装していきます。

ぼかしをかけるゲームオブジェクト: Sprite, UI要素
ぼかしをかけないゲームオブジェクト: UI要素

手順

0. ゲームオブジェクトを作る
   今回は例として以下のようなゲームオブジェクトを作成しました。そのぞれのゲームオブジェクトは作成したままの状態です。この画面にある左側のものがぼかし対象になります。
   

1. Main CameraのPostProcessingという機能を有効にする。
   HierarchyパネルからMain Cameraを選択し、InspectorパネルのCamera > Rendering > PostProcessingのチェックボックスを有効にする。
   これを用いることでMain Cameraが捉えている画面に対してエフェクトをかけることができます。
   メインカメラで写していない画面にはエフェクトがかからないので、ぼかしをかけたくないゲームオブジェクトはもう一つのカメラで写すという方針で実装します。
   

2. Global Volumeを作成する
   Hierarchyパネルで左クリックし、Volume > Global Volumeを選択してグローバルボリュームを作成してください。
   
   このゲームオブジェクトを用いて画面にかけるエフェクト(今回はぼかし)を制御します。

3. Volumeの設定を行う

• VolumeにあるNewというボタンを押下し、Volume Profileファイルを作成する。
  Asset > Scenes > [現在のシーン名]直下に自動でファイルが作成されます。
• Add Overrideを押下し、Depth Of Field(DOF: 被写界深度)を追加する
• Depth Of Fieldと書いてある下にあるALLボタンを押下する
  
  パラメタを変更するとリアルタイムでMain Cameraが映しているワールド空間にエフェクトがかかります。
  ![](https://storage.googleapis.com/zenn-user-upload/759e2973bc9d-202601
  25.gif)

このパラメータをスクリプトで制御することでエフェクトのかかり具合を制御可能です。
Global Volumeゲームオブジェクトを制御スクリプトにアサインすれば、Volumeのパラメタを変更できます。私はFocal Lengthというパラメタをスクリプトで制御することが多いです。
生成AIなどで「アサインしたGlobalVolumeのパラメタの変更の方法」を調べてみてください。ここではエディタの操作に限定して説明します。

• スクリーン空間のCanvasをワールド空間に移す
  以下の手順でCanvasをワールド空間に移し、カメラに収まるようにします。
  

ワールド空間のものをスクリーン空間に移すと縮尺が大きく変わってしまいます。
Canvasを作成する前にこのスクリーン空間にエフェクトをかけるかを検討しておくとよいと思います。

5. もうひとつのカメラを作成する
   Hierarchyパネルで左クリックし、Cameraを選択してカメラを作成してください。今回、Sub Cameraという名前にしました。
   Main CameraとSub Cameraは同じ画角になるようにしてください。
   (Sub CameraのTransformの値、Camera > Projection > Sizeを一致させてください)
   

6. カメラの設定を行う
   Unityでカメラを重ねるためには、ひとつのカメラをベースとしてほかのカメラをオーバーレイとすることで実現可能です。

• Sub Cameraを選択し、Camera > Render TypeをセレクトボックスからOverlayにしてください。
  
• Main Cameraを選択し、Camera > StackのプラスボタンからSub Cameraを追加してください。
  

現在のオブジェクトはMain CameraとSub Cameraの両方に写っているので、Main Camera状の描画(ぼかしエフェクト)とSub Camera(エフェクトなし)が重なっている状態になっています。

左側のゲームオブジェクトをMain Cameraだけに写し、右側のオブジェクトをSub Cameraだけに写します。

8. レイヤーを作成する
   任意のゲームオブジェクトを選択、LayerセレクトボックスからAdd Layer...を押下すると、レイヤー設定画面に遷移します。今回、SubLayerというレイヤーを作成しました。
   レイヤーを用いることでカメラごとに表示するオブジェクトを制御することができます。
   

9. ゲームオブジェクトに適用する
   右側のゲームオブジェクト(Sub Canvas)のレイヤーをSubLayerにしてください(子オブジェクトも適用)。
   

10. 各カメラに表示するレイヤーの設定を行う

• Main Cameraを選択し、Camera > Rendering > Culling Maskのセレクトボックスから、SubLayerのチェックだけを外す
  
  

• Sub Cameraを選択し、Camera > Rendering > Culling Maskのセレクトボックスから、SubLayerのチェックだけを付ける
  

11. Sub CameraのAudio Listenerコンポーネントを無効にする
    カメラを作成したとき、Audio Listenerがセットでついてくるのですが、1つのシーンにAudio Listenerは1つしか存在できないので無効にしてください
    

12. 完成
    完成しました！
    

最後に

これは自己流の作り方なので、よりよい方法があれば教えてください！