読者です 読者をやめる 読者になる 読者になる

いんでぃーづ

個人でゲーム開発してる上で吸収したモノたち紹介。UnityからGIMPまでなんでも。デザインとかゲーム論まで語っちゃうよ的なアレ。

MENU
{スポンサーリンク}

uGUIのレイアウトを理解する 〜 Rect Transform編(3)

Tips Unity


前回は、アンカーがくっついている状態でのレイアウトについて解説しました。
今回はアンカーが分離している状態でのレイアウトです。

アンカーが分離しているとき

アンカーが分離している状態と、インスペクタの表示を見返してみます。

f:id:sugar_affordance:20150119111153p:plain

f:id:sugar_affordance:20150119111203p:plain

インスペクタの赤枠の項目は、それぞれ次を意味しています。

Left
左端のアンカーから要素の左端までの距離
Right
右端のアンカーから要素の右端までの距離
Top
上端のアンカーから要素の上端までの距離
Bottom
下端のアンカーから要素の下端までの距離


下の図の赤の部分に対応しています。

f:id:sugar_affordance:20150119113313p:plain

アンカーがくっついているときは、アンカーからピボットの距離でしたが、今回はアンカーから要素までの距離が表示されるようになっているのです。

アンカーの状態が複合することも

さらに、アンカーの状態はX軸、Y軸それぞれ独立しているので、二つの状態が複合する場合もあります。
下図の状態です。

f:id:sugar_affordance:20150119114115p:plainf:id:sugar_affordance:20150119114134p:plain

インスペククタに、アンカーがくっついているときの Pos X, Width と、分離しているときの Top, Bottom が混ざって表示されています。

この状態の場合、X軸方向はピボット基準Y軸方向は要素の端基準でレイアウトが決定されます。

数値の単位

これでアンカーと要素の位置関係の基本はわかりました。
ところで、インスペクタで表示されている数字のPosX や、Leftなどの数字の単位はピクセルです。そして、Anchors の数字は比率です。
何を言いたいかというと、画面のサイズによってアンカーの位置は変わりPosXやLeftの数字は変わらないため、画面サイズを変えると必ずズレが生じます

次回、このズレを回避する方法を解説します。

Amazon.co.jpアソシエイト