ikoan unity 開発メモ

Unityに関するアレコレを日々つづっていこうと思います

uGUI Buttonを置いてみて、RectTransfomについて理解を深めてみる

Unity uGUI 勉強

はじめに

uGUIリリースされてから、一体どれぐらいたったのかわからない。
いままで仕事上ではNGUI使っていたので、逃げていたけれど
ついにuGUI触ってみようかな、と。

環境

Unity2018.2f

前回まで

Canvas ObjectにひっついてるComponentについて調べて、設定してみました

今回は

Rect Transformの理解のために、まずButtonオブジェクトを置いてみました。

他のサイトさんの記事をざっと眺めてみると
Rect TransformはInspectorはおおよそ下記のような扱いになる。
※他のサイトさんを見ながら、実際に触って見た感じです。もしかしたら間違っているかもしれません。

まず、Transformとの大きな変更点はPivotがあること。
これは個人的には結構ありがたい。
ちなみにPivotとは、回転や拡大する際の基準点のこと。
回転する場合はPivotを中心に回転するし、拡大する場合はPivotを基点に上下に拡大する。

Transformだと、回転用の空GameObject作って、そこに回転したいもの入れて座標ずらして、のように
擬似的なPivotを作ってどうにかしなきゃいけなかったんだけど、それでもうまくいかない場合があったし。

さて、Rect TransformのRotationやScaleに対して代わりはないでしょう。
一番話をややこしくさせているのは、Positionでしょう。

設計思想的にはモバイルのアスペクト比がー解像度がーって言うのに柔軟に対応するための思想なんだろうけど。
さて、Positionを設定するにあたり、まず決めなければいけないのがAnchorについて。
Anchorは親オブジェクトに対しての相対的な位置・サイズだと思ってよい。
例えば親オブジェクトが幅高さ100だとし、子オブジェクトのminxが0.1、maxxが0.9だとすると
子オブジェクトの位置は親のLeftから10右にずれたところになり、その幅は８０となる
と言うのが基本的な考え方。
ここからが厄介なのだが、AnchorのX、Yそれぞれのmin,maxが同じ場合と違う場合で
InspectorのPositionに関連する表記が変わってくると言うこと。

CASE 1 min と max が異なる場合

Inspector 上での表記は Left - Right と Top - Bottom になる。
minとmaxが異なる場合、そのオブジェクトのサイズがAnchorで決定される。
親オブジェクトのサイズを0~1とした場合のサイズをAnchorに入力する。
で、この場合に、Left - Right などに何を入力するかと言うと、
Anchorで指定されたサイズからのOffset（ズレ）を指定する。
この際に注意しないといけないのは、触ってみればわかるのだけど
Left - Right、Top - Bottom に入力した数値の正方向はオブジェクト中心方向となる。

CASE 2 min と max が同じ場合

Inspector 上での表記は PosX - Width と PosY - Height になる。
minとmaxが同値の場合、その数値は親オブジェクトに対する基準点となる。
例えばminxとmaxxが0.5の場合、親オブジェクトの中心が子オブジェクトの座標基準点となる。
その座標基準点からのOffset（ズレ）をPosX、子オブジェクトの幅をWidthに入れることになる。
高さについても同様。

使用用途によってどちらを選択すればいいのかはわからないけど、
以前詰まっていた箇所をようやく理解できてよかった。
これで先に進める。

GameビューをFree Aspectに変えてギュイギュイ動かすと、おー確かにボタンのサイズとかが変わるー。
面白いー。

せっかくなので

Canvas ScalerのScreen Match Modeを変更したりしながらFreeAspectでギュイギュイ動かしてみたりした。
Buttonのサイズはわかりやすく、画面の縦横半分で。
うん、全然違いがわからない。
今度は試しにButtonのminxを0.1、maxxを0.3に変更して、Screen Match Modeを変更してみた。
Buttonのサイズは変わらないけど、中のテキストのサイズが変わってるなぁ・・・。
あとよくみると、Canvas自身のWidth,Heightの数値が変わっている。
なるほど、これはCanvas自身の大きさを買えるものなのか。
変更を見た感じ、Screen Match ModeはExpandで良さそう。

まとめ・次回

実際にButtonを置いてみることで、RectTransformの挙動を確認。
一度理解してしまえば、怖いものはない！

次回からスクリプトとか貼って見たいけど、どうやるのがいいんだろう。
あとはスクショ撮ったり、動画撮ったりしてハッつけて見たいんだけど、ツールもないし、みんなどうやってるんだろうなぁ。