【Unity】 NGUI(3.x)でUI表示+3Dも扱おう ③ - 他解像度対応

NGUIをとにかく扱ってみましょうな記事その③、他解像度対応編。



NGUIのScaling Styleの高さを調整する

前回の記事で、UIRootのScaling StyleをFixedSizeにし、Manual HeightをiPhone4のタテを想定して
960に設定した状態でiPhone4→iPhone5にアスペクト比を変更した時に、横のサイズが変わるところまで紹介した。

スマホ向けのアプリやゲームを作る場合には、こういった他解像度になった時の事を考えておかないと
後々苦労するので、最初から方針を決めて何かしらの策を取る必要がある。


対応策としては、主に

・ある特定の端末の解像度をアプリ内で(仮想的に)設定し、どの端末でも同じような見栄えになるようにする
・UIの配置や大きさを解像度に合わせて変更する(端末ごとに見栄えが変わるのを許容した作りにする)


がある。

今回は前者の「どの端末でも同じような見栄えになるようにする」の方法を紹介。
(後者はかなりUIのレイアウトを意識しながら作る必要があるのであまり取られない手法。)


[Unity]NGUIで画面サイズに合わせる(NGUI2.3.0対応版)

こちらの記事で紹介されているUIRootScaleというスクリプトを、UIRootにアタッチする。
そしてInspectorのManual WidthとManual Heightをそれぞれ 640, 960 にする。




すると見栄えがこうなる。




トランプの中心点が左端に揃ったのが分かるかと思う。

このUIRootScaleというスクリプトは、記事を良く見てもらうと分かるが
UIRootのFixedSizeのManual Heightを、こちらが指定した解像度に合わせて変更するというもの。
そして横のサイズをピッタリ合わせるようにしてくれている。


こうすると見栄えからも分かる通り、横に合わせたので今度はタテが少し余るようになる。
だが横が切れるという状態はこれで無くなった。

タテが余るということは、iPhone4想定で作られていたものをiPhone5に持っていくと、
上下の部分が余分に見えるということだ。

見えてはいけないものが見えてしまうことが場合によっては起きてしまう可能性がある。


ではこの余った部分を見せないように上下を詰めれば、iPhone5でもiPhone4と同じ見栄えになる
ということになる。

それを行うための次からの手順は、カメラと描画の設定の話になって詳しく解説すると別記事にしないといけないぐらいなので
よく分からない人はそういうものだと今は割りきってもらえればいいと思う。




カメラ(3D)のアスペクト比を調整する

Unityでコインゲー開発:アスペクト比

こちらの記事で紹介されているカメラのアスペクト比を調整するスクリプトをMain Cameraにアタッチし、
アスペクト比を2:3にする。




その状態で起動するとこうなる。




トランプの画像が上下からはみだしているが、画面の上下が縮まったのが分かるかと思う。
このスクリプトはカメラのビューポートのサイズを起動時にこちらで指定した比率で変更してくれるものだ。

背景の青い色はMain Camera側で表示されているもので、このカメラのビューポートのサイズをこれで調整して上下を縮めた。
トランプの中心点の高さが丁度画面の上部に来ているので、この青い枠は640x960を実現出来ていることになる。

これでiPhone5でもiPhone4と同じ見栄えになるように合わせられた。


しかしトランプがはみ出して見えるのは、NGUI側のカメラ(2D)のビューポートがそのままだからだ。
ではこのカメラに同じようにこのスクリプトを設定すれば... と思うだろうが、実際にやってみるとおかしくなる。

難しい話なのだが、前の手順でUIRootのScaling StyleをFixed Sizeにし横を一定の見栄えにする設定を行ったが、
それはカメラのビューポートのサイズをいじっていないデフォルトの状態で行われている。

だからNGUI側のカメラ(2D)のビューポートを調整してはいけない。


ではこのトランプがはみ出して見える状態を防ぐにはどうしたらいいのか。

一番手っ取り早いのは、「一番手前に表示される黒い板を、上下に表示する」ことだろう。
これもよく使われる手法だ。

黒い板のテクスチャを用意して、上下にそのスプライトを表示すればいい。
座標も分かっているので調整しやすい。




以上が、「どの端末でも同じような見栄えになるようにする」手法だ。

3Dカメラと、NGUIの2Dカメラが共存した状態で実現しているが、
これで一般的な3Dと2Dの両方を扱ったものを作成出来る状態になっている。

これまでの記事で少しでもNGUIについての扱い方が理解してもらえたら幸いである。

今後もNGUIについてはなにかあれば記事にしていくつもりだ。

[ 2014年02月02日 23:17:36 : Unity ]

カレンダー

プルダウン 降順 昇順 年別

06月 | 2020年07月 | 08月
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -


全記事表示リンク

全ての記事を表示する

検索フォーム

リンク