トランスフォームツールを使った操作
これまでの3DオブジェクトのようにUIエレメントもトランスフォームツールを使って操作することができます。3Dオブジェクトの場合トランスフォームツールには移動、回転、スケールがありましたが、UIエレメントでも同様に使用することができます。
移動
![トランスフォームツール(移動)](./ImagesRectTool/RectTool-5984.png)
![トランスフォームツール(移動)](./ImagesRectTool/RectTool-5986.png)
回転
![トランスフォームツール(回転)](./ImagesRectTool/RectTool-6014.png)
![トランスフォームツール(回転)](./ImagesRectTool/RectTool-6016.png)
スケール
![トランスフォームツール(スケール)](./ImagesRectTool/RectTool-6043.png)
![トランスフォームツール(スケール)](./ImagesRectTool/RectTool-6044.png)
3Dオブジェクトと同様に位置、回転、スケールは子のUIエレメントに継承されます。親のUIエレメントを移動させれば一緒に子エレメントは追従してきますし、親のUIエレメントを回転させれば子のUIエレメントも一緒に回転します。
Rect ツール
Transformツールの横にRectツールがあります。これはUIエレメントの移動、回転、大きさ(サイズ)の調整に特化したツールです。
![Rectツール](./ImagesRectTool/RectTool-6256.png)
Rectツールを押してUIエレメントを選択してください。選択されたUIエレメントは以下のようなハンドルが表示されます。
![Rectツールのハンドル](./ImagesRectTool/RectTool-6330.png)
移動
UIエレメントをRectツールで移動させるときはUIエレメントをドラッグして目的までカーソルを移動させます。![ドラッグで移動](./ImagesRectTool/RectTool-6407.png)
![Inspector操作で移動](./ImagesRectTool/RectTool-6499.png)
サイズ
大きさ(サイズ)を調整する場合、UIエレメントの辺の部分や角の部分をドラッグしてカーソルを動かして調整します。![Rectツール・リサイズ](./ImagesRectTool/RectTool-6592.png)
InspectorからRect TransformコンポーネントのWidth、Height(場合によってはTop,Bottom,Left,Right)プロパティで直接指定することもできます。
回転
UIエレメントを回転させる場合は角の部分より少し離れた場所をドラッグしてください。回転のためにドラッグする場所にカーソルがくるとカーソルが以下のように変化します。
![回転カーソル](./ImagesRectTool/RectTool-6866.png)
ドラッグしたらカーソルを動かして回転を調整します。
![Rectツールによる回転](./ImagesRectTool/RectTool-6905.png)
回転はInspectorからRect TransformコンポーネントのRotationプロパティで直接指定することもできます。
LocalとGlobalトグル
ギズモ表示トグルがLocalの場合、UIエレメントを回転させるとUIエレメントのハンドルも一緒に回転します。ギズモ表示トグルがGlobalの場合はUIエレメント全体を含む大きさで必ずX軸Y軸にそったハンドルが表示されます。UIエレメント回転後にグローバル座標のX軸、Y軸に沿ったリサイズを行いたいときにGlobalは便利です。
![ローカル](./ImagesRectTool/RectTool-7173.png)
![グローバル](./ImagesRectTool/RectTool-7185.png)
ピボット(pivot)
UIエレメントの回転(および位置)の中心を変更するときはピボットを移動させます。ピボットはドーナツ型のギズモ(
)として表示されています。これをドラッグして移動させるとその場所にUIエレメント回転中心も移動します。
![ピボットを左端へ移動](./ImagesRectTool/RectTool-7327.png)
![ピボットを中心に回転する](./ImagesRectTool/RectTool-7343.png)
Inspectorで直接設定する場合は位置をUIエレメントの左下を(0,0)、右上を(1,1)として割合で設定します。たとえば(0, 0.5)は左端中央になります。
![Inspector操作でピボットを左端中央に移動](./ImagesRectTool/RectTool-7445.png)
アンカー(Anchor)
アンカーは以下の図のようなハンドルとして表示されます。アンカーは4つの三角形として表示されますが一点に集めておくこともできますし、開くこともできます。
![アンカー(シングルポイント)](./ImagesRectTool/RectTool-7572.png)
![アンカー(開いた状態)](./ImagesRectTool/RectTool-7592.png)
アンカーはドラッグで移動させることができます。また、四つある三角形のどれかをドラッグして開閉することができます。
アンカーの位置は親UIエレメントの左右、上下の割合で紐づけられています。親UIエレメントのサイズを変更することで子UIエレメントのアンカー位置が割合を保持するように変更されます。
UIエレメントの角の位置はアンカーの四つの位置との距離を保つように移動されます。これを利用してUIエレメントを親UIエレメントに対して固定させたり、大きさを親UIエレメントに合わせて伸縮させたりすることができます。 UIエレメントのアンカーをそれぞれをCanvasにひもづけておけば様々な画面サイズに対応することができます。たとえば常にゲーム画面の左端に表示されるUIを作ることができます。
![アンカーとUIエレメントの角の関係](./ImagesRectTool/RectTool-7960.png)
![親UIエレメントをリサイズしたとき](./ImagesRectTool/RectTool-7998.png)
アンカーを開いた状態にするとこれまでPosX,PosY,PosZ,Width、Heightで表示されていたUIエレメントの位置とサイズがTop,Bottom,Left,Rightのように変わります。 これは、UIエレメントの角からのみた各アンカーの相対位置です。アンカーがUIエレメントの内側に入るとマイナス、外側に出るとプラスになります。
アンカーの使用例
アンカーの代表的な使用例を紹介します。
左端にUIを固定
![左端に固定](./ImagesRectTool/RectTool-8235.png)
![左端に固定して親UIをリサイズしたとき](./ImagesRectTool/RectTool-8246.png)
上端にUIを固定
![上端に固定](./ImagesRectTool/RectTool-8278.png)
![上端に固定して親UIをリサイズしたとき](./ImagesRectTool/RectTool-8289.png)
左上にUIを固定
![左上に固定](./ImagesRectTool/RectTool-8322.png)
![左上に固定して親UIをリサイズしたとき](./ImagesRectTool/RectTool-8333.png)
親UIエレメントに合わせて伸縮(端までの距離は保持)
![親UIエレメントの合わせて伸縮(端までの距離は保持)](./ImagesRectTool/RectTool-8389.png)
![親UIエレメントの合わせて伸縮(端までの距離は保持)して親UIをリサイズしたとき](./ImagesRectTool/RectTool-8422.png)
親UIエレメントの合わせて伸縮(端までの距離も伸縮)
![親UIエレメントの合わせて伸縮(端までの距離も伸縮)](./ImagesRectTool/RectTool-8496.png)
![親UIエレメントの合わせて伸縮(端までの距離も伸縮)して親UIをリサイズしたとき](./ImagesRectTool/RectTool-8528.png)
プレビュー
親UIエレメントのサイズが変更されたときアンカーがどのように働くかを確認するため親UIエレメントのエッジをつかんでサイズ操作することができます。実際に親UIエレメントの大きさが変更されるわけではなく操作をやめると親エレメントは元の状態に戻ります。
![親UIエレメントのエッジをつかんでプレビュー](./ImagesRectTool/RectTool-8708.png)
プリセット
アンカーの配置はInspectorビューのRect Transformコンポーネントにあるプリセットボタンを押すとプリセットが表示されその中から選択することができます。このプリセットには中央、右端、下端に固定など良く使うシングルアンカーポイントの設定や伸縮用の設定があります。
![アンカーのプリセットウインドウ](./ImagesRectTool/RectTool-8884.png)
![アンカーのプリセットウインドウ](./ImagesRectTool/RectTool-8890.png)
シフトキーを押しながらプリセットを選択するとピボットもアンカーと一緒に変更されます。またAltキーを押しながらプリセットを選択するとアンカーと一緒に位置も変更されます。ピボットやUIエレメントの位置を中央に戻すときになどに便利です。
サイズとスケールの違い
UIエレメントのサイズ(WidthやHeight)とスケールは違うことに気を付けましょう。どちらも見た目の大きさを変更することができますがサイズはUIエレメント自体の大きさでスケールは倍率です。UIエレメントのWidthやHeightを変更しても子のUIエレメントには影響しません(アンカーを除く)しボタンUIなどの角の丸みも同じです。しかしスケールを変更すると子のUIエレメントにもスケールが適用されます。たとえば、ボタンのサイズ(width,height)を大きくしてもボタンの中のラベルのフォントサイズは変わりませんが、ボタンのスケールを大きくするとボタンの中のフォントも大きくなります。また、サイズは負数はとれませんが、スケールは負数を設定することで反転表示させることができます。
![サイズを変更したとき](./ImagesRectTool/RectTool-9351.png)
![スケールを変更したとき](./ImagesRectTool/RectTool-9367.png)
ブループリントモードとRawモード
Rect Transformコンポーネントには二つの操作モードがオプションであります。 Rect TransformコンポーネントにあるブループリントモードボタンとRawモードボタンを押すことでその操作モードに切り替わります。
![ブループリントとRawモードボタン](./ImagesRectTool/RectTool-9520.png)
ブループリントモード
ブループリントモードはUIエレメントに回転とスケールがかかっていない元の状態(つまり回転が(0,0,0)でスケールが(1,1,1)の状態)を示して、元の状態を操作することができます。ちょっとわかりずらいと思いますが、回転やスケールがかかった状態ではリサイズの際に不便なことがあります。ボタンの幅をちょっと大きくしたいなど回転がかかっていたらやりずらいですよね(Inspector使えばいいのに)。そこで、ブループリントモードにすると元の状態のハンドルを表示して操作することができます。 このモードではRectツールのハンドルで回転操作を行うことはできません。
![ブループリントモード](./ImagesRectTool/RectTool-9689.png)
![ブループリントモード](./ImagesRectTool/RectTool-9692.png)
Rawモード
通常Inspectorでピボットやアンカーを操作した際はUIエレメントの見た目は変わらずピボットやアンカーの位置などが変更されます。これはピボットやアンカーの操作に合わせてUIエレメントの位置やサイズを見た目を変えないように補正しているからです。Rawモードではこの補正を無効にします。RawモードではInspectorでピボットを移動させた際はピボットは動かずUIエレメントが移動していきます。またアンカーをInspectorで動かした場合はアンカーに追従してUIエレメントの角が移動します。なおSceneビューでRectツールを使ってピボットやアンカーを操作した場合はRawモードは通常モードと変わりません。RawモードはInspectorでの操作のみ影響します。
![Rawモードでピボットを移動するとUIエレメントのほうが動く](./ImagesRectTool/RectTool-10054.png)
![Rawモードでピボットを移動するとUIエレメントのほうが動く](./ImagesRectTool/RectTool-10062.png)