読者です 読者をやめる 読者になる 読者になる

UE4初心者が頑張ってるブログ

Unreal Engine4を使用した開発メモ、及びそれに関連することについて不定期に書いています。

UE4 Background Blurを使ってみる

Widget UE4 Background Blur

Unreal Engine4 4.15のリリースノートを眺めていたときに

Background Blurというものを見つけました。

docs.unrealengine.com

 

使ってみたら簡単かつ面白かったので、

今回はこのBackground Blurについて書きたいと思います。

 

Background BlurとはWidgetを使用して、
背景などをぼかすことのできるものです。

 

ポーズ画面などで使用すると雰囲気が出るかもしれません。

f:id:MozPaca:20170324114944j:plain

 

ではやっていきます。

 

プロジェクトを作成する

今回はUE4 4.15.1を使用します。

f:id:MozPaca:20170324114604j:plain

 

Third Personテンプレートを選択しプロジェクトを作成します。

f:id:MozPaca:20170324114653j:plain

 

プロジェクトが作成されました。

f:id:MozPaca:20170324114801j:plain

 

Widgetを作成する

コンテンツブラウザから右クリック

User InterfaceWidget Blueprintを選択します。

f:id:MozPaca:20170324115358j:plain

 

作成されたWidget Blueprintに適当な名前を付けます。

今回はWidget_BlurTestという風にしました。

f:id:MozPaca:20170324115448j:plain

 

このWidget_BlurTestをダブルクリックで開きます。

f:id:MozPaca:20170324115517j:plain

 

Widgetコンポーネントを追加する

この作業は必須ではありませんが、

TextやButton、Borderなどを適当に配置します。

f:id:MozPaca:20170324115611j:plain

 

Background Blurを追加する

左上のPaletteから

Special Effects→Background Blur

ドラッグアンドドロップで配置します。

f:id:MozPaca:20170324115804j:plain

 

今回は画面全体に重なるように配置しました。

f:id:MozPaca:20170324120057j:plain

 

右側のDetailsタブの中に
Blur Strengthというパラメータがあります。

このパラメータの値を10に変更しましょう。

f:id:MozPaca:20170324120125j:plain

このパラメータは0 ~ 100の間でぼかしの強さを

変更することができます。

0だとぼかしはかかりません。

 

ぼかしはかかりましたが、

このままではUIも一緒にぼけてしまいます。

f:id:MozPaca:20170324120408j:plain

 

そこでDetailsタブのZOrderの値を-1に変更します。

f:id:MozPaca:20170324120448j:plain

ZOrderは数値が大きくなるほど手前に描画されます。

また初期値が0のため-1にするとBlurは一番奥に描画されます。

 

こんな感じになると思います。

f:id:MozPaca:20170324120720j:plain

 

Widgetを描画する

レベルブループリントを開きましょう。

f:id:MozPaca:20170324120743j:plain

 

このようにPキーを押すと先ほど作成した

Widgetが描画されるようにします。

f:id:MozPaca:20170324120823j:plain

 

実行してみる

プレイボタンを押して実行してみます。

f:id:MozPaca:20170324120922j:plain

 

Pキーを押します。

f:id:MozPaca:20170324121002j:plain

上手くいきました。

 

ぼかしの強さをアニメーションで変更する

ぼかしの強さを変更するBlur Strengthはアニメーションさせることも

可能なようです。

 

Widgetアニメーションを作成し、

1秒間隔で0→100→0とBlur Strengthを変更する

アニメーションを組みます。

f:id:MozPaca:20170324123106j:plain

 

するとこのようになります。

www.youtube.com