【Unity】RectTransformを理解したい

対象 RectTransformがいまいち理解できない人

書いている人 Unity勉強して5ヶ月目

前提  Unityの初心者向けの参考書などを一冊やったことがある

環境 M1 Mac Unity2019.4.17f1

参考 https://docs.unity3d.com/ja/2019.4/Manual/UIBasicLayout.html

Unity2Dでプロジェクトを作ると、必ずRectTransformに出会う。
たぶんなんとなく使っている人も多いと思うが、自分はこれを理解してないことで、いらいらすることが増えてきたので、いい加減決着付けようと思い記事にまとめた次第である。

参考にUnityのドキュメンテーションを張ってるので、合わせて確認してほしい。

目次

RectTransformとは?

RectTransformはUnityのUI(uGUI)についてくるコンポーネントのこと。普通のTransformとはちょっと違うというか複雑

UIにはRectTransformがついてる
UI以下のこの全てにRectTransformがついてる

Imageオブジェクトを作成する

ではここからRectTransformを色々触っていこう。なんでもいいが、Imageオブジェクトがわかりやすいと思うのでImageオブジェクトを作成していこう。

Imageオブジェクトを作成する前に、UIからCanvasを選択してCanvasを作成して、カメラの設定を変更しておく。

CanvasがないとUIは配置できない。いきなり、UIを作成しても自動的にCanvasが作成されるが、カメラの設定をしたいので一旦Canvasだけを作成する。

Canvasを作成

RenderModeを「Screen Space – Camera」に変更してMain Cameraを突っ込んでおく。

Main Cameraを突っ込もう。

これは画面を見やすくするための設定で、よくわからない人はググればたくさん出てくると思う。

ちなみにCanvasにもRectTransformが設定されている。ただし、全体的に黒みがかっていてクリックすることができない。なぜなら、CanvasのRectTransformはCanvasサイズによって変化する(つまりは、画面のサイズ自体)からだ。

Canvasによって、値が変わる的なことが英語で書かれてる。

Canvasを作成したらImageオブジェクトを作成しよう。また、Imageオブジェクトをもう一つ作成して、最初に作ったImageの子としておこう。後はわかりやすいように色と名前を変更しておく。とりあえずこれで準備完了。

UIからImageを選択
親と子に名前を変更。どちらもImageオブジェクトだ。

Sceneビューは以下のような感じになるはずだ。

色はなんでもよい。

また、予めツールバーのRectToolモードを選択しておこう。これにしておくとUIのサイズを自由に変更したり場所を移動することができる。

キーボードのTボタンでも選択できる

RectTransformの各プロパティについて

ではここから、上で作成したChildのRectTransformに焦点を当てて、それぞれのプロパティをみていこう。

Anchor

まずは、Anchor。これでアンカーと読む。船の錨が由来みたい。このアンカーが、RectTransformの肝になる。80%くらい占めてるんじゃなかろうか。

これが錨、あんま馴染みがない

Unityでは、4つの白い三角のことをアンカーと言う。

4つの白い三角のこと。

わかりにくいので、もう1枚。

ピザみたいなやつ

これがどういう役割をするか。

ChildeのRectTransformのPosXとPosYに着目してほしい。Childを特に移動していなければ、PosX、PosYともに0だと思う。

特に移動してない。
最初はどちらも0

では、Childを適当な場所に移動してみる。

右上の方に移動させた。

この状態でもう一度PosXとPosYの値を見てみる。Xが100でYが80になっている。

0から値が変更された。

察しの良い方はもうわかっているかもしれないが、これはアンカーの位置からX方向に100、Y方向に80移動したということだ。つまり、アンカーの役割は船の錨のように、基準を作るようなものだと思って良い。

そしてこのアンカーだが、常に親に対してひっかけるものだと思って良い。錨を自分の親オブジェクトに差し込むイメージだ。

こいつを親にひっかける。

Childの親はもちろんParent、じゃあParentの親はどこかわかるだろうか?
UIは全てCanvasがないと描画されないので、UIのルート(一番上)はCanvasになる。

なので、この場合Parentの親はCanvasだ。

では、Parentを選択して、右に少しずらしてみる。

300と表示される。このように動かしたら数字も表示されてるみたい。
もちろん、PosXは300

この段階だと、まだいまいち「アンカーが親にひっかかるイメージ」がつきにくいと思うので、試しにアンカーの位置を変更してみよう。

ParentやChildの位置を初期位置に戻そう。

Childオブジェクトを選択して、左上にあるマークをクリックすると、AnchorPresetsなるものが出現すると思う。

これクリックできるのか。
なんかいっぱい出てきた。

AnchorPresetsをクリックしたら、何やらたくさん出てくると思うが、試しに左上のやつをクリックしてみよう。

左上のやつをクリック。

すると、アンカーがParentの左上に移動したと思う。

