とても抽象化されたガチャ画面（の見た目を）をアスペクト比対応で作ろう！
はじめに
この記事はアスペクト対応という概念に悩む筆者がｵｲｵｲ泣きながらアスペクト比対応ためにいろいろ試した備忘録です。
もっといい作り方とかあるかもしれませんし、筆者はとりあえずScaleBox挟んでおけばよかろう星人なので、もっと良い作り方がある可能性があります。
参考程度にお読みください。
環境
UE5
Windows
盛大な前振り
構造
このUIはメインの表示用の画面ウィジェット+各バナーの子ウィジェットで構成されています
↓メイン画面
↓子ウィジェット
子ウィジェットを作る
子ウィジェットは構成要素でいうとこれだけです
キャンバス→スケールボックスでも行けなくもないのですが、いちいち要素が増えるたびにラップするのも面倒なのでスケール→キャンバスを採用しています
一番上のスケールボックスはScale to Fillを採用。これにより強制的に用意したエリアを埋められるのでとても便利
キャンバスパネルは塗りつぶしでも中央揃えでも。
今回はこれの下の画像でアンカーポイント（オフセットでなくサイズ指定）を使用するので塗りつぶしで問題ありませんが、もしキャンバスに含まれるのがオフセットありだった場合、文字通り限界まで圧縮されてしまいます。安パイは塗りつぶし
↓圧縮できない要素がない状態（すべて圧縮可）で中央揃えだとこうなる
画像の配置
キャンバス下の画像はアンカーポイントのフルHDでサイズ固定
テキストの配置
テキストは別個でスケールボックスに包んでいます
なぜならテキストボックスはキャンバスパネルに直付けだと小さくなってくれないからです。贅沢なやつだな
↓ 上：キャンバスパネルに直置き 下：スケールボックスでラップ
テキスト用スケールボックスは高さ方向が変わって文字が小さくなると困るので、横幅だけを見るようにしています
Scale to Fitを採用。Fillでも可。ただしどちらにしてもなぜかスケールボックスでラップすると文字サイズが変わってしまうので細かい調整をする前にラップしましょう
テキストボックスは、横は中央揃えでも塗りつぶしでもいいですが、縦方向は中央揃えがおすすめです。
なぜならUEはなぜかテキストの縦方向の中央揃えができないためです。心の底からつけて欲しい。
↓横しかない
メイン画面側のUIを作る
メイン側のUIですが作成したバナーを５個いい感じに並べます
しかしこのままデフォルトの左上アンカーだと少しアスペクト比が変わっただけでとんでもないことになってしまいます。
これを解決するために、各バナーのサイズと位置に合わせて、アンカーポイントをずらします
↓概ね0になればOK
Shiftを押しながらアンカーポイントを操作すると、スナップを外してシームレスに動かすことができます。
完成！
あとがき
アスペクト対応が思ったより大変すぎて、ゲームのように崩壊しないレイアウトを作っている方々に頭が上がりません。
それはそうとテキストブロックは早く高さ方向も中央揃えできるようになって
お読みいただきありがとうございました