Unity 4.2
NGUI 2.6.4
(NGUI 3.0.7の場合はこちらを参照→「[Unity]:NGUIで各種画面サイズに対応する方法(NGUI ver.3.0.7f1)」)
画面下部に5枚のSpriteを並べて表示する場合を考えます。
綺麗に並べてありますが、画面のサイズが変わると…
Spriteがはみ出してしまったり、余計なスペースが空いたりしてしまいます。
そこで、Spriteにアンカーを付与して位置を調整します。
メニューから Component – NGUI – UI – Anchorを選択すると、
各Spriteに対してUIAnchorコンポーネントが付加されます。
左下に配置したいSpriteを選択しInspectorビューで
UISpriteのPivotを左と下に設定して、UIAnchorのSideをBottomLeftとします。
左から2番目に配置したいSpriteの場合は、
例えばPivotを中央と下、SideをBottomとした上で、
UIAnchorのRelative OffsetのXを-0.2と設定します。
この辺りは色々な設定値の組合せで自由に出来ますので、目的の位置にSpriteが配置されるように他のSpriteに関しても設定してみて下さい。
配置に関しては問題無さそうですが、依然として余計なスペースが空きますし、
今度は画面の横幅を縮めた時にSprite同士が重なるようになってしまいました。
そこで今度はストレッチの設定をして、
Spriteが画面サイズに合わせて拡大・縮小するようにします。
アンカーの時と同じように対象のSpriteを選択して、
今度は Component – NGUI – UI – Stretchを選択すると、
各Spriteに対してUIStretchコンポーネントが付加されます。
UIStretchの設定は全てのSpriteに関して同じですので、
全てのSpriteを選択したままInspectorビューでUIStretchの項目を
StyleはHorizontalに、Relative SizeのXは0.2と設定します。
すると今度は…
画面サイズが変わってもSpriteが自動的に拡大・縮小されて画面下部に並ぶようになりました。
Sprite自体のアスペクト比が変わってしまうのが都合悪い場合は、
UIStretchのStyleやRelative Sizeの設定で色々と変更することができます。
また今回は水平方向に並べる設定を紹介しましたが、
垂直方向でも同様の設定で対応が可能です。
試しに画面いっぱいに5×5=25枚のSpriteを敷き詰めてみました。
応用すれば、色々と柔軟なデザインが出来そうですね!