Unityに関連する記事です

 ゲーム画面の見栄えをよくするための機能として、カメラへのポストプロセッシングを実装します。


<実装画像 .櫂好肇廛蹈札奪轡鵐阿覆掘



<実装画像◆.櫂好肇廛蹈札奪轡鵐阿△蝓 ColorGradingー>




<実装画像 ポストプロセッシングなし>



<実装画像ぁ.櫂好肇廛蹈札奪轡鵐阿△蝓 Vignetteー>




<実装動画>
動画ファイルへのリンク



 以下の内容で実装を進めていきます。

手順12 ーポストプロセッシングの実装ー
17.ポストプロセッシングを利用する



 新しい学習内容は、以下の通りです。

 ・ポストプロセッシング ーColorGrading、Vignetteー



17.ポストプロセッシングを利用する

1.設計


 ポストプロセッシングとは Unity の持つ機能の1つです。
カメラにエフェクト用のフィルターをかけて、ゲーム画面全体の画像に対して演出を行い、見た目を豪華に装飾します。

 ポストプロセッシングには複数のエフェクトが用意されており、それらを上手く組み合わせる事によって、相乗効果を生み出せます。

 この機能は2Dだけではなく、3Dでも機能します。

 ただし、カメラに Cinemachine を利用しているか、していないか、
また、描画形式をビルトインにしているか、URP にしているか等で
ポストプロセッシングの設定方法や、スクリプトからの制御方法が異なります。

 今回の手順では、カメラを Cinemachine で利用し、描画形式はビルトインで利用している場合の手順を紹介しています。


参考サイト
Unity 公式マニュアル
ポストプロセス
https://docs.unity3d.com/ja/current/Manual/PostPro...
Unity 公式マニュアル
ポストプロセスを理解する
https://docs.unity3d.com/ja/current/Manual/BestPra...
STYLY 様
Post Processingの基礎を理解する【Unity】
https://styly.cc/ja/tips/unity_postprocessing_mast...
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing)を使ってプロ級の画面に
https://ekulabo.com/post-processing


2.ポストプロセッシングをインストールする


 ポストプロセッシングは Unity の機能ですが、標準機能ではありませんので、プロジェクトごとに自分でインポートする必要があります。
ただし、描画形式が URP の場合には、最初からポストプロセッシングの機能が含まれているため、この手順は不要になります。

 Unity の左上のメニューより、Window => PackageManager を選択し、PackageManager ウインドウを開きます。
ウインドウ内の項目などは、公式サイトに説明がありますので、そちらにて操作方法を確認してください。

PackageManager ウインドウ
https://docs.unity3d.com/ja/current/Manual/upm-ui....


 
 PackageManager ウインドウ内の左上には、Packages という現在ウインドウ内に表示しているパッケージの内容が設定できます。
Packages の設定が My Asset である場合、今まで自分がダウンロードしてインポートしたことがあるアセットが一覧表示されます。

 この部分を UnityRegistry に変更してください。最初から設定されていれば、変更せずに問題ありません。


Packages の設定



 UnityRegistry を選択すると、PackageManager ウインドウ内の表示が、Unity の管理しているパッケージの一覧表示になります。
左側のパッケージ一覧から、PostProcessing を探して選択します。バージョンはその時の最新のバージョンが表示されますので、そのままで問題ありません。
右側に選択しているパッケージの詳細情報が表示されますので、右下にある Install ボタンを押してインストールしてください

 インストールが完了すると、PostProcessing の右側にチェックマークが表示されます。
また、Projects フォルダ内に PostProcessing フォルダが追加されています。


PackageManager ウインドウ



Projects フォルダ



 これで、Untiy 内においてポストプロセッシングの機能が利用できるようになりました。


3.Main Camera ゲームオブジェクトに Post-process Layer コンポーネントを追加する


 実際にポストプロセッシングの機能を利用できるように設定を行っていきます。
ポストプロセッシングはカメラに対して機能するため、シーン内のカメラに対象となるコンポーネントをアタッチする必要があります。

 ポストプロセッシング用のコンポーネントは2つあります。

 1つは Post-process Layer(ポストプロセス・レイヤー)といい、ポストプロセッシングを適用する Layer を設定するためのコンポーネントです。
