ひよっこ創作ブログ@Rwi

UE4(+ゲーム制作関連)で何やら書いていきます

【UE4】コピペでOK!シーンチェンジに使えるトランジション演出を実装しよう!

f:id:rwiiug:20200528113207g:plain f:id:rwiiug:20200529130840g:plain

このような「トランジション」と呼ばれる画面演出を、UE4でお手軽に実装しよう!という記事になります。


なお、当記事のトランジション演出は

  [UMG]ディゾルブエフェクトもできる、RetainerBoxについて

こちらの記事内のマテリアルをベースに実装を行っています。
RetainerBoxの用法も分かりやすく解説されているとても有用な記事のため、合わせてご一読ください。



目次

  1. 準備編
  2. 実装編
    1.. マテリアルを作成
    2.. ウィジェットを作成
    3.. ウィジェットを表示
  3. 応用編
  4. 補足




1. 準備編

必要なもの

  1. トランジション時の表示イメージ(任意のテクスチャ画像 または User Interface 設定のマテリアル)
  2. トランジション形状用のテクスチャ(色の変化で時間の変化を指定。)


f:id:rwiiug:20200526065536p:plain
これと


f:id:rwiiug:20200526065631p:plain
これで


f:id:rwiiug:20200526065919g:plain
こうじゃ!




トランジション素材の導入・動作確認はこちら等を参考に。
【AviUtl】おすすめtransition用モノクロPNG素材まとめ(1/4) | AviUtlの易しい使い方
【AviUtl】おすすめtransition用モノクロPNG素材まとめ(2/4) | AviUtlの易しい使い方

モノクロではなくカラー画像でもOK。
画像を1枚用意するだけなので、自作も比較的簡単に行えます。

f:id:rwiiug:20200528070551j:plain
f:id:rwiiug:20200528061555g:plain


f:id:rwiiug:20200528111703j:plain
f:id:rwiiug:20200528113207g:plain
表示イメージとトランジション形状、同じテクスチャを指定しても良いカンジに。






2. 実装編

2-1. マテリアルを作成

はじめに新規マテリアルを作成。
詳細タブからマテリアル設定を以下の通りに変更します。

f:id:rwiiug:20200528071032j:plain
Material Domain → User Interface
Blend Mode → Translucent


続いてこちらのブループリントの中身を丸ごとコピー&ペースト!(理論はバッサリ省略)
ライブプレビュー機能がONの場合、コピペ時に負荷でエディターがクラッシュする可能性があります。ご注意ください。

範囲選択 → 「Ctrl + c」「Ctrl + v」 でUE4内にコピペができます

[参考]
・元マテリアル
[UMG]ディゾルブエフェクトもできる、RetainerBoxについて
・角度に応じたスケーリング処理
[UE4]UMGで使えるでシンプルなグラデーションを作り方あれこれ|株式会社ヒストリア




マテリアルに対する変更を適用後、コンテンツブラウザ内でマテリアルを右クリック → マテリアルインスタンスを作成。
このマテリアルインスタンスのパラメータを変化させ、正常に動作することを確認できれば、これで8割型完成です。イェイ!

f:id:rwiiug:20200528070843g:plain








2-2. ウィジェットを作成

先ほど作成したマテリアルインスタンスを画面に表示するため、
このような新規ウィジェットブループリントを作成します。

f:id:rwiiug:20200529034014j:plain




ウィジェット配置

f:id:rwiiug:20200529041104j:plain

CanvasPanel
  -RetainerBox
    -Image




ウィジェット設定
f:id:rwiiug:20200529035130p:plain
【 RetainerBox 】【 Image 】
他ブループリントでウィジェットを扱えるようにするため、
それぞれの is Variavle 設定値をONに。



f:id:rwiiug:20200528122134p:plain
【 RetainerBox 】
アンカー設定は右下の全画面設定に。
オフセット値は( 0.0 , 0.0 , 0.0 , 0.0 )で画像を画面全体に表示させる。




f:id:rwiiug:20200529035556p:plain
【 RetainerBox 】
詳細タブ → Effect 欄に、先ほど作成したマテリアルインスタンスを指定。
Texture Parameter欄に、 "T_Image" と入力。