なんでParentの左上にアンカーが設定されるかと言うと、上でも言ったようにアンカーは親にひっかかるものだからだ。Childのアンカーを左上に設定したら、そのアンカーの位置はParentの左上になる。

Parentの左上に移動した!

この状態でChildのPosXとPosYをチェックしてみよう。

デフォではどちらも0だったが、値が変化しているのがわかる。

178と-168になってる。

PosXとPosYは親に刺さってるアンカーを基準として、自分の位置を表しているものになる。

では、Parentオブジェクトのアンカーを左上に設定してみよう。ここまで理解していればどこにアンカーがいくかわかるはず、、

そう、Canvasの左上になる。つまり、画面の一番左上。

アンカーはCanvasの左上に

ここまで一旦、整理すると、

  • アンカーを基準にPosXとPosYが決まる。
  • アンカーは親に引っかかるもの。

文字にすると単純だけど、こんなとこだ。

Anchor Presetsについて

AnchorPresetsは、アンカーの位置を手早く決めれるもの。
Presetsの「前もって用意しておく」という意味を覚えておけばわかりやすいかも?

デフォではアンカーはど真ん中に設定されてある。

デフォは真ん中

たくさんあって、何を選択すればよいかわからないと思うが、触るのは以下の画像のように緑枠の中だけでいいと思う。

赤線のところはエクセルとかスプレッドシートで言うところの単位的な部分(年齢・重さ・性別とか)
まあ無視していいはず。

大事なのは緑の枠で、色々クリックしてみるとアンカーが右上や左下など移動するはずだ。

重要なのは緑枠

クリックすると、アンカーが縦に広がったり、横に広がったりした人もいないだろうか。おそらく、外枠の部分をクリックするとなるはずだ。

アンカーが広がった、、
赤枠で囲んだ部分をクリックすると、アンカーが横に広がったり、縦に広がったりするはずだ。

このアンカーが広がったりする部分が、アンカーっていう概念を難しくしてる原因だと思う。

では、一番わかりやすい右下から見ていく。右下の、プリセットをクリックしよう。

青い十字のマークをクリック

クリックした場合、何が変わるかを見ていこう。

まずは、アンカーの位置。4方向に散らばる形になった。

アンカーが散らばった

次に、ChildのRectTransformを見てみよう。すると、さっきまでPosXやPosY、Width、Heightとなっていた部分が、全てLeft、Top、Right、Bottomとなっている。

PozZ以外全て変更された。

一番大きな変更点は、アンカーからの位置がPosXやPosYで表されてるわけではなくて、親からの距離が表されてる感じになる。Paddingと理解するのが一番わかりやすい。

なので、Left、Top、Right、Bottomの値を全て0にすると、子のサイズが親とぴったりになる。

全て0にしてみると、
親が見えなくなるほど、子が広がった。

わかりやすく、今度は全ての値を10にしてみる。親から10ほど距離が取られた。

さらに、アンカーをストレッチ(広げるタイプのアンカー)にすると、もう一点変わる場所がある。

それが、親のサイズを変更すると子のサイズも一緒に変更されるということだ。

Childをもとの状態に戻して親の大きさを変更してみる。

親のサイズと一緒に子のサイズも変更される

親の大きさに応じて、子も変更したい場合はよいかもしれない。

今度はアンカーをストレッチ状態ではなくセンターに戻して、親の大きさを変更してみる。

親の大きさが変わっても子の大きさはかわらない。

どっちか自分に合うように使い分けよう。

ストレッチでも、ストレッチじゃなくても、一つ勘違いしないでほしいのは、子のRectTransformの値は一切変わらないということだ。

下のような変な形にしても子のRectTransform値は変わらない。

縦長
ストレッチの各値はかわらない

ストレッチにした場合は、WidthやHeightという概念が失われ、親からの距離(Padding)が表示される。なので、子のwidthが変わってもそもそも表示する場所がない。

ストレッチじゃない場合は、PosXやPosYといった具合でアンカーから子の位置が表示される。親のサイズを変更したとしてもアンカーの場所は変わらないので、子のRectTransformも変わらない。

親を縦長にしても、アンカー自体は親の中身にある
子のRectTransformの値は変わらない

一旦まとめると、

  • ストレッチの場合、親のサイズを変更すると子のサイズが変わる
  • 親のサイズを変更しても子のRectTransformの値は変わらない

こんな具合だろうか。

では次に、Anchor Presetsの右上をクリックしてみる。そして、ChildのRectTransformを確認する。

右上をクリック
アンカーは横に広がった。

今度は、各値が、Left Right Height PosYと変則的な形になった。

これを細かく見てみると、ストレッチと、ストレッチじゃない(この場合top)の両方の要素が混じっている。

横にストレッチなので、LeftとRight要素が付け足され、アンカーの位置はtopなので、そこから子の位置を表すPosYが表示される。

