UE4 Background Blurを使ってみる
Unreal Engine4 4.15のリリースノートを眺めていたときに
Background Blurというものを見つけました。
使ってみたら簡単かつ面白かったので、
今回はこのBackground Blurについて書きたいと思います。
Background BlurとはWidgetを使用して、
背景などをぼかすことのできるものです。
ポーズ画面などで使用すると雰囲気が出るかもしれません。
ではやっていきます。
プロジェクトを作成する
今回はUE4 4.15.1を使用します。
Third Personテンプレートを選択しプロジェクトを作成します。
プロジェクトが作成されました。
Widgetを作成する
コンテンツブラウザから右クリック
User Interface→Widget Blueprintを選択します。
作成されたWidget Blueprintに適当な名前を付けます。
今回はWidget_BlurTestという風にしました。
このWidget_BlurTestをダブルクリックで開きます。
この作業は必須ではありませんが、
TextやButton、Borderなどを適当に配置します。
Background Blurを追加する
左上のPaletteから
Special Effects→Background Blurを
ドラッグアンドドロップで配置します。
今回は画面全体に重なるように配置しました。
右側のDetailsタブの中に
Blur Strengthというパラメータがあります。
このパラメータの値を10に変更しましょう。
このパラメータは0 ~ 100の間でぼかしの強さを
変更することができます。
0だとぼかしはかかりません。
ぼかしはかかりましたが、
このままではUIも一緒にぼけてしまいます。
そこでDetailsタブのZOrderの値を-1に変更します。
ZOrderは数値が大きくなるほど手前に描画されます。
また初期値が0のため-1にするとBlurは一番奥に描画されます。
こんな感じになると思います。
Widgetを描画する
レベルブループリントを開きましょう。
このようにPキーを押すと先ほど作成した
Widgetが描画されるようにします。
実行してみる
プレイボタンを押して実行してみます。
Pキーを押します。
上手くいきました。
ぼかしの強さをアニメーションで変更する
ぼかしの強さを変更するBlur Strengthはアニメーションさせることも
可能なようです。
Widgetアニメーションを作成し、
1秒間隔で0→100→0とBlur Strengthを変更する
アニメーションを組みます。
するとこのようになります。