[Unity]:NGUIで各種画面サイズに対応する方法

Unity 4.2
NGUI 2.6.4
(NGUI 3.0.7の場合はこちらを参照→「[Unity]:NGUIで各種画面サイズに対応する方法(NGUI ver.3.0.7f1)」)

画面下部に5枚のSpriteを並べて表示する場合を考えます。
スクリーンショット 2013-08-09 8.31.43スクリーンショット 2013-08-09 8.33.21

綺麗に並べてありますが、画面のサイズが変わると…

スクリーンショット 2013-08-09 8.35.12スクリーンショット 2013-08-09 8.35.34

Spriteがはみ出してしまったり、余計なスペースが空いたりしてしまいます。
そこで、Spriteにアンカーを付与して位置を調整します。

Hierarchyビューで目的のSpriteを選択して…
スクリーンショット 2013-08-09 8.39.50

メニューから Component – NGUI – UI – Anchorを選択すると、
各Spriteに対してUIAnchorコンポーネントが付加されます。
スクリーンショット 2013-08-09 8.41.24スクリーンショット 2013-08-09 8.50.43

左下に配置したいSpriteを選択しInspectorビューで
UISpriteのPivotを左と下に設定して、UIAnchorのSideをBottomLeftとします。

スクリーンショット 2013-08-09 8.53.08 スクリーンショット 2013-08-09 8.47.59

左から2番目に配置したいSpriteの場合は、
例えばPivotを中央と下、SideをBottomとした上で、
UIAnchorのRelative OffsetのXを-0.2と設定します。
この辺りは色々な設定値の組合せで自由に出来ますので、目的の位置にSpriteが配置されるように他のSpriteに関しても設定してみて下さい。

すると…
スクリーンショット 2013-08-09 9.01.25スクリーンショット 2013-08-09 9.01.41

配置に関しては問題無さそうですが、依然として余計なスペースが空きますし、
今度は画面の横幅を縮めた時にSprite同士が重なるようになってしまいました。

そこで今度はストレッチの設定をして、
Spriteが画面サイズに合わせて拡大・縮小するようにします。

アンカーの時と同じように対象のSpriteを選択して、
今度は Component – NGUI – UI – Stretchを選択すると、
各Spriteに対してUIStretchコンポーネントが付加されます。

スクリーンショット 2013-08-09 9.06.36スクリーンショット 2013-08-09 9.11.00

UIStretchの設定は全てのSpriteに関して同じですので、
全てのSpriteを選択したままInspectorビューでUIStretchの項目を
StyleはHorizontalに、Relative SizeのXは0.2と設定します。

スクリーンショット 2013-08-09 9.18.10

すると今度は…

スクリーンショット 2013-08-09 9.21.55 スクリーンショット 2013-08-09 9.21.48

画面サイズが変わってもSpriteが自動的に拡大・縮小されて画面下部に並ぶようになりました。

Sprite自体のアスペクト比が変わってしまうのが都合悪い場合は、
UIStretchのStyleやRelative Sizeの設定で色々と変更することができます。

また今回は水平方向に並べる設定を紹介しましたが、
垂直方向でも同様の設定で対応が可能です。
試しに画面いっぱいに5×5=25枚のSpriteを敷き詰めてみました。

左がiPhoneの4インチで、右がiPadです。
スクリーンショット 2013-08-09 7.39.33 スクリーンショット 2013-08-09 7.38.16

応用すれば、色々と柔軟なデザインが出来そうですね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です