[アスペクト比対応]アンカーポイントとかいうなんとなく使ってるものの挙動検証

はじめに

この記事はアスペクト対応という概念に悩む筆者がｵｲｵｲ泣きながらアスペクト比対応ためにいろいろ試した備忘録です。

参考程度にお読みください。

環境

UE5
Windows

参考

アンカーポイント

アンカーポイントのメイン用途は画像の基本となる位置を固定することです。

特に赤で囲った9グリッド部分まではよく使うと思います。

この9分割では、アンカーのマークがくっついていることが特徴です

一方で黄緑で囲ったほうでは、アンカーのマークが離れています

この違いは、結構な差をもたらします

アンカーポイントの意味

アンカーポイントは「そのUIの各面（辺）からの比率を指します。

例えばこのようにアンカーポイントを設定したとします

出てくる数字の読み方はこのようになり、アスペクト比を変更した際、アンカーはこの％を守るように変形します

↓縦HDにした場合。横の時と同じ比率を保とうとしている

一方でアンカーポイントがくっついている場合。保つべき比率は端からの比率だけになるのでアスペクト比を変えても画像は変形しません。

サイズの意味

アンカーの下にはサイズの項目があります。
しかし、アンカーポイントがくっついているか離れているかで内容が変化します
↓くっついているとき

↓離れているとき

くっついているときは、「アンカーポイント（点）に対してAlignmentの位置がどの座標にあるか」と「サイズ」で表されます

一方で離れているときは、「各アンカーポイントの線から各辺がどれだけ離れているか（オフセットがあるか）」で表現されます

サイズはおおむね絶対値

CanvasPanelでもある程度のスケーリングはしてくれますが、途中で見切れてしまうことがよくあると思います。
アンカーポイントを設定すれば各辺内での比率は保ってくれますが、ダイナミックに変形します。

さて、この画像のようにアンカーを設定して変形した場合、どのようになるでしょうか。

答えとしては
ある程度まではいい感じに変形してくれるが

比率で持てるスペースがサイズの値を上回ったとき裏返ってしまう

です。
なので個人的にはべた付で使用することが多いです

まあ問題点としてアンカーポイントがピクセル単位で指定できないせいでしょっちゅう端数ピクセルオフセットが出てしまうことですが。たのむから何とかしてくれ

UIレイアウトはアンカーポイントを分割し始めてからが沼の入り口。
次回、実践編（？）デュエルスタンバイッ