BLOGブログ

2015.12.10UE4UE/ UMG

[UE4] 枠線の太さはそのままで拡大縮小できるUIの作り方

改訂バージョン: Unreal Engine 4.19

ユーザーに何かを伝えたい時、メッセージをダイアログ表示することがあるかと思います。
また、そのようなダイアログはメッセージ量や使用する場面で大きさを変えたりすることも少なくありません。
今回はそのようなケースで使える機能を一つ紹介したいと思います。

 

拡大縮小できるダイアログを作る

まず、以下のようなダイアログ背景用のテクスチャを用意します。

scale9_01

 

これをUMGで普通に表示すると以下の様になります。

scale9_02

 

しかしここで「X軸方向に2倍した大きさで表示したい」という要望がありました。
ひとまず単純に ImageSize の X を2倍にしてみます。

scale9_03

 

幅は2倍になりましたが、枠線が太くなってしまい、見栄えが悪いですね。。
しかし、こういったケースでも UMGのスタイリング機能 を使えば綺麗なダイアログを表示することができます。

 

UMGで 512×512 のテクスチャを配置し、X軸方向に2倍するために ImageSize を 1024×512 に設定すると、プロパティは以下の様になっているかと思います。

scale9_06

 

ここで以下の様にプロパティを変更してみましょう。

Draw As Box
Margin 0.18 ※画像の形状によって変わります

scale9_07

 

これでダイアログを表示すると、以下の様になります。

scale9_04

 

枠線は拡大縮小されず、綺麗なダイアログが表示されましたね!

 

画像スタイルをBoxに設定することで、表示する画像が3×3の領域に分割されます。
それの真ん中以外の領域(枠の領域)の大きさをMarginで設定することで、拡大縮小時に必要な箇所のみをスケールするようになります。
以下、公式ドキュメントからの引用画像です。

scale9_08

 

まとめ

今回紹介した機能は少し地味ですが、とても有用な機能です。
ちなみにこの機能を使えば、以下の様なものが作れます。

scale9_05

 

是非、有効活用して下さい。