こんにちは、ともくんのゲーム作り部屋にようこそ！
このページでは、
「UnityのRectTransformってなに？」
「RectTransformでなにを設定できるの？」
というお悩みの方に向けた内容となっています。
Unityでは、UIを表示する際にRectTransformコンポーネントが使われます。
このRectTransformコンポーネントは、UIをどのように表示するかを制御する役割を持っています。
通常のオブジェクトの座標はTransformコンポーネントを使いますが、UI要素ではこのRectTransformコンポーネントを使って、親で指定したUIの表示領域に対して相対的な位置を指定していくことになります。
そこでこのページでは、RectTransformコンポーネントについてどんな役割や機能があるのか、また使い方や設定項目までをまとめていきます。
RectTransformコンポーネントとは？
まずは、RectTransformコンポーネントがどういう役割を持つコンポーネントなのかを紹介していきます。
UI要素をどこに表示するかを決める
RectTransformコンポーネントは、UI要素をどこに表示するのか、またどのように表示するのかを決めるために使われるコンポーネントです。
そもそもUI要素とは、ゲーム内のボタンやテキストなどユーザーに様々な情報を伝えるためのオブジェクトのことです。
これらのUI要素をUIの表示領域内でどこに表示させるかを決めるために、RectTransformコンポーネントを使って指定していくことができます。
親のCanvas領域に相対的に紐づいている
RectTransformコンポーネントは、親オブジェクトのCanvasコンポーネントで作られたUIの表示領域に対して、相対的な位置や大きさを決めていくことになります。
Canvasコンポーネントとは、UIの表示領域を作るためのコンポーネントで、UIを作る際はUI要素の親オブジェクトがCanvasコンポーネントを持っている必要があります。
そして、このCanvasコンポーネントによって決められたUIの表示領域の中で、さらに個々のUI要素をどこに配置していくのかをRectTransformで決めていくことになります。
RectTransformの使い方
ここからは、RectTransformの使い方や設定項目について紹介していきます。
UIを作成すると自動的に紐づく
RectTransformは、基本的にUIを作成した際に自動的に紐づいているコンポーネントです。
例えば、ゲーム内にUI要素としてボタンを表示させたい場合、ヒエラルキーウィンドウから+ボタンを押して、「UI」の中にある「Button – TextMeshPro」を選択します。
すると、親オブジェクトとして「Canvas」、子オブジェクトとして「Button」のオブジェクトが作成されますが、どちらのオブジェクトにもRectTransformコンポーネントが紐づいている状態で作成されます。
なお、親オブジェクト(Canvas)に紐づくRectTransformは、UI画面の表示領域の大きさや位置を決めています。
アンカーポイントで基準となる場所を指定する
RectTransformを設定する際に、アンカーポイントと呼ばれる項目が非常に重要になってくるので説明しておきます。
アンカーポイントとは？
アンカーポイントとは、UIの表示領域内にそのUI要素を置くための基準となる場所を指しています。
もう少し詳しく言うと、ゲーム画面内に置いたアンカーポイントからみてUI要素をどこに置くのか、UI要素をどのくらいの大きさにするのか、といったことを決めています。
そして、このアンカーポイントはゲーム画面のサイズが変わっても、相対的な場所(例えば画面の真ん中や左上など)の位置は常に変わらないという特徴があります。
そのため、このアンカーポイントをしっかりと設定しておくことで、ゲーム画面のサイズが変わってもUIを適切に表示できるようになります。
なお、アンカーは英語で船の「錨(いかり)」という意味で、画面サイズが変わってもその基準点をそこに置き続けるという役割を果たしています。
アンカーポイントの設定について
UI要素を選択した際にシーンビューに表示される以下のマークがアンカーポイントです。
このアンカーポイントは、上記のように一点だけに置くこともできれば、以下のようにマウスを使って四隅に分けてそれぞれ自由に指定することもできます。
例えば、画面の左下にボタンを表示させたい場合に、まずアンカーポイントを画面の真ん中に設定してみます。
アンカーポイントを基準とするので、ここでは画面の真ん中からどのくらい離れた場所にUIを表示するのかという設定を行っていることになります。
これで実際にゲームを実行してみます。
ちゃんとUIが左下に表示されていますが、画面サイズを小さくしてみると、以下のようにUIが見切れてしまったり表示されなくなっているのがわかります。
これは、設定したアンカーポイントから離れた場所が、画面サイズ内に入りきらないために起きてしまっていて、このアンカーポイントの設定だとデバイスによってUIが表示されない場合が出てきてしまいます。
次に、アンカーポイントを画面の左下に設定してみます。
ここでは、画面の左下からどのくらい離れた場所なのかを設定していることになります。
実際にゲームを実行して画面サイズを小さくしてみると、常に左下にボタンが表示できているのがわかります。
このように、UI要素をどこに置きたいのかを決める際は、画面サイズが異なる場合でもUI表示されるように、アンカーポイントも適切に設定していく必要があります。
RectTransformの設定
ここからは、RectTransformの設定について紹介していきます。
Anchor Presets：アンカーポイントの置きたい場所をプリセットから指定
Anchor Presetsは、アンカーポイントの置きたい場所をあらかじめ決められているプリセットから選択することができます。
それぞれの画像の小さい黄色い●の部分が、UI表示領域のアンカーポイントの場所になっていて、横はleft(左)・center(真ん中)・right(右)、縦はtop(上)・middle(真ん中)・bottom(下)から組み合わせたポイントが準備されています。
例えば、真ん中のプリセットを選択すると、
アンカーの位置は真ん中に表示されます。
また、左上のプリセットを選択すると、
アンカーポイントも左上に設定されます。
また、stretchを選択すると、画面サイズの大きさに対して、UI要素の領域も可変するようにできます。
例えば、以下のように左右のアンカーポイントを設定した場合、
下のように画面サイズを変えると、UI要素の左右の長さが変動するようになります。
なお、Shiftキーを押しながら選択するとPivot(ピボット)の位置も一緒に変えることができ、Altキーを押しながら選択するとUI要素の位置も一緒に変更できます。
PosX,PosY：アンカーポイントから配置する座標を指定
PosX,PosYは、アンカーポイントを基準として、どこにそのUI要素を配置するかを決めている項目です。
例えば、PosXとPosYの値をそれぞれ0に設定した場合は、アンカーポイントと同じ位置にUI要素が配置されることになります。
(画像)
また、PosXを「100」、PosYを「-50」に設定したら、その数値分アンカーポイントから離れてUI要素が配置されます。
Width,Height：UI要素の大きさを指定
Width,Heightは、UI要素の大きさを設定する項目です。
WidthがそのUI要素の横幅、Heightは縦幅を表しています。
Left,Top,Right,Bottom：アンカーポイントからUIの領域を指定する
アンカーポイントをstretchなどで設定している場合は、Left,Top,Right,Bottomを使って画面サイズの大きさで可変するUI領域を左右上下で指定することができます。
例えば、アンカーポイントを四隅に置いていた場合に、Leftは左のアンカーポイントのラインからUI要素の左ラインまでの距離を表していて、その他も同様にrightは右、Topは上、Bottomは下からの距離を表しています。
それぞれの数値を変更することで、UI要素の位置と大きさが変更できるようになります。
Anchors：アンカーポイントの位置を設定できる項目
Anchorsは、アンカーポイントの位置を設定できる項目になっています。
このAnchorsには、MinとMaxの値を入れることができ、Minはアンカーポイントの左下の座標、Maxはアンカーポイントの右上の座標を指定することで、アンカーポイントを決めることができます。
また、UIの表示領域は左下座標を(0,0)、右上座標を(1,1)としていて、それぞれ0～1までの数値を入れることができます。
Pivot：UI要素の中心地点を設定する
Pivotは、UI要素の中心地点を設定している項目で、Rotationで回転させた際の中心軸になります。
UI要素の領域の左下座標を(0,0)、右上座標を(1,1)とした時に、どこを中心にするかを決めることができます。
例えば、Pivotの座標が(0.5,0.5)であれば、UI要素における真ん中が中心地点になります。
これを(0.2,0.2)に変更すると、Pivotの中心地点が変更されます。
Rotation：UI要素の回転を指定する
Rotationは、UI要素の回転を設定している項目です。
それぞれX軸、Y軸、Z軸における回転量を指定することができます。
例えば、Z軸に対して回転量を指定すると、以下のようにUI要素の向きが変わります。
Scale：UI要素の大きさを指定する
Scaleは、そのUI要素の大きさを指定することができる項目です。
XとYのそれぞれの方向に対して、1を基準値として拡大・縮小することができます。
Blueprint mode：RotationやScaleの変動を表示しない
Blueprint modeは、RotationやScaleの値を変更していたとしても、シーンビューでの画面上で変更されていない状態で編集を行うことができるモードです。
例えば、UIを回転させたり拡大縮小していると、以下のように変更されたサイズに合わせてシーンビュー上で表示されます。
この状態でBlueprint modeをオンにすると、変更されていない状態で編集できるようになります。
Raw edit mode：PivotとAnchorの位置を変更しない
Raw edit modeは、PivotとAnchorの値を変更させても、PivotやAnchor自体の位置が変動しないで、UIの位置を変えることができるモードです。
例えば、インスペクターウィンドウからPivotの数値を変える場合、通常はUIの位置は変わらずにPivotの位置だけが変わります。
Raw edit modeをオンにした場合は、Pivotの位置は変わらずにUIの位置が変わるように動かすことができます。
まとめ
このページでは、UnityでUI表示の際に使われるRectTransformコンポーネントについて、どういう仕組みなのか、使い方や設定方法までをまとめていきましたが、いかがでしたでしょうか？
RectTransformは、UIの表示領域内にUI要素を配置する場所を指定することができるコンポーネントです。
アンカーポイントを利用することで、画面サイズが変動してもUIを適切に表示することができます。
このアンカーポイントの設定は、UIを使う上で非常に重要な部分になってくるので、しっかりと覚えておきましょう。
最後までお読みいただきまして、ありがとうございました！
コメント