スマホ向けゲームのWidgetについて

Last updated at 2022-12-06Posted at 2022-12-06

この記事はUnreal Engine (UE) Advent Calendar 2022 カレンダーその3の7日目の記事です。
Qiita初投稿になります。何か間違いなどあればご指摘いただけると大変ありがたいです。

スマホ向けのゲームを作る際にWidgetで困ったこと、という題ですが、要は縦横比（アスペクト比）やウィンドウサイズが変わる環境でのWidget入門です。
最初にDPI Scaleについての説明、次に簡単な作成の紹介をします。

いろいろなウィンドウサイズの確認方法について

Unreal Engineでは、スクリーンサイズが変わったときに、自動的にWidgetをスケーリングする仕組みが入っています。
- 上のgif動画を参照
ある一定の横幅からスケールが変わらなくなりました。(こんなスクリーンのデバイスはないと思いますが…)
- 右下を見ると、DPIスケールが0.44と書かれています。
右下の歯車マークからDPIScaleの設定を確認してみます。
- デフォルトの設定では、短い辺を基準として、480の時に0.44になり、それ以上短い辺になってもDPIスケールは小さくならないようです。
試しに、もっと小さくなるようにしてみます。
- 小さくなりました。
このように、スクリーンサイズに応じて自動的にWidgetをスケーリングする仕組みが入っています。
- なので、単純に画面が大きくなったり小さくなったりするようなケースではそのまま動くと思います。（荒くなったりつぶれたりすることはある）
- 基準となる画面サイズを決めて、それをスケール1にすると良さそうです。(https://docs.unrealengine.com/4.27/ja/InteractiveExperiences/UMG/HowTo/ScalingUI/)
が、あくまでも均等にスケーリングするだけなので、スクリーン全体のアスペクト比が変わったときに見切れてしまったりします。

こんなのが作りたいとします

Canvasパネルでは、アンカーを設定することでウィンドウサイズやアスペクト比の変更に対応できます。
- 例えば、一番下のやつのアンカーを左下にすると…
- 縦横を変えても左下にちょうど来ました。
- このように、ウィンドウサイズが変わっても大丈夫なようにする仕組みがアンカーです
ただし、アンカーを設定しても、アスペクト比が変わると、重なってしまったりします。
そこで、プリセット以外のアンカー設定を利用してみます。
- アンカーは起点となる点を指定するだけではなく、任意のサイズにすることができます。

アスペクト比を変えないようにするためには、ScaleBoxが便利です。
- ScaleBoxで囲むと、その子供のウィジェットを元のアスペクト比を維持するようにスケールしてくれます（ストレッチング設定によりますが。）
ただし、やみくもに使うとフォーマンスに影響するため、注意が必要です。
- https://www.docswell.com/s/EpicGamesJapan/KGLWJZ-UE4_UFE20W_gungho_60fpsAction#p57

決められた間隔で並べたいときは、そもそもGridやUniformGridを使うほうが楽です。
今回はUniformGridを使ってみます。
- 本筋とは直接関係ないですが、右クリックからの「…でラップする」「…と置換」が色々と試す際にも便利です。
- 子で置換、もあるので、ScaleBoxでラップして、やっぱりいらないか…となったときに消す等に便利です。
UniformGridを使えば、ScaleBoxを使うまでもなくきれいに並びます。