アルゴンUE4/UE5&アプリ開発日記

UE4/UE5の機能やプラグインを紹介します。初心者や中級者向けになってます!!

【UE5.4】Slate Postbufferを試す。

SlatePostBufferを色々試します( ・`ω・´)

今回はUE5.4で追加されたSlatePostBufferを使用した、

いくつかのUMGによるエフェクトの作成をしてみます。

応用すれば下記のツイートのようなことも可能です。

◎参考資料

公式のSlatePostbuffersのドキュメント

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

DefaultEngine.iniにコマンドを記載

もしくはコンソールコマンドで下記を入力して、

実行することで「Slate.CopyBackbufferToSlatePostRenderTargets 1」

入力することで動作するようになります。

逆に「Slate.CopyBackbufferToSlatePostRenderTargets 0」を入力すると、

スレートポストバッファーの動作を停止します。

※基本はコマンドではなくDefaultEngine.iniに記載するのをおすすめします。

コマンドでの変更の一例を動画にしました。

以上でプロジェクトでの設定とコンソールの設定になります。

・目次に戻る

○各種設定の説明とサンプルの作成

実際に処理を作成していきます。

まずは画面全体の一部を反転させた表現をやってみます。

まずはWidget用のブループリントを作成します。

コンテンツブラウザを右クリックして追加します。

ウィジェットブループリントを作成

Widgetを追加したら今度はマテリアルの方も追加作成しましょう。

こちらもコンテンツブラウザを右クリックして追加します。

マテリアルの作成

追加が完了したらまずはWidgetの設定をしていきます。

まずは下地となるキャンパスパネルと画像を追加します。

画像とキャンバスパネルを追加

一旦Widgetの方の設定は以上にしてマテリアルの設定を行っていきます。

マテリアルの「Material Domain」を「User Interface」に設定します。

マテリアルの設定をUserInterfaceに変更

画像の設定が完了したらSlatePostBufferを使用した、

Materialノードの処理を作成していきます。

処理として見えている縦情報を1-xで反転させてその情報を、

SlatePostBuffer用のマテリアルノードにつなげて出力しています。

SlatePostBufferのマテリアルの処理

作成したマテリアルをWidgetに反映させていきます。

Widget内の画像のBrushに先ほど作成したMateriaruを指定します。

画像マテリアルを指定

WidgetとMaterialの準備はこれで完了なので、

プレイヤーキャラクターに反映していきます。

今回FirstPersonのプロジェクトを元にしているので、

そちらにイベントグラフを追加してWidgetを追加します。

プレイヤーにWidgetを設定

そちらを実際に動かしたのが下記の画像になります。

実際にWidgetを追加した状態

ぼかし用のBP処理を追加してみる。

実際にこのSlatePostBufferを使用するときは他に、

ぼかしや他の視覚効果をバッファに追加して行えます。

まずぼかしを入れる準備としてBP作成の画面を開きます。

コンテンツブラウザ右クリックして「ブループリント」を選択します。

ブループリントを選択

ブループリントの下に全てのクラスから、

「slate」と検索すると「SlatePostBufferBlur」を選択します。

SlatePostBufferBlurクラスを指定して作成

こちらの適応についてですがプロジェクト設定で、

「Slate」と検索して今使用している「Eslate post RT 0」の所に、

ポストプロセッサクラスのドロップダウンリストで指定してあげます。

プロジェクト設定でSlateと検索して設定

作成したBPを開くとガウスブラーの強さをの設定が行えます。

ガウスブラーの強さの数値を設定

こちらを設定すると先程の上下反転で映り込んでいたものに、

ブラーがかかった状態になるかと思います。

youtu.be

こちらのぼかしについてですが強度などは、

ブループリント側でリアルタイムに更新できます。

「Slate FX Subsystem」から「Get Slate Post Processor」で、

情報を取得してぼかしの強度を変更できます。

ぼかしの変更動作BP

こちらを実際に動かした動画も作成しました。

SlateBufferのUIでの合成

ここでは雨のしずくの表現とともに他のWidgetや、

プログレスバーもその効果に当てはめるということを行います。

まず今回の雨のしずくのテクスチャを今回下記リンクのアセットを利用します。

Animated Rain - Waterdrop Material & FX

そのアセット内にあるflowmask01というテクスチャの画像を利用します。

フォルダはContents→Rain_material→Materials→texture→flowmasks内です。

使用するテクスチャ

その画像を用いて雫用のマテリアルを作成しましょう。

最初のマテリアルの作成と同様にマテリアルを作成します。

マテリアル作成

まずはテクスチャをPannerで下に動かすようなノードを作成します。

Pannerで雨のしずくマテリアルを下に動かす

続いてTexutreSampleでSlatePost_RT2を指定します。

あとは表示するようにsRPGtoLinearを設定します。

※上の画像と下の画像のマテリアル画像はつながっています。

SlatePost_RT2を設定する

TextureParamの指定についてですがParamに「SlatePost2_RT」を指定して、

SamplerTypeを「Linear Color」を指定します。

こうすることで投影されるバッファに雨のしずくが適応されます。

これで雫用のマテリアルの作成は完了です。

雫テクスチャ用の設定

続いて雫に影響を与える予定のUMGを作成します。

まずは回転系のテクスチャを作成します。

Tex Cooder」でタイリングして「CustomRotater」で、

回転させるだけの処理になります。

テクスチャを回転させるテクスチャ

このマテリアルをウィジェットブループリントに反映していきます。

まずはウィジェットブループリントを作成します。

コンテンツブラウザを右クリックして、ウィジェットブループリントを選択します。

ウィジェットブループリントを作成

今回は画像を3つキャンパスパネルに配置して、

画像のBrushを先ほど作成した回転マテリアルを指定してあげます。

※配置位置などはテスト用に配置しているので自由です。

画像を3つ配置したWidgetの作成

それができたら実際に使用するウィジェットブループリントの作成します。

いつも通りコンテンツブラウザ右クリックで追加します。

ウィジェットブループリントを作成

それではこれまで作成したウィジェットなどを配置を行います。

まずは作成した表示用Widgetプログレスバーを配置していきます。

作成した回転用のウィジェットを追加

プログレスバーを配置

SlateBufferが適応されるように「バッファの更新」を配置設定します。

※バッファの更新のサイズについてですがどのサイズでも良さそうです。

バッファの更新を追加

バッファの更新で「更新するバッファ」を追加して、

今回の表現で使用している「Eslate Post RT2」を選択します。

更新するバッファにEslate Post RT2を設定

最後に画像を追加して水適用のマテリアルをBrushに設定して、

ウィジェットブループリントの設定は完了になります。

ウィジェットのブラシ設定を指定

ブラー用のBPを作成してブラー強度を設定します。

ブラーのBPの作成と強度設定

プログラムとしての設定は以上ですが作成したWidgetを、

PlayerCharacterに適応しないと表示されないので指定しておきます。

PlayerControllerを設定

プロジェクト設定で「Slate」で検索して、

有効化とプロセッサクラスで先程作成したブラーの設定をすれば準備完了です。

SlatePostBufferの有効化とクラス指定

実際に動かしてみた動画になります。

これで今回説明する内容は以上になります。

他にも色々応用できそうなので活用していきましょう!

・目次に戻る

最後に

気になっていたUE5.4の追加機能である、

SlatePostBufferの説明などは以上になります。

次も引き続き作業を行っていきます。

・目次に戻る

【UE5.4】MotionDesignを試す(クローナ関連)

MotionDesignを試してみます!( ゚∀゚)o彡°

今回はMotionDesignをチュートリアルの動画とともに、

試してみましたので機能や準備、

簡単な機能について説明していこうと思います。

今回テストで作成したものは下記ツイート内容になります。

◎参考資料

Unreal Engine 5.4 Motion Design in 10 MINUTES! | 2024 - YouTube

※UE5.4.1で検証しています。
※だいぶ基本的なことを噛み砕いて行きます。
※シーケンスや2Dの動きを作る部分は別途紹介していきます。

○MotionDesignとは何ですか?

まずMotionDesignとはどういったものなのかという、

お話になりますがだいぶざっくり言うと、

2Dまたは3Dのモーショングラフィック作成ツールになります。

実験段階ではありますが2Dと3D問わず、

様々な動きを再現するための設定が用意されています。

各種機能もさまざまあるのですが、

今回は3D側のクローナとエフェクトの機能を、

メインに紹介する記事になります。

・目次に戻る

○プロジェクトや設定の準備

まずはプラグイン設定を行います。

「motiondesign」で検索して出てきたプラグインをオンにします。

再起動したらプラグインが適応されるので再起動します。

プラグインの追加作業

今回はなにもないマップで1から作っていくので、

空のマップを選択して作成します。

マップが作成できたら実際に色々設定をしていきます。

空のマップを作成する

・目次に戻る

○ブロックをランダム配置しながら基礎操作の紹介

実際に各種設定を追加していきます。

まずなにもない空のレベルの状態となっているので、

MotionDesign用に必要なものを配置しましょう。

モーションデザインを選択します。

モーションデザインの追加

モーションデザインを選択して設定できる状態にします。

実行ボタンの下の所に「デフォルトを作成」があるので選択します。

デフォルトを作成追加

「デフォルトを作成」を選択するとシーンアクタを、

追加するためのダイアログが表示されます。

今回はすべて活用するのでそのまま追加していますが、

左側のチェックボックスで必要なものだけ、

追加するというのでもOKだと思います。

Spawnボタンを押して追加してあげます。

デフォルトの追加

すると自動的に先ほど設定したものが追加されるようになります。

レベル上に自動的に追加

この状態のままでは何も出来上がってないので、

動かしたり変化を与えるものを配置していきます。

今回は「クローナアクタ」を追加します。

クローナアクタの追加

クローナアクタを配置したらデフォルトを作成で追加した、

シーンカメラが配置したクローナアプリを設定してあげます。

クローナをカメラの方向に向ける

配置がある程度完了したら今度はクローナアクタ側に配置していきます。

簡単なブロックモデルを作ったのでこちら良ければご活用ください。

今回上記のモデルをインポートしたスタティックメッシュを、

複製していくつかの色のブロックモデルを作っています。

配置用モデルのブロックを追加

クローナ側に上記リンクのブロックモデルを追加していきます。

追加する場合はドラックランドドロップで各ブロックの、

スタティックメッシュを追加していきます。

ブロックの追加

追加すると一旦ブロックが追加されるかと思います。

今回はこのブロックを動かしたりしていきます。

ブロックの一旦の追加

実際に敷き詰める感じにクローナモデルの設定を行っていきます。

クローナの設定は下記のようになります。

LayoutName:Gridを設定
※配置方法の指定になります。

Count X:50を指定
※横に配置する数の指定になります。

Count Y:50を指定
※縦に配置する数の指定になります。

Count Z:1を指定
※高さに配置する数の指定になります。

Spacing X:120を指定
※横に配置する際の間隔の指定になります。

Spacing Y:120を指定
※縦に配置する際の間隔の指定になります。

Spacing Z:120を指定
※高さに配置する際の間隔の指定になります。

Constraint:Noneを指定
※今の状態の表示している状態からさらに配置設定を指定できます。
 細かい設定内容については紹介各設定の補足項目で紹介してます。

○レンダラー項目
Mesh Render Mode:Iterateに指定になります。
※こちらは各配置するものの配置方法になります。
 細かい設定内容については紹介各設定の補足項目説明しています。

Mesh Facing Mode:Defaultに指定になります。
※こちらはメッシュが向いている方向になります。
 細かい設定内容については紹介各設定の補足項目で説明しています。

実際の配置でいじるメインの項目は上記になるのかなと思います。
下の画像は実際に配置した場合は下記になります。

各種設定を指定

配置するのは以上ですがこれだけではなんの動作もないので、

色々動かしていこうと思います。

動きをつけるにはクローナアクタとは別に、

動かす用の「エフェクトアクタ」というものを追加する必要があります。

クローナアクタのクローナ項目の「Spawn Linked Effector」で、

動きを与えるエフェクトアクタを追加できます。

エフェクトアクタの追加

エフェクトアクタを選択して動きを設定していきます。

各種設定値と設定値は下記の通りです。

○タイプの設定項目
Type:Unboundに設定
※エフェクトの影響範囲を指定します。
 Sphere・Plane・Box・Unboundの4種類になります。

○モードの設定項目
Mode:NoiseFieldに設定
※影響を与えるモードを指定します。
 Default・Target・NoiseFieldの4種類になります。

モード設定をNoiseFieldにした際に動きをつける上で、

いくつか設定項目を設定しているのでそちらを少し説明します。
下記項目ごとに設定値が違います。

ロケーションの強さ:一連の流れで移動する移動量。(0,0,40で設定)

回転の強さ:一連の流れで回転する回転量。(0,0,180で設定)

スケール:一連の動きで大きくなるサイズ。(1,1,1で設定)

Pan:どの方向から動作を開始するのかのX・Y・Zの値

Frequency:全体の動きの幅(移動量全体の倍率)

実際に設定して動かしたものは下記の動画になります。

・目次に戻る

○各設定の補足項目

実際に各種補足箇所を補足していきます。

まずクローナのConstraintから紹介していきます。

Constraintは各種形状に表示するような設定になります。

配置はSphere/Cylinder/Texutreの3パターンになります。

Sphere関連の設定は下記になります。

コンストレイントを反転 ← 領域外のブロックを表示
Radius ← 円の大きさを指定
Center ← 中心位置を指定

Sphereの形状

Cylinder関連の設定は下記になります。

コンストレイントを反転 ← 領域外のブロックを表示
Radius ← 円の大きさを指定
Heigiht ← 円柱の高さ
Center ← 中心位置を指定

シリンダーの表示

Textureは他のものと異なりTextureの色情報に合わせて配置します。

コンストレイントを反転 ← 領域外のブロックを表示
Texture ← 情報を受取る画像の指定
Channel ← どの色情報を活用するか指定
Plane ← どの方向から投影していくか(基本XYでOK) 
Compare Mode
→ 各種条件と比較して表示する色情報の場所に配置する。

Textureでは位置した場合の表示

続いて「Mesh Render Mode」の設定になります。
Iterate/Random/Blendの3種類があります。

Iterate → 規則正しくきれいに整列して配置

Iterateの配置作業

Random → 完全ランダムに一つ一つ配置

ランダム配置

Blend → 各種まとまって配置

まとまった配置

最後に「Mesh Facing Mode」になりますがこちらを設定すると、
指定した方向をMeshが向くようになります。

Default → カメラ関係なく配置した方向を向く
Velocity → X軸がエフェクトの方向に合わせて向く

VelocityCamera Position → カメラ位置に合わせて向く

カメラの位置に設定Camera Plane → カメラの方向に合わせて向く

カメラの方向に合わせて向く

エフェクトの中で動きをつける「フォース」もあるので、

各種動作を動画にまとめました。
○配向力


○渦

○カールノイズ


○引力


○重力

以上が細かい設定の説明でした。

・目次に戻る

○最後に

今回は簡単に3D周りのクローナとエフェクト
についてまとめてみました。
簡単な動き程度であればこれだけでもいけますが、
2Dの動きなどを加えると良い演出が作れると思うので、
2Dとシーケンスも続けて紹介できたらと思います。

・目次に戻る