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