(UE4)(UMG)実行時のウィンドウサイズに適合したウィジェットを作る
＊概要
ゲーム実行中にウィンドウを拡大縮小しても、その領域に順応して伸縮できるウィジェットの作成方法です。
＊作業環境
UE:4.26.1
OS:Windows10
ウィンドウサイズに適合しない場合
一般的なテキストウィジェットの作り方としては、初めにウィジェットBPを作成し、Canvas Panelの下にTextを置けば完成です。
例:
分かりやすい様、画面いっぱいのサイズにしました。
(キャンバスのサイズは1920×1080です。)
あとはレベルBPからウィジェットをクリエイトして、ビューポートに追加する事でゲーム内に表示できます。
では、このままゲームを実行し、ウィンドウサイズを変えてみます。
両端の文字が画面外へ切れてしまいました。
縮小の場合、一定のラインを超えるとウィジェットのサイズは縮小しなくなる様です。
＊軽く検証したところ、フォントやテキストボックスのサイズには関わらず、450×450の辺りで縮小が止まってしまいました。
ですが、この問題はとても簡単な方法で解決できます。
(根本的な解決法は別であるかもしれません…)
解決方法
⚪︎Scale Box
このパネルに割り当てられた子ウィジェット[1]は、画面比率を保ちながらボックス内の領域に合わせて拡大縮小ができます。
(注意:このパネルが持てる子ウィジェットは一つだけです。)
これを始まりのRootにして、その下にCanvas Panel>Textと追加しましょう。
完成したら、ゲームを実行してウィンドウサイズを変えてみます。
文字が途中ではみ出さずに、ウィンドウに沿って縮小されました。
●ついでに試したこと
Scale Box以外に、同じ事が出来そうな名前のものが少しあったので、試してみました。
あくまでついでの内容となります。
・Size Box
このパネル以下にあるウィジェットのサイズを管理してくれるそうです。
先程と同じ点順で、これをRootにしてみます。
(以降の検証は実行せず、UMG内で行っています。)
ダメでした。
これはサイズを入力して指定するものなので、Scale Boxみたいな使い方は出来ないみたいです。
でもScale Boxと組み合わせた使い方がよく見られるので、今回の目的に限らず重要なパネルの一つです。
・Safe Zone
TVディスプレイの端やiPhoneXのノッチやホームバーの下のような、「技術的にUI上で使用できても、画面上には表示されない」といったことを防ぐ(引用)ためのパネルです。
目的とは全く関係ないとも言い切れなかったので、試してみました。
これもダメでした…
これは、子widgetが指定された安全領域からはみ出している場合、常にスケーリングと位置調整を行ってくれるそうです。
この説明の限りだとScale Boxと同じ挙動をしてくれそうですが、ウィンドウのサイズとは又ちょっと別の話みたいでした。
まとめ
・RootがCanvas Panelの場合、その子ウィジェットは実行時のウィンドウサイズに対応し切れない。
・Scale Boxの子ウィジェットは、親のボックス領域に対応して伸縮可能になる。
UMGはまだ知らない事だらけなので、今後も随時まとめていきたいと思います。
参考にさせていただいた記事
-
既存のパネルに割り当てられたウィジェットのこと ↩︎
Discussion