uGUIのお話 その1

20141130_01_initial
遂にUnity4.6.0が発表されました。
これは遂に「uGUI」が堂々と使える様に為った事を意味します。

UnityTechnologies社が時間を掛けて作り上げたこの新UIシステムは、
位置指定に従来から在るTransformを使わず、
このシステムの為に新規に作られたRectTransformを使います。
このRectTransformは見た目からして複雑です。
位置・回転・スケールだけを指定するだけだったTransformに比べ、
サイズ・アンカー・ピボットと3つも設定項目が増えています。

特定の1画面に向けてUIを作るのならこんな複雑な設定項目は必要有りません。
全ての要素を絶対座標で決め打ち配置してしまえば良いだけです。
しかし様々な解像度・アスペクト比に綺麗に配置しようとすると
RectTransformで追加された機能を使わないと難しいです。

RectTransformは設定項目が多い為表示が複雑です。
表示方法は慣れれば機能的なのですが、
何せ1つ動かすと色々な値が変わるので
何を動かしたら何が変わるのかさっぱり迄分かりません。

変更内容が分からないと使い分けも出来ず、
使い分けが出来ないと配置が出来ません。
悪循環です。
と言う事で、RectTransformについて解説していきます。

20141130_01_initial
まず表示内容と用語です。
画像を1つ配置すると自動的にキャンバス等が作られて、この様な表示に為ります。



20141130_02_position_size
位置(anchoredPosition)とサイズ(sizeDelta)です。

後述するアンカーからの相対位置を設定します。



20141130_03_position_size
一見すると何とも無い情報なのですが、
実は後述するアンカーの設定に依って
PosX,Widthだったり、Left,Rightだったりと変わります。

Sceneビューで編集している分にはシームレスに切り替わるので
意識しないで良いのですが、
Inspectorで直接数字を設定しようとすると違いを分かっておかないと苦労します。



20141130_04_anchor
アンカー(anchorMin,anchorMax)です。
日本語に直訳すると「錨」とか「拠り所」とかの意味です。

基点と為る位置を親RectTransformからの比率で設定します。

UIシステムでアンカーは頻出する機能の1つなので、
これだけではそんなに珍しい機能でも無いです。

ただしuGUIのアンカーは点では無く幅・高さが有ります。
この幅・高さを持つアンカーと言うのがuGUI独特の考え方な気がします。
よく考えられている機能で非常に便利なのですが、
点方式のアンカーに慣れていると逆に混乱しかねません。

個人的にはuGUI方式のアンカーの方が断然優れていると思います。



20141130_05_anchor
上のひょこっと飛び出てるアイコンをクリックした時に表示される内容も、
アンカーの一部と言えます。
アンカープリセットと言うタイトルからも察せる通り、
よく使う設定が簡単に設定出来る様に為っています。

Altを押しながら選択すると位置が、
Shiftを押しながら選択すると後述するピボットが同時に設定されます。
位置・アンカー・ピボットは相互に影響し合うので、
お決まりの組み合わせと言うのが有ります。
其れが設定出来る様に為っています。

中央9個の設定は点方式のアンカーでも見掛けますが、
右側と下側の設定は幅・高さを持てるuGUI独自の項目ですね。



20141130_06_anchor
アンカープリセット以外にもアンカーの設定は有ります。
プリセットの設定は「Min,Max」の「X,Y」に「0, 0.5, 1」を入れた組み合わせです。
基本的に其の数値ぐらいしか設定しないのですが、
其れ以外の数値をいれるとcustomと言う状態に為ります。

親子関係が持てないUIシステムなら
此処ら辺も使いこなさないといけないでしょうけれど、
親子関係が持てるuGUIではあまり使わないと思います。



20141130_07_pivot
ピボット(pivot)です。
日本語に直訳すると「中心」とか「かなめ」とかの意味です。

回転・スケールを行う時の中心位置です。

UIシステムの中にはアンカーがこの機能を兼ねている事が稀に有りますが、
uGUIでは分かれている様です。
分かれていた方が回転・スケールを行う時の柔軟性が上がります。



20141130_08_rotation
回転(localRotation)です。
お馴染みですので、説明不要ですね



20141130_09_scale
スケール(localScale)です。
こちらもお馴染みです。
UIではぼやけるのを嫌う為あまり使いません。



20141130_10_parent_rect_transform
そして重要なのが、親のRectTransformです。

アンカーの配置には親のRectTransformが重要な要素と為ります。
まぁTransformの時からそうですよね、親はとても重要です。

Transformと勝手が違うのは、親を持たない状態に出来無いと言う事です。
アンカーの設定には親のRectTransformが要りますから、
そもそもの親が要ります。
まぁ無理矢理切り離せば親を持たない状態に出来ますが、
表示されなく為ってしまうので意味が無いです。



唯一例外がキャンバスで、このRectTransformだけが親にRectTransformを持ちません。
このRectTransformはキャンバスが上手い事設定してくれます。
上手い事と言うか、表示領域やカメラの設定に依って様々に変わります。
キャンバスの初期設定では子のRectTransformに実解像度が使える様に設定してくれます。
実解像度は良し悪し有りますが、その他の設定はキャンバスの説明時に行うので今はこのまま説明を進めます。