Widthは親の大きさによって変更されるので、LeftとRightに変わっている。Heightは残ったままだ。

言葉で言ってもあれなので、実際にParnentを動かしてChildがどういう動きをするか確かめてみる。

まずは横。親の大きさによって、子の横幅も変更される。

子は縮む

それから縦。縦の大きさは変更されない。

子は縮まない

上を見てもらえればわかるように、ストレッチの要素とストレッチではない両方の要素を取り入れたハイブリッド。これもお好みで使ってみよう。

次に、Anchor Presetsの左下を選択してみる。

左下を選択

アンカーが一番左にいって、上に広がった。

アンカーが上に広がってる
RectTransformの値はこんな感じ。

もう、想像できるかと思うが一応解説しておく。

アンカーが親の上下にぴったりくっついたので、Hightが、TopとBottomに変わっている。
子の位置は、アンカーから右に178のとこにあるので、PosX。

実際に動かしてみる。

まずは横。こちらはストレッチしてないので、子の横幅は変更されない。

子の横幅は変更されない
縦幅はストレッチしてるので、親の大きさによって変更される

何を使うかは、自分のやりたい動きに合わせて選択しよう。

Anchor Presets選択時のオプション

Anchor Presetsで選択する時に上の方を見ると何か英語で書かれているのがわかる。

読んでみると、Shiftキーで、後述するpivotや、Altキーで、positionをセットすることができる。
どういうことか見ていこう。

ShiftやAltキーを押すとどうなるのか?

Anchor Presetsを開いている状態で、optionを押すと画面一瞬が変化する。optionを押しながら何か選択してみる。

optionキーを押している間は変化する

まずは右上。

optionを押しながらクリック

すると、アンカーの移動と一緒にChild自身も移動した。

アンカーと一緒に図形も移動した

今度は違うパネルをクリック。

赤丸の中をクリック

すると、アンカーの移動と共に図形の形も変化した。

引き伸ばされた。

上からわかる通り、optionを押しながらパネルをクリックすると、アンカーの移動+図形も一緒に変化してくれる。
慣れたら便利そうだ。

shiftキーは、pivotの欄で改めて説明する。

自由に動かせるアンカー

ここまで、アンカーについてAnchor Presetsを基に説明してきた。

ここからアンカーを自分で動かした時の動きを見ていく。

アンカーはAnchor Presetsからだけではなく、自分で選択して動かすこともできる。

マウスで選択して自由に動かしてみよう。

自分でアンカーを選択して動かした時の、RectTransformはどうなっているのだろうか?

この状態の時のRectTransformは?

アンカーを自由に動かした時の、Anchor Presetsはcustomと表示された。値も、その場所によって変化する。上の図の場合は、アンカーが四方向に散らばってるから、Left Top Right Bottomで表示されている。もちろん、親のサイズに応じて子のサイズも変更される。

アンカーが縦に重なったら、上下は、親の大きさによって縮んだり伸びたりする。

アンカーが縦に重なった場合
TopとBottom表示

アンカーが横に重なった場合、左右の幅は親の大きさによって変わる。

アンカーが横に重なった場合
LeftとRightと表示

アンカーが集合してる時は、PosXとPosYの両方とも表示される。

アンカーが集合した時
見慣れたやつ

こんな風に覚えとけば使いこなせるはず。

Anchors

アンカーを動かした時に、実はRectTransformのAnchorsの値が変更されている。

アンカーがデフォルトの真ん中にある状態の時は、全ての値が0.5だ。

Anchorsの各値

アンカーを自分の好きなところに動かした時には、どうなるだろうか?

アンカーをカスタムにした時
MinのX、YとMaxのX、Yの値が変更されてる

このXとYには0~1の値しか入らない。親オブジェクトを0~1の範囲内で表してる。一番左下が(0,0)で右上が(1,1)。数学のグラフみたいなやつをイメージすれば早いかも。真ん中は0.5。

それぞれ見ていこう。

1.MinのX

MinのXは、アンカーの左側の部分、X方向に動く部分。
最大が0.5で最小が0。

X方向に動く、範囲は0~0.5
上の図の場合は、、
こんな値になる

2.MaxのX

MaxのXは、アンカーの右側の部分、X方向に動く部分。
最大が1で最小が0.5。

X方向に動く、こいつは右側
この場合は、
こんな値になる

3.MinのY

MinのYは、アンカーの右側の部分、Y方向(縦)に動く部分。
最大が0.5で最小が0。

Y方向に動く、下側
ここの部分変更される

4.MaxのY

MaxのYは、アンカーの右側の部分、Y方向に動く部分。
最大が1で最小が0.5。

Y方向に動く、上側
赤線の部分が変更される

これで、一旦アンカーに関しては終了だ。アンカーを自分で動かさずに、Anchor Presetsから選択していく人が多いと思うが実際どうなんだろうか。