必ずカメラにアタッチするコンポーネントになります。このコンポーネントで指定している Layer に対して、ポストプロセッシングを適用します

 もう1つは Post-process Volume(ポストプロセス・ボリューム)といい、こちらはカメラのゲームオブジェクト、
あるいは新しくゲームオブジェクトを作成して、このコンポーネント専用のゲームオブジェクトとして用意します。

 こちらの機能は、どの範囲でポストプロセッシングを適用するかを設定するためのコンポーネントです。
シーン全体にポストプロセッシングを適用するか、あるいは特定の範囲にのみ適用するかを設定します。
 
 また、実際に適用するエフェクトを設定する際にも利用しますので、このコンポーネントがポストプロセッシングの実体であるとも言えます。



 それでは、順番にコンポーネントの追加と設定を行います。

 ヒエラルキーにある Main Camera ゲームオブジェクトを選択し、Layer の設定が Default になっているか確認してください。
初期設定では Default のはずですが、もしも違う場合には、Default に設定を直して下さい。


インスペクター画像




 次に、インスペクターの一番下にある Add Component ボタンを押して
Post-process Layer コンポーネントを探して追加してください。検索窓で探すといいでしょう。

 Post-process Layer コンポーネントの中にある Layer の設定を Nothing から Default に変更します。
Default に設定するとすぐ下に警告が表示されますが、こちらは問題ありません。
それ以外の部分の設定は初期設定のままで問題ありません。


インスペクター画像

 


 以上で Main Camera ゲームオブジェクトの設定は完成です。
これにより、ポストプロセッシングによるエフェクトを Layer で指定しているカメラに適用できる状態になりました。

設定後のインスペクター画像



4.Post-process Volume ゲームオブジェクトを作成し、Post-process Volume コンポーネントを追加する


 続いて、Post-process Volume コンポーネントを追加します。
今回は Main Camera ゲームオブジェクトではなくて、専用のゲームオブジェクトを作成していく方法で実装します。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択して新しいゲームオブジェクトを作成します。
ゲームオブジェクトの名前を Post-process Volume とし、このゲームオブジェクトがどのような役割を持っているかを判別しやすいようにします。

 Post-process Volume ゲームオブジェクトを選択して、Layer の設定が Default になっているか確認してください。
初期設定では Default のはずですが、もしも違う場合には、Default に設定を直して下さい。

 つづいて、インスペクターの一番下にある Add Component ボタンを押して、Post-process Volume コンポーネントを追加します。
これも検索窓を利用すると見つけやすいです。


インスペクター画像




 Post-process Volume コンポーネントの設定を行います。2か所ありますので、順番に設定します。

 最初に IsGlobal のスイッチにチェックをいれて、このプロパティを有効にします。
この IsGlobal のスイッチにチェックが入っていると、ポストプロセッシングがシーン全体に有効化されます。
次に、Profile の部分が None になっています。右横にある New ボタンを押してください。
新しくポストプロセッシング用のアセットが作成されて、自動的に Profile にアサインされます

 このファイルは Scenes フォルダ内に、自動的に <シーン名>_Profiles フォルダが作成されて、
その中に PostProcessing Volume Profile という名前のファイルで作成されます。


フォルダ画像



 次にエフェクトを追加します。


5.Post-process Volume コンポーネントの設定を行い、エフェクトの項目を追加する


 Profile に情報がアサインされていると、Overrides という項目内に Add Effect… というボタンが表示されます
このボタンを押すことにより、ポストプロセッシング用の PostProcessing Volume Profile アセットファイル内にエフェクトの情報を追加できます

 今回は2つのエフェクトを実装しようと思いますので、Add Effect… ボタンを押して、Unity => Color Grading を選択します。
インスペクターに、ColorGrading コンポーネントが追加されます。

 再度、Add Effect… ボタンを押して、Unity => Vignette を選択します。
インスペクターに、Vignette コンポーネントが追加されます。


インスペクター画像


参考サイト
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing)のエフェクトまとめ
https://ekulabo.com/post-processing-matome


 最後に、それぞれのエフェクトの内容を設定し、シーン全体にポストプロセッシングによるエフェクトを適用していきます。


6.Color Grading の設定を行う


 Color Grading(カラーグレーディング)とは、画像の最終的な色や輝度に対して調整を行う機能で、色調補正とも呼ばれます。
 
