Background Blur ウィジェット

単一の子ウィジェットの下にあるオブジェクトをぼかす Background Blur ウィジェットの使用方法を説明します。

コンテンツ

Background Blur は、UI レイアウトに追加できるウィジェットです。このウィジェットを使用して、コンテンツを調整可能なパディングで囲み、ポストプロセスのガウス ブラーを背後にあるすべてのバックグラウンドに適用することができます。Background Blur ウィジェットはひとつの子ウィジェットを含みます。

このページでは、UI レイアウトでのバックグラウンド ブラーの使用と調整に関する基本情報を提供します。さらに、Unreal Motion Graphics UI Designer (UMG) を使用して、以下の Background Blur ウィジェットの使用と調整の例をよく理解してください。

詳細パネル

配置した Background Blur ウィジェットの [Details (詳細)] パネルには、このウィジェットに関連して設定可能な以下のオプションがあります。

BackgroundBlur.png

オプション

説明

Apply Alpha to Blur

true の場合、ウィジェット アルファに基づきブラー (ぼかし) の強度を調整します。

Blur Strength

バックグラウンドのぼかしレベルを設定します。数字を大きくすると、ぼかしは強くなりますが、GPU のランタイム負荷が増えます。

Low-Quality Fallback Brush

Low-Quality Override モードが有効な場合に、ぼかしを適用するかわりに描画する画像です。バックグラウンド ブラーの Low-Quality Mode を有効にするには、 cvar Slate.ForceBackgroundBlurLowQualityOverride1 に設定します。これは通常、プロジェクトの scalability (拡張性) の設定で行います。

Blur Radius

ブラー計算時に任意のピクセルから各方向にウェイトをかけるピクセル数です。値が大きくなると負荷は高くなりますが、ぼかしは強くなります。

Blur Corner

ブラー計算時に任意のピクセルから各方向にウェイトをかけるピクセル数です。値が大きくなると負荷は高くなりますが、ぼかしは強くなります。

前述の各プロパティは、ブループリントのスクリプトでランタイムに設定 (または変更) することもできます。

BackgroundBlurBP.png

他の外観を設定する機能 (水平方向、垂直方向のアライメント) や、ウィジェット周囲のパディングも定義することができます。

使用例

以下の例では、Background Blur ウィジェットを使ってゲームが一時停止したときに背景をぼかしてメニューをハイライトします。

ここでは、単純なメニューに Blur Widget を加えて、Blur Strength 値を使って適用するバックグラウンド ブラーの強度を決めます。

Menu Widget Blueprint のグラフでは、ボタンのクリックにメニューがどのように反応するかを処理するスクリプトを作成しました。

BlurWidgetGraph.png

上の画面では、ウィジェットを構築する場合、マウス カーソルをオンにしています。Resume ボタンを押すとカーソルが非表示になり、ゲームの一時停止が解除され、表示されているメニューが取り除かれます。 Quit を押すと、ゲームが終了します。プレイヤー キャラクターのブループリント (以下) で、キーが押されたときに、メニューを作成、表示するスクリプトを追加しました。この場合、P が押されるたびに、メニューが表示されると、ゲームを一時停止します。

CharacterBlueprint.png

結果として、ゲームを一時停止し、背景をぼかしますが、プレイヤーがインタラクションするためにメニューはそのままの状態を保ちます。

50_Blur.png

50 (上) から 10 (下) に Blur Strength を減らして背景がぼんやりと見えるようにすることもできます。

10_Blur.png

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル