ＮＧＵＩの使い方　その2~UIRootについて~

基本的な使い方

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

UI Rootについて

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

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

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

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

UI Root

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)

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

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

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

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

constrained On Mobiles (携帯電話上で制約)

PC上ではflexibleで扱われ、携帯端末ではconstrained　になる設定らしい。

UI Panel

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

↑手前に表示（優先度：高）

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

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