いんでぃーづ

ゲームいろいろ、いろいろ自由

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


    
            
  • 1
  •         
  • 2
  •         
  • 3
  •         
  • 4
  •     

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

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

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

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の数字は変わらないため、画面サイズを変えると必ずズレが生じます

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


    
            
  • 1
  •         
  • 2
  •         
  • 3
  •         
  • 4
  •     


“Unity” and Unity logos are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere, and are used under license.


免責事項

当サイトの広告バナー、リンクによって提供される情報、サービス内容について、当サイトは一切の責任を負いません。

また、当サイトの情報を元にユーザ様が不利益を被った場合にも、当サイトは一切の責任を負いません。

すべて自己責任でお願いします。