子のオブジェクトを選択した状態で親を動かす

これは余談だが、実は子どものオブジェクトを選択した状態で親のオブジェクトを動かすことができる。ただ、動きの確認といった意味合いが強く実際に親のサイズが変更されるわけではない。

実際に見てみる。

動かせるがもとに戻る。

これはおそらく、親を動かした時、子がどういうような動きをするかを確認する為だと思う。

個人的に、長らくこの機能にいらいらさせられた。けど、やっと理解できたので有効に使っていきたい。

Pivot

ここから、Pivotについて説明していく。

Pivotはこのオブジェクトの中にある青い丸のことだ。

この青丸がPivot

Pivotとは、オブジェクトを回転する時などの中心点になるものだ。

オブジェクトを回転してみると、Pivotを中心に図形が回転してる。

次に、Pivotを変更してオブジェクトを回転する。

ちなみに、Pivotを動かすには、左上のツールバーのCenterとなっている部分をPivotにしておく必要がある。

ツールバーをCenterから
Pivotに変更する

Centerモードだと、Pivotは薄くなっており動かすことができない。

Centerの場合は薄い

Pivotモードは濃い青になって動かすことができる。

Pivotの場合は濃い

Pivotモードにしたら、Pivotを動かしてから、オブジェクトを回転してみる。

Pivotを中心にオブジェクトが回転してるのがわかる。

プロパティのPivotの初期値はX、Yとも0.5。そのオブジェクトの中心に設定されている。

初期のPivotの値

Pivotも、数学の座標みたいなイメージでそのオブジェクトの左下が(0,0)で右上が(1,1)だ。

Xが0.7でYが0.9の時は
Pivotの位置はここになる

ちなみに、オブジェクトの範囲を超えて、値をマイナスや1以上にもできる。

それから、Pivotはアンカーからの基準にもなる。

例えば、アンカーを中心にして、PosXとPosYを0に設定する。そして、Pivotは上の状態の時には下の画像のようになる。

PosXとPosYの値を0にして、Pivotの値を変更しておくと、、
Pivotを基準にして、図形が移動する。

自分はあんまりPivotを動かすことがないが、もしかしたら動かした方が自分の意図したような配置になることもあるのかな?

ここで、Anchor Presets画面で説明しなかったオプションの話にもどる。

Anchor Presets画面でShiftキーを押してる間は以下のようになる。

Shiftキーを押した時はどうなるか?
Shiftキーを押している間青い点が表示される

Shiftキーを押した状態で、適当に選択してみる。

例えば赤丸の中をクリック

すると、アンカーの移動と共に、Pivotも移動した。

アンカーと共に、Pivotも移動

ちなみに、ShiftキーとAltキー両方同時に押すことで、オブジェクトの移動と、Pivotの移動両方ともできるので、こちらも覚えておくとよいかも。

ShiftとAltキー両方押した時
ShiftとAltキー
アンカーとオブジェクトが一緒に移動した

RotationとScale

RectTransformの最後のプロパティ、RotationとScaleについて

Rotation

Rotationは図形の角度を変更する。おそらく主にいじるのはZの値だと思う。

Zを50にすると
傾いた

Scale

RectTransformの場合はどの記事読んでも、あまりScaleは動かしてないのでここは触らなくてもよさそう。

一応Scaleの値も動かしてみる。

デフォでは全部1だが、XとYの値を変更
サイズが変更された

一応サイズは変更されるがここは特にいじらなくて大丈夫そうだ。(たぶん)

BlueprintモードとRaw Editモード

最後にBlueprintモードとRaw Editモードを見ていく。

WidthとHeightの隣にそのモードがある。デフォルトではどちらも選択されていない状態だ。

Blueprintモード

まずは、Blueprintモードから。

Blueprintモードは左側の点線の四角の方を選択する。

左側をクリック

Blueprintモードにすると、オブジェクトを回転した時も、回転してない状態の時を表示してくれる。

回転しても、透明な枠をまっすぐなまま

個人的にはまだあまり使い道がわかってない。

Raw Editモード

RawEditモードは右側

右側をクリック

Raw Editモードにすると、Pivot自体を動かす時にPivotが動くのではなく、図形側がそのPivotの値に沿って動いてくれる

実際の動きがこちら

Pivotの値を動かすと、、
それに応じて、図形が勝手に移動してくれる

また、BlueprintモードRawEditモード両方ともを選択しておくこともできる。

まとめ

ここまで読んでくれた方、とても長かったと思うが大枠を理解してもらえていたらうれしい。
一応RectTransformのプロパティは全部おさえたと思う。

特にアンカーが一番ややこしいと思うのでここさえ理解できればRectTransformは大体理解できているのではないだろうか?
自分の理解が間違っている部分を見つけたら随時修正していきます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次