[NGUI] 相対的な位置とサイズ(anchor & stretch)
スクリーンの幅と高さを0.0-1.0としたときの位置を指定するのが「Anchor」、サイズを指定するのが「Stretch」になります。
PCとスマホとタブレットで解像度が異なる場合に、同一の見え方をさせたい場合に利用できます。
以下のように画面下に4つのSpriteを配置し、画面の伸縮で位置が固定になるようにします。
ここでは、Sprite1/Sprite2/Sprite3/Sprite4と命名。
なお、それぞれのSpriteのInspectorウィンドウ内のAnchorsでTypeはNoneにしてます。
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の中心の位置が原点のようですね。
この状態で実行して画面を伸縮すると、左下のSpriteは常に左下に配置されているのが分かります。
では、BottomLeftからそれぞれのSpriteの位置を調整していきます。
Relative OffsetのY方向を0.1、X方向を0.2ごとにずらして配置しました。
これで実行して画面をリサイズすると横の伸縮でも位置は均等になります。
ただ、横方向を縮めていくとSpriteのサイズは変わらないため重なってしまいます。
そこで、Stretchを使います。
Stretch
Sprite1/Sprite2/Sprite3/Sprite4を選択し、Inspectorウィンドウの一番下のAdd Componentより「NGUI」-「UI」「Stretch」を選択。
これで各Spriteに「UIStretch」が追加されます。
UIStretchでStyleを「Horizontal」、Relative Sizeを(0.2, 1)に変更。
これを各Spriteで指定します。
すると、実行して画面の幅を縮小すると横方向はリサイズされるようになります。
画面の縦横をそれぞれ伸縮すると、スマイルマークが真円じゃなくなってしまいますね。
ここを調整しましょう。
各Spriteの「Widget」のところのAspect Ratioに1.0とBasedOnWidthを指定。
これで画面の伸縮でも縦横の比率は常に同じになります。
この状態で実行して画面をリサイズすると、それらしくなりました。
下が少し見切れてますので、後はAnthorのRelative Offsetで位置を調整すればよさそうです。
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の位置/サイズをスクリプトから変更」を参照。
最終更新時間：2014年02月07日 15時51分53秒