春日部つむぎ no ゲーム作ってみよう!【UE5/UE4】 - 色味調整【UE5/UE4】

https://youtu.be/iXzjMUNMKDQ?si=YpI1NbCUEharlzfR

ゲームの色味を統一することのメリットとして

・視認性の向上
色味を統一することで、ゲーム画面の視認性が向上します。
特に、同じ色味のアイテムや敵を探す場合に役立ちます。

・統一感のあるデザイン
色味を統一することで、ゲーム画面に統一感が生まれます。
これにより、ゲームの世界観がより一層引き立ちます。

・プレイヤーの集中力の向上
色味が統一されていると、プレイヤーの目が疲れにくくなります。
これにより、プレイヤーはより長時間ゲームに集中できるようになります。

1.Buffer Visualization(バッファを可視化) 00:38

[Lit(ライティングあり)」] > [Buffer Visualization(バッファを可視化)] > [Overview(概要)]
F11を押して全画面表示

2.ポストプロセスボリュームについて 01:13

2-1.Lens(レンズ) 01:56


・Exposure(露出)・・・明るさの変化。

・Chromatic Aberration(色収差)・・・RGB値ごとに色ずれを起こします。余韻のある画面作りができます。

2-2.Color Grading(カラーグレーディング) 02:32


[Color Grading]・・・Globalで彩度やコントラストを強調したりできます。

2-3.Rendering Features(レンダリング機能) 03:03


モーションブラーの大きさやアンビエントオクルージョンの強さを調整できます。

モーションブラーは動きをボカす機能です。

アンビエントオクルージョンとは、
物体の表面の隙間や隆起部分などの狭い場所に陰影を乗せる機能です。
光が当たっていない部分でも環境光と呼ばれる光が存在します。
面同士が近い場合などは環境光が届きにくいためぼんやりと陰影が発生します。
これを表現して画面全体のリアリティ感を増すことができます。

この値を0にすると、このように暗い領域から影がなくなります。
値を1に戻すと影が復活します。

・Post Process Materials(ポストプロセスマテリアル)
 「+」ボタンでマテリアルを追加できます。
 レンダリングの見た目に影響を与えることができます。

2-4.Post Prosess Volume Settings(ポストプロセスボリューム設定) 03:54

・[Enable(有効)]
 ポストプロセスボリュームを有効または無効にできます。

・[Infinitte Extent(Unbound)](無制限に適用(アンバウンド))
 有効にするとポストプロセスボリュームの効果をレベル全体に適用できます。
 シーン内でのポストプロセスボリュームの大きさは関係ありません。
 無効にするとポストプロセスボリュームが存在する範囲だけに効果を与えます。

3.ポストプロセスボリュームの作成と詳細設定 04:37

3-1.新しいポストプロセスボリュームの作成 04:42

[Place Actors(アクタの配置)]タブ > [Visual Effects(ビジュアルエフェクト)] > [Post Process Volume(ポストプロセスボリューム)]
をドラッグアンドドロップでビューポートにに配置します。
名前を「PPV_Materials」にします。

[Post Process Volume Settings(ポストプロセスボリューム設定)] > [Enabled]を有効にします。
[Infinite Extent(Unbound)(無制限に適用))]を有効にして
レベル全体に適用されるようにします。

3-2.明暗順応 05:23

デフォルトで明暗順応が有効

明暗順応とは、
明るい空間から暗い空間に移動するとしばらくしてから物が見えてくる現象で「暗順応」といいます。
反対に暗い空間から明るい空間に移動すると徐々に見えてくる現象を「明順応」といます。

明暗順応を無効にするためには
[Lens(レンズ)]タブ > [Exposure(露出)]タブを展開します。
[Min EV100(最小輝度)]と[Max EV100(最大輝度)]で
両方を有効にして同じ値を設定します。
今回は「0」にします。

プロジェクト設定
レンダリング>Default Settings > 自動露出を無効にします。

3-3.色味の設定 06:32

3-3-1.Lens(レンズ) 06:38
・[Exposure(露出)] > [Exposure Compensation(露出補正)]を有効にして「0.0」にします。

・[Image Effects] > [Vignette Intensity(ビネット効果強度)]を有効にして「0.0」にします。

ビネット効果とは、
画像の四隅を中心部よりも暗くして、アーティスティックな雰囲気を出すことです。
3-3-2.Color Grading(カラーグレーディング) 07:01
・[Misc] > [Expand Gamut(色域拡張)]を有効にして「0.0」にします。
「色域拡張」とは、色の表現範囲を広げる技術です。
よりリアルな表現をするために利用されます。

・[Misc] > [Tone Curve Amount(トーンカーブ量)]を有効にして「0.0」にします。
トーンカーブとは、明るさや明暗の比率 (コントラスト)を曲線を使って調節するためのものです。

好みで、[Global] > [ガンマ]値を0.5〜0.8にします。
今回は、「0.8」にします。
3-3-3.Rendering Features(レンダリング機能) 07:37
・「Motion Blur(モーションブラー)」の「Amount(数量)」を有効にして「0.0」にします。
Motion Blurは、動いている時のブレですね。

