３Ｄダイビングゲーム 手順２２
最終更新：
orika_ex_miyako 2023年12月20日(水) 17:45:26履歴
この手順ではカメラのぼかし演出を追加します。
画面の手前側に焦点を合わせて、遠くに見える風景をぼかす演出を追加します。
＜完成動画＞
https://gyazo.com/1e89cb7fb6dc4eb220ad088f30136490
以下の内容で順番に実装を進めていきます。
手順２２ −カメラのぼかし演出−
新しい学習内容は、以下の通りです。
３６．Post Processing アセットをインポートする
１．設計
Unityには Post Processing(ポストプロセシング) という、カメラにフィルターとエフェクトをかけてから画面を描画する機能があります。
参考サイト
この機能の１つである、Depth of Field(被写界深度)というピント(焦点)の機能を利用して、
画面の手前側にピントを合わせて、画面の奥に見える風景をぼかして表現する演出を実装します。
必要なエフェクトを選択して追加するだけで動作するため非常に便利な機能ですが、
画面全体にエフェクトをかけるため、総じて処理が重くなりがちです。
今回は１つのエフェクトしか実装しませんが、今後も Post Processing を利用する機会は多くありますので、
まずは色々なエフェクトを試してみて、自分の好みのエフェクトを適量だけ利用していくことを念頭に置いておく必要があります。
サイトの記事などもそうですが、鵜呑みせずに、まずは自分で確認をして体感しておくことが重要です。
頭でっかちにならないように気を付けましょう。
Post Processing は Package Manager からインポートすることが出来ます。この手順ではインポートの方法をまとめます。
２．Package Managerを利用して、Post Processing をインポートする
最初に、Post Processing がインポートされているかを確認します。
Project 内の Packages フォルダを確認して、Post Processing フォルダがあるか確認してください。
もしもここにフォルダがあるならば、すでにインポートされて利用できる状態です。
フォルダ確認
ここにフォルダがない場合には、次の手順でインポートを行います。フォルダがある場合は以下の手順は飛ばして、次の手順へ進んでください。
Unity の左上のメニューより、Window => Package Manager を選択してください。
Sceneビューなどの横に、Package Manager ビューのタブが追加されます。追加された選択してください。
タブ画像
Package Manager ビューのタブのすぐ下にある Packages を選択して、項目を Unity Registry に変更してください。
Packages の設定を Unity Registry に変更
たくさんのアセットが表示されますので、その中にある Post Processing を探して選択してください。
右側の詳細画面に Post Processing の内容が表示されます。
Package Manager
Download を押すとデータのダウンロードが始まります。しばらく待つと、ボタンが Import に代わりますので、Import を押してください。
Importの確認ウインドウが開いたら、右下にある Import ボタンを押してください。プログレス表示が出て、インポートが開始されます。
フォルダが追加されてプログレス表示がなくなればインポート完了です。
３７．カメラのぼかし演出を追加する
１．設計
Post Processing の機能を利用するには、カメラへの設定と、演出を行うためのゲームオブジェクトが１セットで必要になります。
カメラには Post Processing Layer コンポーネントを追加します。こちらでは指定した Layer を持つゲームオブジェクトに対して
エフェクトをかけて表示させることが出来ます。
ゲーム画面に、Post Processing を担当する役割のゲームオブジェクトを１つ作成し、こちらには Post Processing Volume コンポーネントを追加します。
このゲームオブジェクトの Layer をカメラ側で指定した Layer と同じ Layer にすることでゲーム画面に対してエフェクト処理を実装することが出来ます。
順番に実装してみましょう。
２．Main Camera ゲームオブジェクトに Post Processing Layer コンポーネントを追加して設定を行う
ヒエラルキーにある Main Camera ゲームオブジェクトを選択します。
インスペクターの一番下にある Add Component ボタンを押して、Post Processing Layer コンポーネントを追加します。
Main Camera ゲームオブジェクト インスペクター画像
Post Processing Layer コンポーネント内の Layer 設定が Nothing に設定されていますので、PostProcessing に設定し直します。
もしも PostProcessing という Layer がない場合には新しく追加して適用してください。
Layerの設定を行う
これでカメラ側の設定は完了です。
３．ヒエラルキーに Post-process Volume ゲームオブジェクトを作成する
ヒエラルキーの何もない部分で右クリック、あるいは + ボタンを押してしてメニューを開き、3D Object => Post-process Volume を選択します。
新しく Post Processing Volume コンポーネントがアタッチされている Post-process Volume ゲームオブジェクトが作成されます。名前はそのままでも構いません。
＜手順動画 Post-process Volume ゲームオブジェクトを作成する＞
https://gyazo.com/da059db191c3325c5f1961a1ca8521dd
ヒエラルキー画像
今回は不要ですので、BoxCollider コンポーネントは Remove してください。
Post-process Volume ゲームオブジェクト インスペクター画像(BoxCollider リムーブ後)
４．Post Processing Volume コンポーネントの設定を行う
それでは Post Processing Volume コンポーネントの設定を行います。
まずは Layer を Default から、先ほどカメラで設定した Layer と同じ PostProcessing に変更します。
続いて、Post Processing Volume コンポーネント内にある Is Groval にチェックを入れます。このチェックが入っていると
ゲーム画面全体にエフェクトが効果を与えるようになります。
Post-process Volume ゲームオブジェクト インスペクター画像
設定が終了したら、エフェクトを追加する準備を行います。
Profile の右側にある New ボタンを押してください。自動的に新しいエフェクト設定用の Profile が作成されて適用されます。
＜手順動画 新しい Profile を作成する＞
https://gyazo.com/0b9e6c7630a3167a62a46658c622a80d
Profile が追加されると、その下に Add Effect ボタンが表示されます。これでエフェクトが追加できるようになりました。
Add Effect ボタンを押して、Unity => Depth of Field を選択してください。エフェクト用の Depth of Field コンポーネントが追加されます。
＜手順動画 Effect に Depth of Field を追加する＞
https://gyazo.com/6f6d38a0c2c84de20f35006b662f22b6
このコンポーネントの値を操作することで、ピンボケの現象をゲーム画面に再現することが出来ます。
各項目にチェックを入れると有効になります。数値については、公式マニュアルを確認して是非自分で調べながら設定をしてみてください。
下記の参考サイトにも詳細な説明があります。
Gameビューに設定内容が即時反映されますので、そちらを見ながら操作を行ってください。(ゲームを実行する必要はありません)
参考サイト
ピントを合わせるのは結構シビアですので、もしも上手くいかない場合には、以下の画像を参考にして各数値を設定してください。
Depth of Field コンポーネントの設定
以上で設定は完了です。
５．ゲームを実行して動作を確認する
ゲームを実行して、ゲーム画面にエフェクトがかかっているか確認してみてください。
＜実行動画 Depth of Field のオン・オフを切り替えて確認してみる＞
https://gyazo.com/1e89cb7fb6dc4eb220ad088f30136490
以上でこの手順は終了です。
Post Processing には他にもエフェクトがあります。スクリプトの記述も不要ですので、機会を見て試してみてください。
=> 次は 手順２３ −一人称視点カメラと自撮り視点カメラの実装− です。
画面の手前側に焦点を合わせて、遠くに見える風景をぼかす演出を追加します。
＜完成動画＞
https://gyazo.com/1e89cb7fb6dc4eb220ad088f30136490
以下の内容で順番に実装を進めていきます。
手順２２ −カメラのぼかし演出−
３６．Post Processing アセットをインポートする ３７．カメラのぼかし演出を追加する
新しい学習内容は、以下の通りです。
・Post Processing −Depth of Fieldー
３６．Post Processing アセットをインポートする 
１．設計
Unityには Post Processing(ポストプロセシング) という、カメラにフィルターとエフェクトをかけてから画面を描画する機能があります。
参考サイト
Unity公式マニュアル
Post-processing
https://docs.unity3d.com/ja/current/Manual/PostPro...
styly 様
Unity Post Processingの基礎を理解する【Unity】
https://styly.cc/ja/tips/unity_postprocessing_mast...
この機能の１つである、Depth of Field(被写界深度)というピント(焦点)の機能を利用して、
画面の手前側にピントを合わせて、画面の奥に見える風景をぼかして表現する演出を実装します。
必要なエフェクトを選択して追加するだけで動作するため非常に便利な機能ですが、
画面全体にエフェクトをかけるため、総じて処理が重くなりがちです。
今回は１つのエフェクトしか実装しませんが、今後も Post Processing を利用する機会は多くありますので、
まずは色々なエフェクトを試してみて、自分の好みのエフェクトを適量だけ利用していくことを念頭に置いておく必要があります。
サイトの記事などもそうですが、鵜呑みせずに、まずは自分で確認をして体感しておくことが重要です。
頭でっかちにならないように気を付けましょう。
Post Processing は Package Manager からインポートすることが出来ます。この手順ではインポートの方法をまとめます。
２．Package Managerを利用して、Post Processing をインポートする
最初に、Post Processing がインポートされているかを確認します。
Project 内の Packages フォルダを確認して、Post Processing フォルダがあるか確認してください。
もしもここにフォルダがあるならば、すでにインポートされて利用できる状態です。
フォルダ確認
ここにフォルダがない場合には、次の手順でインポートを行います。フォルダがある場合は以下の手順は飛ばして、次の手順へ進んでください。
Unity の左上のメニューより、Window => Package Manager を選択してください。
Sceneビューなどの横に、Package Manager ビューのタブが追加されます。追加された選択してください。
タブ画像
Package Manager ビューのタブのすぐ下にある Packages を選択して、項目を Unity Registry に変更してください。
Packages の設定を Unity Registry に変更
たくさんのアセットが表示されますので、その中にある Post Processing を探して選択してください。
右側の詳細画面に Post Processing の内容が表示されます。
Package Manager
Download を押すとデータのダウンロードが始まります。しばらく待つと、ボタンが Import に代わりますので、Import を押してください。
Importの確認ウインドウが開いたら、右下にある Import ボタンを押してください。プログレス表示が出て、インポートが開始されます。
フォルダが追加されてプログレス表示がなくなればインポート完了です。
３７．カメラのぼかし演出を追加する
１．設計
Post Processing の機能を利用するには、カメラへの設定と、演出を行うためのゲームオブジェクトが１セットで必要になります。
カメラには Post Processing Layer コンポーネントを追加します。こちらでは指定した Layer を持つゲームオブジェクトに対して
エフェクトをかけて表示させることが出来ます。
ゲーム画面に、Post Processing を担当する役割のゲームオブジェクトを１つ作成し、こちらには Post Processing Volume コンポーネントを追加します。
このゲームオブジェクトの Layer をカメラ側で指定した Layer と同じ Layer にすることでゲーム画面に対してエフェクト処理を実装することが出来ます。
順番に実装してみましょう。
２．Main Camera ゲームオブジェクトに Post Processing Layer コンポーネントを追加して設定を行う
ヒエラルキーにある Main Camera ゲームオブジェクトを選択します。
インスペクターの一番下にある Add Component ボタンを押して、Post Processing Layer コンポーネントを追加します。
Main Camera ゲームオブジェクト インスペクター画像
Post Processing Layer コンポーネント内の Layer 設定が Nothing に設定されていますので、PostProcessing に設定し直します。
もしも PostProcessing という Layer がない場合には新しく追加して適用してください。
Layerの設定を行う
これでカメラ側の設定は完了です。
３．ヒエラルキーに Post-process Volume ゲームオブジェクトを作成する
ヒエラルキーの何もない部分で右クリック、あるいは + ボタンを押してしてメニューを開き、3D Object => Post-process Volume を選択します。
新しく Post Processing Volume コンポーネントがアタッチされている Post-process Volume ゲームオブジェクトが作成されます。名前はそのままでも構いません。
＜手順動画 Post-process Volume ゲームオブジェクトを作成する＞
https://gyazo.com/da059db191c3325c5f1961a1ca8521dd
ヒエラルキー画像
今回は不要ですので、BoxCollider コンポーネントは Remove してください。
Post-process Volume ゲームオブジェクト インスペクター画像(BoxCollider リムーブ後)
４．Post Processing Volume コンポーネントの設定を行う
それでは Post Processing Volume コンポーネントの設定を行います。
まずは Layer を Default から、先ほどカメラで設定した Layer と同じ PostProcessing に変更します。
続いて、Post Processing Volume コンポーネント内にある Is Groval にチェックを入れます。このチェックが入っていると
ゲーム画面全体にエフェクトが効果を与えるようになります。
Post-process Volume ゲームオブジェクト インスペクター画像
設定が終了したら、エフェクトを追加する準備を行います。
Profile の右側にある New ボタンを押してください。自動的に新しいエフェクト設定用の Profile が作成されて適用されます。
＜手順動画 新しい Profile を作成する＞
https://gyazo.com/0b9e6c7630a3167a62a46658c622a80d
Profile が追加されると、その下に Add Effect ボタンが表示されます。これでエフェクトが追加できるようになりました。
Add Effect ボタンを押して、Unity => Depth of Field を選択してください。エフェクト用の Depth of Field コンポーネントが追加されます。
＜手順動画 Effect に Depth of Field を追加する＞
https://gyazo.com/6f6d38a0c2c84de20f35006b662f22b6
このコンポーネントの値を操作することで、ピンボケの現象をゲーム画面に再現することが出来ます。
各項目にチェックを入れると有効になります。数値については、公式マニュアルを確認して是非自分で調べながら設定をしてみてください。
下記の参考サイトにも詳細な説明があります。
Gameビューに設定内容が即時反映されますので、そちらを見ながら操作を行ってください。(ゲームを実行する必要はありません)
参考サイト
Unity公式 Post Processing パッケージ/ドキュメント
Depth of Field
https://docs.unity3d.com/Packages/com.unity.postpr...
Quita ELIXIR 様
【Unity】Post Processing Stack Version 2.x を使用する
https://qiita.com/ELIXIR/items/ff4d9a52eae201db9ba...
エクスプラボ 様
【Unity】Depth of Field(被写界深度)の使い方【Post Processing】
https://ekulabo.com/depth-of-field
ピントを合わせるのは結構シビアですので、もしも上手くいかない場合には、以下の画像を参考にして各数値を設定してください。
Depth of Field コンポーネントの設定
以上で設定は完了です。
５．ゲームを実行して動作を確認する
ゲームを実行して、ゲーム画面にエフェクトがかかっているか確認してみてください。
＜実行動画 Depth of Field のオン・オフを切り替えて確認してみる＞
https://gyazo.com/1e89cb7fb6dc4eb220ad088f30136490
以上でこの手順は終了です。
Post Processing には他にもエフェクトがあります。スクリプトの記述も不要ですので、機会を見て試してみてください。
=> 次は 手順２３ −一人称視点カメラと自撮り視点カメラの実装− です。
コメントをかく