20141130_11_canvas_rect_transform
今迄のスクリーンショットはほぼ正方形に為っていましたが、これは単なる偶然です。
隠れて見えていませんが、Gameビューが偶然ほぼ正方形だったのです。



20141130_12_canvas_rect_transform
Gameビューの形が変われば同じ様に変わります。



20141130_13_canvas_rect_transform
狙ったアスペクト比が欲しかったら
Gameビューにアスペクト比を選べば良いのですが、
狙ったサイズはこの方法では出来ません。

仮想解像度等の狙ったサイズを作るにはキャンバスの設定を変えれば出来ますが、
RectTransformから離れるので今は触れません。



では、設定する値について説明していきます。
用語紹介からは逆順に為りますが、ピボット→アンカー→位置・サイズの順で説明していきます。
どれか1つ変えると他の2つも引き摺られて変わってしまう事が多いので、設定し易い順序は人それぞれに為るだろうと思います。

20141130_14_pivot
ピボットは自身の左下を(0, 0)、右上を(1, 1)とした座標系を取ります。



20141130_15_pivot
故に中央は(0.5, 0.5)と為ります。

回転・スケールの中心と為りますので、自ずと決まる事が多いです。
マイナスや1過剰の値も設定出来ます。
範囲外が使いやすい場合も稀に有りますが、大抵使い辛いだけです。



20141130_16_anchor
アンカーは親のRectTransformの左下を(0, 0)、
右上を(1, 1)とした座標系を取ります。



20141130_17_anchor
ピボット同様に中央は(0.5, 0.5)と為ります。



20141130_18_anchor
幅・高さが無い場合はMin,Max共に同じ値を設定しますが、
幅・高さが有る場合、其々別の値を設定する事に為ります。

アンカープリセットの時にも書きましたが、基本的に「0, 0.5, 1」しか設定しません。
スクリーンショットの様な設定はまずしません。

Sceneビューでの操作では親のRectTransformの範囲外にはいけません。
MinがMaxを超える事も出来ません。
しかしInspectorからだと範囲外の数値を直接入れる事が出来ます。
やはり使い辛いだけかと思います。



最後に位置・サイズです。
位置・サイズの指定方法はアンカーに幅・高さが有るか無いかでかなり変わります。

20141130_19_position_size
まずアンカーに幅・高さが無い場合です。
この場合、アンカーからピボット迄の相対位置とサイズを実解像度で設定します。
右上に向かう方向が+方向と為ります。



20141130_20_position_size
スクリーンショットだとこう為ります。

実解像度と言うのを便利と取るか、曲者と取るかは人に依るかと思います。
簡単に作る分には仮想解像度テクニックを使った方が楽ですが、
ドットバイドットに拘ってガチガチに配置したい場合は
実解像度で無ければ実現出来ません。



20141130_21_position_size
次にアンカーに幅・高さが有る場合です。

自身の左上をアンカーの左上から、
自身の右下をアンカーの右下からの相対位置で設定します。
実解像度です。
其々中央に向かう方向が+方向と為ります。

2014年12月1日 22時55分 追記 ココカラ
初稿では左下・右上基点にしていましたが、
Inspectorの表示を鑑みて左上・右下基点に修正しました。
追記 ココマデ



20141130_22_position_size
スクリーンショットだとこう為ります。

図示すると一目瞭然ですが、
アンカーに幅・高さが有る場合は位置指定にピボットが関わってきません。
またサイズも設定出来無くなります。

これはアンカーに幅・高さを持たせた利点から来る副作用で、
幅・高さを持たせた時には基本的にサイズを指定したいと思う事は無いでしょう。



20141130_23_position_size
2014年12月1日 22時55分 追記 ココカラ
矩形の縮小と捉えた方が分かり易いかも知れません。
追記 ココマデ




さて、設定する値の説明は以上です。

アンカーの幅・高さ有無でかなり扱いが変わる事が分かります。
何故この様な複雑な機構に為っているのか。
その鍵を握るのがアンカーの設定は「親のRectTransformからの比率指定」で、
位置・サイズの設定は「アンカーから実解像度指定」だと言う事です。
実解像度指定の位置・サイズは親のRectTransformがどの様な状態でも不変ですが、
アンカーは親のRectTransformが変形すると影響を受けます。

此処ら辺は実際に変形させてみたら分かります。
まずは幅・高さを持たないアンカーです。
親のRectTransformを変形させても、自身は変形しません。

この性質はドットバイドットで表示させようとする時に重宝します。

次に幅・高さを持つアンカーです。
親のRectTransformを変形させると、引き摺られて変形します。

この性質は隙間を発生させずに敷き詰める場合に重宝します。

この違いがわざわざ新規にRectTransformが作られた理由であり、uGUIの特徴です。
ちゃんと使い分ければ様々な解像度・アスペクト比に綺麗に歪む事無く配置出来ます。

と言う事で一先ず、uGUIを使う上で一番取っ付きにくいRectTransformについての説明でした。
幅・高さ有りアンカーさえ馴染めれば、狙った位置・サイズに出せる様に為るのでは無いでしょうか。
その2では変形有無の使い分けの解説か、個々のコンポーネントの説明か気の向く方を記事にしているかと思います。
それではまた。






この記事へのコメント

  • peroon

    画像付きですごく分かりやすいです!^w^/
    2015年02月10日 09:19
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/445371428

この記事へのトラックバック