写真フィルターのようにシーンの雰囲気を大きく変えるUE5「ポストプロセス」入門。デフォルト機能による調整と『Stylized – Dynamic Nature』による油絵風フィルター適用までを解説

『ポストプロセス』または『ポストプロセスエフェクト』は、3DCGを2D画面に描画する「レンダリング」という処理の際、全体的な見た目やシーンの雰囲気を編集するための機能です。イメージとしては、スマートフォンで撮影した写真にフィルターを掛けて雰囲気を変えるようなものです。

レンダリングでは3Dモデルやオブジェクトのマテリアル、ライティングなどの関係性を計算して2D画像に変換しており、コンピューターはこれを1/60秒という非常に短いサイクルで行い画面に描画することで3DCG映像を実現しています。

レンダリングの段階では、3Dモデルやライティングを調整することはできません。できるのは前のレンダリング段階で取得した情報（G-Buffer）を含むテクスチャなどを利用して画像に加工を加えることだけです。つまり、ポストプロセスは、完成する直前の2D画像に対して調整を加える役割を持ちます。

ポストプロセスを使うにあたって、今回は色味の分かりやすいカラフルな環境アセット『PLATFORMER – Stylized Cube World Vol.1』（以下、Stylized Cube World）を使っていきます。Stylized Cube Worldは、キューブブロックが敷き詰められたような特徴的なアートワークの環境アセットです。
※Stylized Cube Worldはあくまで今回の題材として利用していきますので、お手元ではご自身のゲームや、他のテンプレートでも問題ありません

植物、雲、はしご、箱、コインといった他のプロップ類もテーマに沿ったものになっており、ノンフォトリアルな環境アセットとして優れたものとなっている。今回はこちらを題材に、ポストプロセスで遊んでいこう

いくつかブループリントも用意されており、プレイヤーキャラクターさえ用意すれば簡単にゲームを作ることが可能です。ブロックの組み合わせでオリジナルのステージも作りやすく、ほとんどそのままゲームのマップとして使えるマップやサイドスクローラーゲーム用のテンプレートマップも付属しています。

今回の記事のテーマからは外れますが、記事の最後に「おまけ」としてSytlized Cube Worldを使ったサイドスクローラーゲーム制作手順の例もご紹介します。

「おまけ」では最終的にこのようなサイドスクローラーゲームの制作手順を紹介する

今回はSytlized Cube Worldをモデルに、ポストプロセスエフェクトを使っていろいろな見た目のシーンを作っていきたいと思います。

Sytlized Cube Worldはプロジェクトに追加するタイプのアセットです。使うためにはもととなるプロジェクトが必要です。

Epic Games LauncherからUnreal Engine 5.1を起動してプロジェクトを作成します。テンプレートは「Blank」を選択してください。

今回、プロジェクト名は「PostProcess」とした

プロジェクトが作られたら、Epic Games LauncherからSytlized Cube WorldおよびStylized – Dynamic Natureのマーケットプレイスページへ行き、「プロジェクトに追加する」のボタンを押してプロジェクトに追加しましょう。

アセットの追加後、コンテンツドロワーを開くと「Kobo_Nature」と「PLATFORMER_StylizedCubeWorld_Vol1」というフォルダが追加されています。Sytlized Cube Worldのサンプルマップは「PLATFORMER_StylizedCubeWorld_Vol1\Maps」にいくつかあります。最初は「Map_04」をダブルクリックして開いてください。

ビューポートの左上に警告が出ていることに気付いたかもしれません。これは太陽の光を表現する「指向性ライト」が2つ以上あり、競合していることを通知しています。「指向性ライト」は画面中央あたりに2つまとまって配置されています。「Light Source2」は今回必要無いので、選択してDeleteキーで削除してしまいましょう。

下から上方向に光を放っている「指向性ライト」が「Light Source2」だ

「指向性ライト」が1つだけになれば、警告は表示されなくなる

この警告は指向性ライトの「Forward Shading Priority」という項目を変更することでも回避できますが、見た目への影響もそれほどないので今回は削除で構いません

これで事前の準備は完了しました。

「Map_04」には、最初からポストプロセスによるエフェクトがかかっています。今回は1からポストプロセスを作りたいので、最初にこれを削除しましょう。

右上の「アウトライナー」タブから「PostProcessVolume」を検索し、選択してからDeleteキーで削除します。

マップ上から選択することもできるが、「PostProcessVolume」は見た目から見付けにくいためアウトライナーから検索するのがおすすめ

