【UE5】SlatePostBufferを使ってUIにもポストエフェクトをかけてみよう
皆さんこんにちは！情熱開発部プログラム1課の金澤です。
早速ですが、こちらの画像をご覧ください。
皆さんはこの画像のように、ポストプロセスを使ってゲームの雰囲気を作ったは良いものの、「UIだけ浮いているように見える」「なんだかUIがのっぺりとしているように見えてしまう」と感じたことはないでしょうか？
これは、UEの仕様としてポストプロセスがUIには適用されないことが原因となっております。
そんなときに役立つのが、UE5で新たに追加された機能 「SlatePostBuffer」 です！
という訳で今回はSlatePostBufferを使って、UIにポストエフェクトを適用する方法をご紹介いたします。
使用しているバージョンはUE5.54となります。
また、SlatePostBufferについてはまだExperimentalの機能となっております。使用の際にはご注意ください。
目次
SlatePostBufferとは？
SlatePostBufferとはUE5で新しく追加された機能です。
これは画面キャプチャのような機能で、これを使用すればUIごと画面効果をかけるというようなことが出来るようになります！
SlatePostBufferを使うと、今までポストプロセスマテリアル内で使用していたSceneColorのようなものをUIマテリアルでも使用できるようになるというのがポイントです。
UIにはかけにくかったブラーやスクリーンブレンド等を手軽に掛けられるようになりますね！
ちなみに
画面キャプチャと言えば、SceneCapture2Dを使ってRenderTargetに描画する方法がまず一番に思いつくかと思います。
しかし、これは主に3D空間内の映像を取得するためのものでUIは含まれていません。
UIを含めた画面全体を取得しようとすると、UIを別途 RenderTargetに再描画して合成するなど、かなり複雑な処理が必要になります。
その点、SlatePostBufferを使用すればUIを含めた画面全体の最終描画結果をそのまま取得できるため、手軽かつ効率的に画面キャプチャを行うことが可能です！
SlatePostBufferを使うための準備
では実際にSlatePostBufferを使ってみましょう！
SlatePostBufferを使うためにはまずプロジェクトの設定から準備をします。
DefaultEngine.iniにて以下のコマンドを設定してください。
[ConsoleVariables]
Slate.CopyBackbufferToSlatePostRenderTargets=1これでSlatePostBufferを使うための準備はOKです。
UIにポストエフェクトをかけてみよう
では早速SlatePostBufferを使ってUIにもエフェクトを掛けてみましょう。
今回は最初にお見せしたビネット効果と色ズレをかけるポストエフェクトをHPバーのUIに適用させていきます。
Widgetについて
WidgetはHPバーのWidget（WBP_HPBar）ともう一つ、SlatePostBufferを使うためのWidgetとして「WBP_SlatePost」を作成していきましょう。
新規でWidgetを作成し、キャンバスを追加します。
その中にWBP_HPBarと新規でImageを追加してください。
新しく作成したImageに「SlatePostBuffer」と名づけ、画面全てを覆うようににアンカーを設定します。
マテリアルについて
次に、ビネット効果と色ズレをかけるマテリアルを用意します。
ビネットと色ズレについては以下のような構成で作成しています。
- ビネット
- UV中心からの距離を取り、SmoothStepを使って外周の色の濃さを調整します。
- 色ズレ
- UVを各RGBチャンネルでずらしてカラーを取得しています。
詳しいノード構成については以下の画像をご覧ください。
ではこちらのポストプロセスマテリアルをUI用に作り変えていきましょう！
まず、マテリアルドメインをPostprocessからUIに変更します。
すると、ScreenTextureを使用している箇所がエラーになるので、そこをSlatePostBufferへと変更していきます。
マテリアル上で右クリックをして検索バーに「GetSlatePost」を入れると0～4まで出てくると思いますが、今回は「GetSlatePost0」を選択します。
これがScreenTextureの代わりになるSlatePostBufferとなります。
そのままUV値を適用し、Colorの代わりにLinearRGBを接続してあげれば変更は完了です！
このマテリアルを先ほど作成したWBP_SlatePostのImageに適用し、実行してみましょう。
おや？HPバーが表示されていませんね？
実は、デフォルトの状態ですとSlatePostBufferの更新がUI描画前となっているため、UIを含めたキャプチャを行ってくれません。
ではどのようにしてUI描画後の画面を取得するかというと、「ポストバッファの更新（PostBufferUpdate）」を使うことで、WBP内で更新タイミングを指定することが出来ます。
パレットの中から「ポストバッファの更新（PostBufferUpdate）」を検索し、それをキャンバス内のWBP_HPBarの後に置いてください。
UIの描画順については上から下へ進むため、PostBufferUpdateを置く前までの描画がSlatePostBufferにキャプチャされます。
正しい位置にPostBufferUpdateを置いたら、詳細から動作→更新するバッファを増やします。
すると、「ESlatePostRT」の0～4まで選択できるようになっているかと思います。
これは先ほどマテリアルの時にもあったGetSlatePostの0～4までと連携しており、更新するSlatePostBufferを指定することが出来ます。
今回はGetSlatePost0を使用しているためESlatePostRTも0を指定しましょう。
これで設定は完了です！コンパイルと保存をしたら再度実行してみましょう！
無事HPバーもビネットと色ズレ効果を受けているのが分かりますね！
ただし、UIマテリアルに変更した影響でポストプロセスマテリアルで使用していた際と多少色味等が変わってしまうため、値の調整を行う必要があることには注意してください。
その他の演出例
その他にもSlatePostBufferを使うと以下のような表現を作ることが出来ます。
歪み表現
ノイズテクスチャをスクロールさせ、UVに加算することで歪み表現を行います
また、UV値を触る場合にGetSlatePost0をそのまま使用するとTilingされた画面が見えてしまうかと思います。
そういった際には、TextureSampleから直接「SlatePost0_RT」を指定してSampler SourceをClampにすると綺麗に見えるようになります！
色調反転
画面全体のカラーを一定の間隔で反転させています
一部のUIをこのカラー反転に巻き込みたくない場合、以下のようにPostBufferUpdateの後にUIを配置するとそのままのUIで表示することが出来ます。
まとめ
いかがだったでしょうか。
UIにもポストエフェクトを掛けられるようになるだけで、画面全体の雰囲気がまとまったように感じられたのではないでしょうか。
今回紹介した例以外にも、ブラーやグロー効果をかけたりなど様々な使い方があります。
さらに、SlatePostBufferを同時に複数使うことも出来るので、工夫次第で色々な演出に活用できると思います。
ぜひ皆さんのゲームでも雰囲気作りにSlatePostBufferを活用してみてください！
【免責事項】
本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。