Unityに関連する記事です

 ゲーム画面の見栄えをよくするための機能を実装します。


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



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




<ポストプロセッシングあり>
動画ファイルへのリンク


<ポストプロセッシングなし>
動画ファイルへのリンク



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

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



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

1.設計


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

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

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


参考サイト
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



 ポストプロセッシングはカメラに対して適用しますが、通常の Camera コンポーネント用のポストプロセッシングと
Cinemachine コンポーネント用のポストプロセッシングが、別々に用意されています。

 今回はカメラには Cinemachine を利用している想定ですので、Cinemachine 用に用意されているポストプロセッシングを利用します

 また、 URP の場合にも、URP 用のポストプロセッシングを利用することになりますので、覚えておくとよいでしょう。


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


 ポストプロセッシングは Unity の機能ですが、標準機能ではありませんので、プロジェクトごとに自分でインポートする必要があります。

 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つは Cinemachine Post Processing(シネマシン・ポスト・プロセッシング)といい、
こちらは Cinemachine Virtual Camera コンポーネントのアタッチされているカメラにアタッチするコンポーネントになります。

 順番に追加していきますので、まずはこの手順では Post-process Layer コンポーネントの説明と追加を行います。



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


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

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


インスペクター画像




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

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


インスペクター画像

 


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

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



4.CM vcam1 ゲームオブジェクトに Cinemachine Post Processing コンポーネントを追加し、設定を行う


 続いて、Cinemachine Post Processing コンポーネントを追加します。
今回は Main Camera ゲームオブジェクトではなくて、Cinemachine コンポーネントをカメラに利用しているので、このコンポーネントを利用します。



 ヒエラルキーにある CM vcam1 ゲームオブジェクトを選択し、2つの手順を行います。

 まず、Layer の設定が Default になっているか確認してください。
初期設定では Default のはずですが、もしも違う場合には、Default に設定を直して下さい。

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


インスペクター画像




 Cinemachine Post Processing コンポーネントの設定を行います。

 Profile の部分が None になっています。Profile ファイルとは、ポストプロセッシングの設定をするためのファイルです。

 Profile 欄の右横にある New ボタンを押してください。
新しくポストプロセッシング用のアセットが作成されて、自動的に Profile にアサインされます

 このファイルはフォルダ内に、自動的に <フォルダ名>_Profiles フォルダが作成されて、
その中に <ゲームオブジェクト名> Profile という名前のファイルで作成されます。


フォルダ画像



 ポストプロセッシングは Profile ファイル単位での設定を行うようになっているため、
ゲームのシーンに合わせて 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 の項目では Color Filter と Contrast 以外の3つの設定にチェックを入れて適用しています。
それぞれ、Hue Shift は色相の設定、Saturation は彩度の設定、Brightness は明るさの設定です。

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


エフェクト設定前



エフェクト設定後




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

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


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


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


 実際にゲームを起動して、微調整を行ってください。



 以上でこの手順は終了です。
ポストプロセッシングには他にもエフェクトが用意されていますので、自分でも調べてチャレンジしてみてください。

 実際に操作しながら学習することで、機能の内容もわかってきます。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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