!!![NGUI] 相対的な位置とサイズ(anchor & stretch)

スクリーンの幅と高さを0.0-1.0としたときの位置を指定するのが「Anchor」、サイズを指定するのが「Stretch」になります。
PCとスマホとタブレットで解像度が異なる場合に、同一の見え方をさせたい場合に利用できます。

以下のように画面下に4つのSpriteを配置し、画面の伸縮で位置が固定になるようにします。
ここでは、Sprite1/Sprite2/Sprite3/Sprite4と命名。
なお、それぞれのSpriteのInspectorウィンドウ内のAnchorsでTypeはNoneにしてます。
{{ref_image unity_ngui_anchor_01.png}}

!!Anchor

Sprite1/Sprite2/Sprite3/Sprite4を選択し、Inspectorウィンドウの一番下のAdd Componentより「NGUI」-「UI」「Anchor」を選択。
これで各Spriteに「UIAnchor」が追加されます。また、設定直後では画面中央にSpriteが移動しています。
これはUIAnchorのSideが「Center」、Relative Offsetが(0, 0)になっているためです。この場合は中央からの相対位置をRelative Offsetを指定してます。
では、Spriteを1つ1つ選択して、このUIAnchorの値を調整していきましょう。

Sideは基準にする位置を指定します。画面左下がBottomLeft/右上がTopRightです。
Sideを「BottomLeft」、Relative Offsetを(0, 0)にすると左下にSpriteの中央が移動しています。Spriteの中心の位置が原点のようですね。
{{ref_image unity_ngui_anchor_02.png}}
この状態で実行して画面を伸縮すると、左下のSpriteは常に左下に配置されているのが分かります。

では、BottomLeftからそれぞれのSpriteの位置を調整していきます。
{{ref_image unity_ngui_anchor_03.png}}
Relative OffsetのY方向を0.1、X方向を0.2ごとにずらして配置しました。
これで実行して画面をリサイズすると横の伸縮でも位置は均等になります。

ただ、横方向を縮めていくとSpriteのサイズは変わらないため重なってしまいます。
{{ref_image unity_ngui_anchor_04.png}}
そこで、Stretchを使います。

!!Stretch

Sprite1/Sprite2/Sprite3/Sprite4を選択し、Inspectorウィンドウの一番下のAdd Componentより「NGUI」-「UI」「Stretch」を選択。
これで各Spriteに「UIStretch」が追加されます。

UIStretchでStyleを「Horizontal」、Relative Sizeを(0.2, 1)に変更。
これを各Spriteで指定します。
{{ref_image unity_ngui_stretch_01.png}}
すると、実行して画面の幅を縮小すると横方向はリサイズされるようになります。
{{ref_image unity_ngui_stretch_02.png}}

画面の縦横をそれぞれ伸縮すると、スマイルマークが真円じゃなくなってしまいますね。
ここを調整しましょう。

各Spriteの「Widget」のところのAspect Ratioに1.0とBasedOnWidthを指定。
これで画面の伸縮でも縦横の比率は常に同じになります。
{{ref_image unity_ngui_stretch_03.png}}

この状態で実行して画面をリサイズすると、それらしくなりました。
下が少し見切れてますので、後はAnthorのRelative Offsetで位置を調整すればよさそうです。
{{ref_image unity_ngui_stretch_04.png}}

!!Run Only Once

UIAnchor/UIStretchの両方で「Run Only Once」のチェックボックスがあります。
android実機で検証していたときに、初期実行時にUIAnchorの位置指定がついてきてないことがあったため、「Run Only Once」をOffにするとうまくいきました。

NGUI 3.4.7ではUIStretchの「Run Only Once」をOffにすると、UIScaleと併用したときにマウスオーバー/マウスダウン時の挙動が怪しい？UIScaleの効果で少し大きくなってもすぐに元の大きさに戻ってしまいます。

UIAnchor/UIStretchを使用せずにスクリプトから直接位置やサイズを変更したほうがいい場合もありますので、その場合は「[[Spriteの位置/サイズをスクリプトから変更|unity_ngui_sprite_pos_size]]」を参照。

----
{{lastmodified}}