f:id:rwiiug:20200529035724j:plain f:id:rwiiug:20200529042955j:plain
【 Image 】
デフォルトで表示されるイメージ画像を指定。
未指定の場合はTintで指定した配色に。

マテリアルインスタンス内で変更できるテクスチャ"T_Image"は表示確認用。
実際にはこちらで設定したイメージ画像が表示される。






2-3. ウィジェットを表示

ここまで出来ればあともう一息!
適当なブループリントクラス(Actor)を作成し、ワールドに配置。

f:id:rwiiug:20200529060144j:plain
f:id:rwiiug:20200529085947j:plain
f:id:rwiiug:20200529125210j:plain

先ほどのウィジェットをCreate Widget → Add Viewportで画面に表示し、
同時にTimeLineノード等で、時間とともにマテリアルパラメータ「Offset」の値を変化させると・・・




f:id:rwiiug:20200529061045g:plain
トランジション完成!👍






応用編

応用いろいろ

f:id:rwiiug:20200529051205j:plain
処理をカスタムイベント化。 トランジションの表示・非表示を呼び出しやすく。



f:id:rwiiug:20200529051230j:plain
複数のTimeLineノードの中身をCurveアセットで上書き。
別々に配置されたTimeLineノードの挙動を共通化できる。



f:id:rwiiug:20200530064343j:plain
f:id:rwiiug:20200530063731j:plain
構造体やDataTable機能でデータをまとめると便利。


f:id:rwiiug:20200529160347j:plain
f:id:rwiiug:20200529160339j:plain
Texture設定 → アジャストメント より、
テクスチャ画像の明度を調整 = UE4内でトランジション挙動を微調整できる。



f:id:rwiiug:20200526065302g:plain
f:id:rwiiug:20200530040617g:plain
f:id:rwiiug:20200529053057j:plain
【 Image 】
トランジション時の表示イメージを変更。
「Set Brush from Texture」・・・テクスチャ画像
「Set Brush from Material」・・・Material Domain → UserInterface 設定のマテリアル

マテリアル参考
【UE4】Materialでいろんな幾何学模様を作ってみよう【★~★★】| キンアジのブログ





f:id:rwiiug:20200529093542g:plain
f:id:rwiiug:20200529092916j:plain
TimeLine完了時にOpenLevel。
トランジション演出により、レベル間を滑らかに繋げられる。

f:id:rwiiug:20200529104406g:plain
トランジション表示時に「Rotate_Shape」・・・0°
トランジション非表示時に「Rotate_Shape」・・・180°
と設定すると流れがさらにスムーズに。



「Offset」以外のパラメータを時間とともに変化させると・・・?

f:id:rwiiug:20200529110114j:plain




f:id:rwiiug:20200529044545g:plain
f:id:rwiiug:20200529044340j:plain]
【 Image 】
「Tint」を変化。



f:id:rwiiug:20200529052110g:plain
f:id:rwiiug:20200529052456g:plain
f:id:rwiiug:20200529052046g:plain
【 RetainerBox 】
「Rotate_Image」「Rotate_Shape」「Rotate_Image & Rotate_Shape」を変化。



f:id:rwiiug:20200529054235g:plain
f:id:rwiiug:20200529054608g:plain
f:id:rwiiug:20200529054635g:plain
【 RetainerBox 】
「NoiseSize」「Len」「NoiseSize & Len」を変化。






補足

使用するトランジション用テクスチャや画面解像度によっては、
画面端の画像表示が若干乱れる場合が。
f:id:rwiiug:20200529150659j:plain

その場合、以下いずれかの方法で改善する可能性があります。


・Texture設定 → Tiling Method を 「Wrap」 → 「Clamp」 に

f:id:rwiiug:20200529150735j:plain
f:id:rwiiug:20200530094219j:plain

・Offsetの変化範囲を 「0.0~1.0」 から 「 -0.1 ~ 1.1」 のように広げてみる

f:id:rwiiug:20200529150755j:plain






おわり

f:id:rwiiug:20200529155044g:plain
ご閲覧ありがとうございました。