デフォルトの「PostProcessVolume」は滝の裏辺りに存在する。Deleteキーで削除しよう

すると、他のオブジェクトやライティングには全く手を加えていないにも関わらず、マップ全体の見た目がかなり変わったのが分かると思います。

以前の状態はポストプロセスによるフィルターを通した状態であり、こちらがこのマップの元の見た目となります。これだけでもポストプロセスの見た目におよぼす影響の強さが分かります。

それでは、自分でビジュアルを調整するために新しいPostProcessVolumeを作りましょう。左上の箱マークのドロップダウンメニューから「ビジュアルエフェクト→PostProcessVolume」をクリックします。

PostProcessVolumeのほか、カメラにもポストプロセスを調整できる機能が備わっています。今回はビューポートで素早く確認できる点などを考慮し、PostProcessVolumeでの調整を採用しています

PostProcessVolumeは、そのままの設定では「プレイヤーの視点が範囲内に入ったら」見た目の変化が適用されるようになっています。今回はマップ上のどこでも同じような見た目をさせたいので、選択したまま詳細タブから「Infinite Extent(Unbound)」という項目を検索し、チェックを入れてください。

PostProcessVolumeは設定できる項目が非常に多く、自分で項目を探そうとするとものすごく時間がかかってしまいます。検索欄を上手に使って手間や時間を節約しましょう

これで、マップのどこにいてもPostProcessVolumeのエフェクトが適用されるようになりました。

ポストプロセスを調整して見た目を変えてみよう

まずは簡単な機能を使ってみましょう。詳細タブから「Bloom」を探し、カテゴリ内の「強度」にチェックを入れてみます。チェックを入れることで数値を変更できるようになるので、これを「8.0」まで上げてみます。見た目の変化が分かるでしょうか？

この「Bloom」というカテゴリでは、「輝き」加減を変化させることができます。物体の輝き度合いを増やしたので、全体的にぼやけたような明るい画面になっています。

ホラー系の見た目を作ってみよう

ポストプロセスを調整するにあたり、ある程度ビジュアルテーマを決めたいと思います。

このマップに適用されていたポストプロセスは明るくポップな印象のものでした。今回はポストプロセスの表現の幅広さを見てみるために、思い切ってホラー寄りの見た目へと変化させてみましょう。

最初に、先ほど変更した「Bloom」の「強度」を「0.0」に設定します。さらに画面全体の明るさを暗くするために「Exposure」の「露出補正」を「-1.0」に設定しましょう。これはカメラなどで言う「露出」、つまり明るさをコントロールする数値です。数値を減らすことで画面全体が暗くなります。

続いて、画面の色味を変化させていきます。ホラー風の画面にするには彩度を落とし、コントラストを上げるとそれらしくなります。画面を青などの寒色寄りにするのも効果的です。

「カラーグレーディング」カテゴリの「Global」→「彩度」を開くとカラーピッカーが現れます。ここでは赤（R）・緑（G）・青（B）で彩度を設定できますが、全て「0.0」にしてしまいましょう。これで画面に彩かさが一切無くなり、モノクロの画面になります。

カラーグレーディングでは画面全体の色彩に対する補正を加えられる

さらにその下にあるコントラストを調整します。赤（R）と緑（G）は2.0まで上げますが、やや青みがかった画面にしたいので青（B）は1.2に設定します。

かなり雰囲気が出てきました。最後に「ビネット」と「フィルム粒子」を追加します。「レンズ」→「Image Effects」→「ビネット効果強度」を「0.8」にし、「フィルム粒子」→「フィルム粒子強度」を「1.0」、「フィルム粒子テクセルサイズ」を「4.0」まで上げます。

ビネットは画面の周囲を暗くする効果で、軽くかけると画面の高級感が増す効果があるが、ホラー演出にも効果的

フィルム粒子はフィルムカメラで発生する粒子感を追加する。弱めにかけると昔の映像を再生しているような効果になるが、極端にかけると怖い印象を与えられる

これで完成です。先ほどまでポップで平和だった世界が、ホラー調の恐ろしい雰囲気へと変化しました。

これはかなり極端な例ですが、ポストプロセスだけでもここまで雰囲気を変化させることが可能です。これに加えて3Dモデルやライティングを調整すれば、更にホラーな雰囲気を増すこともできるでしょう。

ちなみに、アウトライナータブのPostProcessVolumeの左の目のマークをクリックすると、ポストプロセスの適用・非適用を一瞬で切り替えられます。ポストプロセスの適用前と適用後を見比べてみると、雰囲気の変化がよく分かります。

変更したポストプロセスを元に戻したい場合には、他のSytlized Cube Worldのマップからコピー&ペーストで持ってくるという方法が使えます

PostProcessVolumeにデフォルトで用意されているBloomやExposureのような調整項目は、ポストプロセスでは特に一般的なものです。

しかし、用意されている設定項目だけがポストプロセスの全てではありません。より拡張的なポストプロセス機能を使いたい場合、Unreal Engineでは『ポストプロセスマテリアル』というものを使うことができます。

例えば、マップ上のものに輪郭線を追加することが可能になる。この動画ではさらに陰影や影の描写を無くしてより漫画チックな印象にしている

画面の特定の部分だけにエフェクトをかけたり、簡単なアニメーションを実現することもできる。ステージを移行する時などにも活用できる

Stylized – Dynamic Natureに付属しているポストプロセスマテリアルには面白いものがたくさんあるので、今度はそれを使って遊んでみましょう。

今回使うのは『桑原フィルター』というポストプロセスです。桑原フィルターは写真などをまるで油絵のような見た目に加工するフィルターで、京都大学の桑原 道義名誉教授にちなんで名付けられています。

理論的な部分は置いておくとして、さっそく桑原フィルターをマップに適用して見た目を見てみましょう。今回はマップとして「Map_01」を使います。

先ほどと同じように複数の指向性ライトがあるので、警告が出ています。「Light Source2」を削除しましょう。

ポストプロセスマテリアルも、PostProcessVolumeから設定します。詳細パネルから「ポストプロセスマテリアル」の項目を探して展開すると、「Array」と書かれている部分の右側に「+」ボタンがあります。

ここから項目を追加した後に、「選択」のドロップダウンメニューから「アセットリファレンス」をクリックします。

すると、左下のような状態になります。「なし」と書かれた部分をクリックして、メニューからポストプロセスマテリアルを適用しましょう。Stylized – Dynamic Natureがアセットとして追加されていれば、「MI_KuwaharaFilter」が見付かるはずです。

どのようになったか一度見てみましょう。

よく見ると確かに変化しているのですが、少し分かりにくいです。せっかくなのでエフェクトを強めにかけて、もっとはっきりと変化が分かるようにしましょう。

先ほど設定した「MI_KuwaharaFilter」には、強さ調整用のパラメーターが用意されています。「コンテンツ\Kobo_Nature\Materials\M_PostProcess」内にある「MI_KuwaharaFilter」を開くと右下のような画面が出ます。

画面右上の「Kuwahara Effect Radius」が桑原フィルターをかける強さを決めているので、これを「2.0」から「6.5」まで上げましょう。

桑原フィルターはかけ過ぎると重くなるため加減が必要

さて、今度はこの状態と桑原フィルターがかかっていない状態を見比べてみましょう。

はっきりと油絵風の画面になっていることが分かります。これで桑原フィルターを適用することが出来ました！

ノンリアリスティックなキャラクターと組み合わせることで、独特の温かみのある雰囲気の絵作りができる。画像のキャラクターはEpic提供の無料テンプレート「Unreal Learning Kit」のもの

ポストプロセスマテリアルは、ある程度の知識があれば自分で作ることも可能です。ドキュメントやサンプルなどを参考にして、ぜひ自分でさまざまなエフェクトを作れるようになってみてください。

ポストプロセスを含むマテリアルの編集はこのようにノードを繋げて行う。上の画像では画面上の特定のものに対して桑原フィルターを除外できるようにしている

左のポストプロセスを適用したところ。腕などを見るとキャラクターだけは桑原フィルターがかかっていないのがよく分かる。エフェクトによりキャラクターが見えにくい時などに有効だ

さて、ここからは記事の「おまけ」として、Sytlized Cube Worldを使ったサイドスクローラーゲーム（横スクロールゲーム）の作り方を紹介していきたいと思います。

まずはサイドスクローラーのサンプルマップ「Map_06_Side_Scroller」を開きます。

「Map_06_Side_Scroller」は他のマップと一緒に「コンテンツ\PLATFORMER_StylizedCubeWorld_Vol1\Maps」にある

開くとサイドスクローラーゲーム用にすでに調整されたマップが用意されている

指向性ライトが複数あるという警告が出ているので、下から上に光を放っている「Light Source2」を削除します。これで警告が出なくなります。

Sytlized Cube Worldはマップのみのアセットなので、主人公として動かすキャラクターが必要です。

サードパーソンのキャラクターを使っても良いですが、今回はマップの可愛らしい雰囲気に合わせて「Stack O Bot」から主人公ロボットのキャラクターを移行（Migrate）します。

「Stack O Bot」はEpic Gamesが提供しているUE5のサンプルプロジェクト。C++のコードを使わない範囲でさまざまな機能が実装されている。今回はキャラクターのブループリントを利用するだけだが、初心者が参考にするサンプルとしては特におすすめだ

まずはStack O Botのプロジェクトを作ります。Epic Games LauncherからStack O Botのダウンロードページへ行き、「プロジェクトを作成」ボタンから新たなプロジェクトを作って起動しましょう。

メインキャラクターであるロボットのブループリントは、「コンテンツ\StackOBot\Blueprints\Character」の「BP_Bot」です。右クリックメニューから「アセットアクション」→「移行」を選びましょう。

移行することによってアセットを別のプロジェクトにコピーできる

この画面はそのまま「OK」で大丈夫だ

次に、アセットの移行先を決めていきます。移行先はSytlized Cube Worldを追加したプロジェクトの「Content」のフォルダです。「Content」のフォルダを選択したら「フォルダーの選択」ボタンを押せば移行が開始します。

移行完了後、Sytlized Cube Worldを追加したプロジェクトのコンテンツドロワーを確認しましょう。「コンテンツ」フォルダ内に「StackOBot」のフォルダがあるはずです。確認したら「Stack O Bot」のプロジェクトは必要ないので、終了してしまって大丈夫です。

先ほどの「Stack O Bot」プロジェクトと同じく、「Character」のフォルダの中に「BP_Bot」があるので、ダブルクリックして中身を見てみます。

このブループリントはサードパーソン視点のゲームで使うためのものなので、サイドスクローラーで使うにはいくつか調整が必要です。

最初にコンポーネントを調整します。左上のコンポーネントタブから各コンポーネントを選択し、右の詳細タブで以下の手順で設定しましょう。

続いてイベントグラフに移動し、ブループリントを調整します。INPUT:Turningとコメントで書かれている部分はプレイヤーによるカメラのコントロールを設定している部分ですが、サイドスクローラーゲームでは必要ないので今回は全て削除します。

その真上にあるINPUT:Movementでは、キャラクター移動を制御しています。サイドスクローラーの場合、左右の移動さえ行えれば良いので、以下の画像のように繋ぎ直します。

「Get Right Vector」ではなく「Get Forward Vector」なこと、「Scale Value」は「Action Value X」のピンと繋ぐことなどを注意しよう

これでブループリント側の準備は完了したので、「BP_Bot」をマップに配置します。「Map_06_Side_Scroller」の画面に戻り、コンテンツドロワーから「BP_Bot」を選択したまま、マップ上にあるPlayer Startを右クリックします。メニューが出てくるので、「選択中のアクタと置換」→「BP_Bot」をクリックします。

このようにするとPlayer Startと同じ位置・角度・スケールで「BP_Bot」が入れ替えられる。マップ上のものを他のものに入れ替えたい場合に使えるテクニックだ

入れ替えが済んだら、詳細タブの「可動性」を「スタティック」から「ムーバブル」に変更。また、「ポーン」→「Auto Possess Player」を「Disabled」から「Player 0」に変更します。

Player Startと入れ替えると可動性が「スタティック」になってしまい、プレイ開始してもキャラクターが動かせなくなってしまう。「ムーバブル」に変更しておこう

「Auto Possess Player」を「Player 0」に設定することで、プレイ開始時に自動的にプレイヤーキャラクターとして設定される

これで設定が終了しました。ここまでの設定ができていれば、「BP_Bot」をプレイヤーキャラクターとして操作できるようになっているはずです。

ジャンプ後に再びスペースキーを押すと背中にあるジェットバックでホバリングできる

ゴールの扉が開いたらゲーム終了だ

このマップには取得できるアイテムをはじめ、ジャンプパッドや移動する足場など、ゲーム作りの基本となるような仕掛けがたくさん用意されています。プレイした後は、これらの中身がどのようになっているかを確認していきましょう。ぜひ、Sytlized Cube Worldを皆さんのゲームづくりに役立ててください。

wvigler

アンリアルエンジンにハマり、ぷちコンでゲーム作ってた男。映像編で2連覇したことも。
昔はよくアーケードゲームとかやってました。
一番やり込んだのは「ケツイ ～絆地獄たち～」「戦国BASARAX」あたり。ローグライトゲームとかも好きです。