Unity 公式マニュアル
Color Grading
https://docs.unity3d.com/ja/current/Manual/PostPro...
Unity 公式マニュアル
Color Grading
https://docs.unity3d.com/Packages/com.unity.postpr...


 このエフェクトはゲーム画面を装飾する上で欠かせない機能の1つであり、ほぼすべてのゲームにおいて用いられているエフェクトの1つになります。
今回のシーン全体の色味や明るさは、すべてこのエフェクトによって調整されています。

 なお、各エフェクトは、右上にあるオン/オフの切り替えによってエフェクトを適用するか、適用を停止するかを選択できます。
初期設定ではオンになっています。


オンの状態



オフの状態




 Color Grading には複数の設定項目がありますが、今回は一部を設定することで調整しています。
これは用意しているワールド用の画像によりますので、あくまでも参考画像として設定内容を掲載しておきます。


インスペクター画像


 設定した内容についてまとめておきます。



 各項目内にはチェックがあり、チェックのある部分のみが適用される効果になります。

 Mode は解像度に合わせた設定です。今回はモバイルでの動作を想定し、 Low Definition Range を設定しています。

 White Balance では、白を基準とした色の見え方の補正を行います。この中にある Temperature を設定して、画面に色温度を付けています。
値は -100 〜 100 で設定でき、プラス方向であるほど暖色系の色、マイナス方向であるほど寒色系の色になります。

 Tone の項目では Post-exposure、Color Filter、Contrast 以外の3つの設定にチェックを入れて適用しています。
それぞれ、Hue Shift は色相の設定、Saturation は彩度の設定、Brightness は明るさの設定です。

 いずれも実際に操作することにより、適用する内容が理解しやすくなりますので、ご自分のワールド画像を見ながらどんどん変更して調整を繰り返してみてください。


エフェクト設定前




エフェクト設定後

 各項目ごとの違いをまとめておきます。

<Temperature +40>



<Temperature -40>




<Tint +40>



<Tint -40>




<Hue Shift +20>


<Hue Shift -20>




<Saturation +20>



<Saturation -20>




 上記の例では1つの項目のみを調整していますが、複数の項目を組み合わせることでも調整可能です。

 これら以外の機能も利用して、自分好みの調整を行ってみてください。
この機能によって驚く程にシーン内のゲーム画面の見え方が変わることが体験できると思います。

 下記のサイトがとても詳しく解説しています。


参考サイト
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing) Color Grading(カラーグレーディング)
https://ekulabo.com/post-processing-matome#outline...


7.Vignette の設定を行う


 Vignette(ビネット)は、画像の端を暗くするエフェクトです。画面の中央にはエフェクトはかからず、主に四隅にエフェクトをかけます。
雰囲気のある画面作りが出来る他、画面の周りが暗いため、画面中央にユーザーの視線が集めることにも一役買います。
Unity 公式マニュアル
https://docs.unity3d.com/ja/current/Manual/PostPro...
Unity 公式マニュアル
https://docs.unity3d.com/Packages/com.unity.postpr...



 参考用のインスペクター画像を掲載しますが、ご自分の画像に合わせて調整してください。

インスペクター画像


 調整方法ですが、まずは Vignette 内のすべての項目にチェックを入れてから、Intensity の値のみを動かしてみてください。
どのようなエフェクトになるのかが分かります。今回、設定後は 0 に戻しておいてください

 Intensity の値をある程度で設定したら、Smoothness や Roundness といった他の値を操作します。
そうすることにより、四隅をどの程度ぼかすのか、暗い部分に丸味をつけるのか、といった内容が、どの項目によって制御されていることが理解しやすくなります。

 Center の値を変更することにより、Vignette を適用する中心地点を変更できますが、
初期値で画面の中央になっていますので基本的には変更は不要です。

 Mode と Color も初期値のままで問題ありません。


エフェクト適用後(Intensity 0.5 のとき)


 
 画面の周囲の暗さが変わるだけで、シーン全体の印象が変わることが分かります。
 
 こちらのサイトに詳細な情報があります。

参考サイト
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing) Vignette(ビネット)
https://ekulabo.com/post-processing-matome#outline...


8.ゲームを実行して調整する


 実際にゲームを起動して、ポストプロセッシングの微調整を行ってください。



 以上でこの手順は終了です。

 次は 手順13 ーInputSystem の実装− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます