SlatePostBufferを色々試します( ･`ω･´)
今回はUE5.4で追加されたSlatePostBufferを使用した、
いくつかのUMGによるエフェクトの作成をしてみます。
応用すれば下記のツイートのようなことも可能です。
次回ブログ記事用
— アルゴンブログ公式 (@Argonblog) 2024年6月23日
水滴のゆらめきウィジェット pic.twitter.com/lEW3t25fU1
◎参考資料
5.4 Slate Post Buffer UMG - YouTube
※UE5.4で検証しています。
※SlatePostbufferの説明もしますが細かい説明は、
上記参考資料のドキュメントページがオススメです。
※書き間違え等あればコメントください！
まずSlatePostBufferとは何か？
まずSlatePostBufferとは?となる方が多いかなと思いますので、
ここで軽く説明しておこうかなと思います。
SlatePostBufferを使用することでゲームシーンをキャプチャして、
UIとゲームシーン両方に適応される視覚効果を作成できます。
これを使用することでガラスの雫や、
ブラーがかかっている状態のボタンを配置するなどが行えます。
○プロジェクトの準備や設定について
まずプロジェクト設定前SlatePostBufferでは、
DefaultEngine.iniであらかじめ設定を記載しておくか、
コマンドでSlatePostBufferをONに設定する必要があります。
まずは「DefaultEngine.ini」に下記のコマンドを設定。
[ConsoleVariables]
Slate.CopyBackbufferToSlatePostRenderTargets=1
もしくはコンソールコマンドで下記を入力して、
実行することで「Slate.CopyBackbufferToSlatePostRenderTargets 1」を
入力することで動作するようになります。
逆に「Slate.CopyBackbufferToSlatePostRenderTargets 0」を入力すると、
スレートポストバッファーの動作を停止します。
※基本はコマンドではなくDefaultEngine.iniに記載するのをおすすめします。
コマンドでの変更の一例を動画にしました。
以上でプロジェクトでの設定とコンソールの設定になります。
○各種設定の説明とサンプルの作成
実際に処理を作成していきます。
まずは画面全体の一部を反転させた表現をやってみます。
まずはWidget用のブループリントを作成します。
コンテンツブラウザを右クリックして追加します。
Widgetを追加したら今度はマテリアルの方も追加作成しましょう。
こちらもコンテンツブラウザを右クリックして追加します。
追加が完了したらまずはWidgetの設定をしていきます。
まずは下地となるキャンパスパネルと画像を追加します。
一旦Widgetの方の設定は以上にしてマテリアルの設定を行っていきます。
マテリアルの「Material Domain」を「User Interface」に設定します。
画像の設定が完了したらSlatePostBufferを使用した、
Materialノードの処理を作成していきます。
処理として見えている縦情報を1-xで反転させてその情報を、
SlatePostBuffer用のマテリアルノードにつなげて出力しています。
作成したマテリアルをWidgetに反映させていきます。
Widget内の画像のBrushに先ほど作成したMateriaruを指定します。
WidgetとMaterialの準備はこれで完了なので、
プレイヤーキャラクターに反映していきます。
今回FirstPersonのプロジェクトを元にしているので、
そちらにイベントグラフを追加してWidgetを追加します。
そちらを実際に動かしたのが下記の画像になります。
ぼかし用のBP処理を追加してみる。
実際にこのSlatePostBufferを使用するときは他に、
ぼかしや他の視覚効果をバッファに追加して行えます。
まずぼかしを入れる準備としてBP作成の画面を開きます。
コンテンツブラウザ右クリックして「ブループリント」を選択します。
ブループリントの下に全てのクラスから、
「slate」と検索すると「SlatePostBufferBlur」を選択します。
こちらの適応についてですがプロジェクト設定で、
「Slate」と検索して今使用している「Eslate post RT 0」の所に、
ポストプロセッサクラスのドロップダウンリストで指定してあげます。
作成したBPを開くとガウスブラーの強さをの設定が行えます。
こちらを設定すると先程の上下反転で映り込んでいたものに、
ブラーがかかった状態になるかと思います。
こちらのぼかしについてですが強度などは、
ブループリント側でリアルタイムに更新できます。
「Slate FX Subsystem」から「Get Slate Post Processor」で、
情報を取得してぼかしの強度を変更できます。
こちらを実際に動かした動画も作成しました。
SlateBufferのUIでの合成
ここでは雨のしずくの表現とともに他のWidgetや、
プログレスバーもその効果に当てはめるということを行います。
まず今回の雨のしずくのテクスチャを今回下記リンクのアセットを利用します。
Animated Rain - Waterdrop Material & FX
そのアセット内にあるflowmask01というテクスチャの画像を利用します。
フォルダはContents→Rain_material→Materials→texture→flowmasks内です。
その画像を用いて雫用のマテリアルを作成しましょう。
最初のマテリアルの作成と同様にマテリアルを作成します。
まずはテクスチャをPannerで下に動かすようなノードを作成します。
続いてTexutreSampleでSlatePost_RT2を指定します。
あとは表示するようにsRPGtoLinearを設定します。
※上の画像と下の画像のマテリアル画像はつながっています。
TextureParamの指定についてですがParamに「SlatePost2_RT」を指定して、
SamplerTypeを「Linear Color」を指定します。
こうすることで投影されるバッファに雨のしずくが適応されます。
これで雫用のマテリアルの作成は完了です。
続いて雫に影響を与える予定のUMGを作成します。
まずは回転系のテクスチャを作成します。
「Tex Cooder」でタイリングして「CustomRotater」で、
回転させるだけの処理になります。
このマテリアルをウィジェットブループリントに反映していきます。
まずはウィジェットブループリントを作成します。
コンテンツブラウザを右クリックして、ウィジェットブループリントを選択します。
今回は画像を3つキャンパスパネルに配置して、
画像のBrushを先ほど作成した回転マテリアルを指定してあげます。
※配置位置などはテスト用に配置しているので自由です。
それができたら実際に使用するウィジェットブループリントの作成します。
いつも通りコンテンツブラウザ右クリックで追加します。
それではこれまで作成したウィジェットなどを配置を行います。
まずは作成した表示用Widgetとプログレスバーを配置していきます。
SlateBufferが適応されるように「バッファの更新」を配置設定します。
※バッファの更新のサイズについてですがどのサイズでも良さそうです。
バッファの更新で「更新するバッファ」を追加して、
今回の表現で使用している「Eslate Post RT2」を選択します。
最後に画像を追加して水適用のマテリアルをBrushに設定して、
ウィジェットブループリントの設定は完了になります。
ブラー用のBPを作成してブラー強度を設定します。
プログラムとしての設定は以上ですが作成したWidgetを、
PlayerCharacterに適応しないと表示されないので指定しておきます。
プロジェクト設定で「Slate」で検索して、
有効化とプロセッサクラスで先程作成したブラーの設定をすれば準備完了です。
実際に動かしてみた動画になります。
これで今回説明する内容は以上になります。
他にも色々応用できそうなので活用していきましょう！
最後に
気になっていたUE5.4の追加機能である、
SlatePostBufferの説明などは以上になります。
次も引き続き作業を行っていきます。
