NGUIの使い方 その2~UIRootについて~

NGUIをダウンロードすると、メニューに【NGUI】が追加されます。
NGUI – Creat – 2D UI を選択します。

071201

シーン中のNGUIを管理する本体です。
以降基本的に作成されたNGUIのオブジェクトは、このUI Rootの子になります。

注意する事は、スケーリング。
値を見てもらえば分かりますが、0.0001・・などの1以下の値が入っています。
従って、パーティクルなどをRootのこにする、サイズが意図しない形になります。

NGUIで使用するオブジェクトに、パーティクルを出す場合は、
スケールを考え、専用で用意する必要が出てきます。

こちらも合わせてチェック
=>スケール1以下のパーティクルは、カメラ外に出ると、消滅してしまう

Camera は基本的にNGUIのオブジェクトを専用に写す形になります。

flexible (フレキシブル)
よく分かりません。 むしろ教えてください。
constrained (制約)
画面の大きさに応じて、縦または横の比率を維持したまま、スケーリングされます。
This setting will keep UI look the same on all screen size relative to the width of the screen.
you will be able tu see more or less on the top and bottom sides sides of the screen as the aspect ratio changes.
(この設定は、UIが画面の幅にすべての画面サイズの相対的に同じに見えるし続けます。
あなたはTUが、アスペクト比の変化に応じて画面の上側と下側の側面には、多かれ少なかれを見ることができるようになります。)

実行例
640*960の画面サイズに対し、Width640 height960 を入力。
Width640 にチェックを入れる。

スクリーンサイズ 640*960(比率2:3)

072603

スクリーンサイズ 540*960(比率9:16)

072604

スクリーンサイズ 768*1024(比率3:4)

072605

上記から分かるように、 基準にした比率より、縦長の場合は、上下を追加。
横長の場合は、中央をへらし、左右をピッタリにしています。
アンドロイドなどの複数端末に対応する場合、子の設定+Anchors(アンカー)を使うだけで、実現できるかもしれません。


=>複数端末に対応する方法例

constrained On Mobiles (携帯電話上で制約)
PC上ではflexibleで扱われ、携帯端末ではconstrained になる設定らしい。
Content Width
Content Height
基準となるサイズです。
フルHD(1920×1080)を基準にする場合は、子の半分960*540で作成するなど、
等倍の値を入力しない。
画像大きすぎて、テクスチャが馬鹿にならないので。

レイヤーに相当する機能です。
UIPanel の子のオブジェをまとめて、優先度を管理します。

↑手前に表示(優先度:高)

UIPanel(Depth:10)
┗UIWidget

UIPanel(Depth:1)
┗UIWidget
┗UIWidget

UIPanel(Depth:0)
┗UIWidget

ただし注意として、
共通の画像アトラスを表示していても、
UIPanelを挟むと、ドローコールがその都度発生するので注意しましょう。

この場合は、ドローコール2
UIPanel
┗textureB
┗textureA
┗textureA
┗textureA

この場合は、ドローコール3
UIPanel
┗textureB
┗textureA
UIPanel
┗textureA
┗textureA

この場合は、ドローコール4
UIPanel
┗textureB
┗textureA
UIPanel
┗textureB
┗textureA

Alpha
パネル全体の、透過度です。
0にすると、見た目上消えます。 Animatorで透明度をアニメーション使用とすると、うまくいきません。具体的には、0 => 1 で変化するような挙動をしたり、
そもそも表示されないなど、バグがある様子。
UIWidgetも同じような挙動をするので、
自作のコンポーネントなりを追加して、操作する必要があります。(3.9現在)
 
Depth
Panel同士の優先度設定。
値が大きいパネルほど、前面に表示される。
Clipping
■None
デフォ設定。
画面サイズに一致します。

■Texturemask
テクスチャを使った、マスク機能が使えます。

■Soft Clip
四角形の形状で、マスク効果が得られます。
Render Q
■Automatic
■Start At
■Explicit
Sort Order
Normals
Cull
Sisible
padding
Offset
Static
Panel Tool
071901 071902