4.ポストプロセスマテリアルの作成と適用 08:02

4-1.新しいポストプロセスマテリアルの作成 08:14

右クリック > [Material(マテリアル)]
名前を「PPMM_BaseColor」にします。
(Post Process Master Materialの頭文字)
ファイルを開きます。

現在、PBRマテリアルの入力ピンがすべて揃っています。
(PBR・・・物理ベースレンダリング)

[Details(詳細)]タブの
[Material(マテリアル)] > [Material Domain(マテリアルドメイン)]で

[Surface(サーフェス)]を[Post Process(ポストプロセス)]に変更します。
(サーフェス・・・表面のみで形状を表現するモデリング手法)
これでこのマテリアルはポストプロセスマテリアルになります。

すると入力ピンが[Emissive Color(エミッシブカラー)]を除いてグレー表示されます。

その理由は、ポストプロセスマテリアルで可能なのは
レンダリングの上にRPG値を重ねることだけだからです。
これを行うのだ[Emissive Color]入力です。

ベースカラーGバッファを抽出します。

SceneTextureノードを配置します。

[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[BaseColor(as stored in GBuffer)]を選択します。

[Color(カラー)]ピンを[Emissive Color]につなぎます。

保存して閉じます。

PPMM_BaseColor

4-2.マテリアルをポストプロセスボリュームに適用 09:04

適用したいポストプロセスボリュームを選択します。

[Rendering Featues(レンダリング機能)]タブの
[Post Process Materials(ポストプロセスマテリアル)] > [Array(配列)]で
「+」ボタンで配列エレメントを追加します。
メニューより[Asset reference(アセット参照)]を選択します。
ここには、マスターマテリアルかインスタンスマテリアルを適用できます。
作成した[PPMM_BaseColor]マテリアルを指定します。

ビューポートの表示がベースカラーに変わります。

5.ジッター(小刻みな揺れ)の除去 09:41

結果ノードを選択します。

[Details(詳細)]タブ > [Post Process Material(ポストプロセスマテリアル)] > [Blendable Location(Blendableの場所)]で
[After Tonemapping(トーンマッピング後)]を[Before Tonemapping(トーンマッピング前)]に変更します。

保存します。

これでジッターが消えエッジのギザギザもなくなります。

6.特定のアセットに適用 10:12


カスタム深度パスを使用して、
ポストプロセスマテリアルの適用先を特定のアセットにします。

キャラクターにはベースカラーだけをレンダリングして、
環境にはPBRレンダリングします。

右クリック > [Material(マテリアル)]
名前を「PPMM_BaseColor_CH」にします。
ファイルを開きます。

[Details(詳細)]タブの
[Material(マテリアル)] > [Material Domain(マテリアルドメイン)]で
[Surface(サーフェス)]を[Post Process(ポストプロセス)]に変更します。

[Blendable Location]を
[Before Translucency(透過処理前)]に変更します。

カスタム深度はレンダリングに透過処理を必要とします。
そのためBlendable Locationを透過処理前に設定します。

SceneTextureノードを配置します。

[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[CustomDepth(カスタム深度)]に設定します。

カスタム深度ノードは、
[Custom Depth]がオンのアセットを検索して
そのアセットだけをレンダリングします。

適用先のキャラクターを選択します。
[Details(詳細)]パネルで
[Rendering(レンダリング)] > [Render CustomDepth Pass(カスタム深度パスのレンダリング)]を
有効にします。

SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[SceneDepth(シーン深度)]に設定します。

カスタム深度からシーン深度を減算します。

Clamp(クランプ)ノードをつなぎます。
Clampノードは入力InをMinとMaxで定義される最小値と最大値の間の範囲に固定して返します。

一旦保存します。

ポストプロセスマテリアルをポストプロセスボリュームに追加します。

[Rendering Featues(レンダリング機能)]タブの
[Post Process Materials(ポストプロセスマテリアル)] > [Array(配列)]で
「+」ボタンで追加します。
メニューより[Asset reference(アセット参照)]を選択します。
作成した[PPMM_BaseColor_CH]マテリアルを指定します。

現在、環境は白で、キャラクターは黒です。
これを逆にします。

OneMinusノードを配置します。
SubtractノードとClampノードの間に入れます。

これを接続して保存すると
キャラクターが白、環境が黒になります。

キャラクターの白に、ベースカラーをレンダリングします。

Lerpノードを配置します。
Alphaピンにつなぎます。

SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[PostProcessInput0]に設定します。
LerpノードのAピンにつなぎます。

もう一つ
SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[BaseCplor(ベースカラー)]に設定します。
LerpノードのBピンにつなぎます。

エミッシブカラーにつなぎます。

保存します。

キャラクターにベースカラーがレンダリングされ、
環境にはレンダリングされません。

また環境が暗いので

マテリアルに戻り
PostProcessInput0ノードにMultiplyノードをつなぎます。
今回「6」を乗算して明るくします。

保存します。

PPMM_BaseColor_CH_

ざっくりまとめ 13:14

設定ファイル 13:35

PPMM_BaseColor


PPMM_BaseColor_CH_