UIの位置、回転、スケール、大きさ(サイズ)の調整方法とアンカーを説明します。これまでの3DオブジェクトのようにUIエレメントもトランスフォームツールを使って操作することができます。3Dオブジェクトの場合トランスフォームツールには移動、回転、スケールがありましたが、UIエレメントでも同様に使用することができます。3Dオブジェクトと同様に位置、回転、スケールは子のUIエレメントに継承されます。親のUIエレメントを移動させれば一緒に子エレメントは追従してきますし、親のUIエレメントを回転させれば子のUIエレメントも一緒に回転します。ツールTransformツールの横にRectツールがあります。これはUIエレメントの移動、回転、大きさ(サイズ)の調整に特化したツールです。Rectツールを押してUIエレメントを選択してください。選択されたUIエレメントは以下のようなハンドルが表示されます。移動UIエレメントをRectツールで移動させるときはUIエレメントをドラッグして目的までカーソルを移動させます。TransformコンポーネントのPosX,PosY,PosZプロパティを直接指定することもできます。サイズ大きさ(サイズ)を調整する場合、UIエレメントの辺の部分や角の部分をドラッグしてカーソルを動かして調整します。シフトキーを押しながらサイズ操作をすると縦横を同じ比率で調整できます。縦長や横長にしたくない場合はこの方法を使用してください。TransformコンポーネントのWidth、Height(場合によってはTop,Bottom,Left,Right)プロパティで直接指定することもできます。回転UIエレメントを回転させる場合は角の部分より少し離れた場所をドラッグしてください。回転のためにドラッグする場所にカーソルがくるとカーソルが以下のように変化します。ドラッグしたらカーソルを動かして回転を調整します。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.5)は左端中央になります。アンカー(Anchor)アンカーは以下の図のようなハンドルとして表示されます。アンカーは4つの三角形として表示されますが一点に集めておくこともできますし、開くこともできます。アンカーはドラッグで移動させることができます。四つある三角形のどれかをドラッグして開閉することができます。アンカーの位置は親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エレメントの大きさが変更されるわけではなく操作をやめると親エレメントは元の状態に戻ります。Transformコンポーネントにあるプリセットボタンを押すとプリセットが表示されその中から選択することができます。このプリセットには中央、右端、下端に固定など良く使うシングルアンカーポイントの設定や伸縮用の設定があります。シフトキーを押しながらプリセットを選択するとピボットもアンカーと一緒に変更されます。Altキーを押しながらプリセットを選択するとアンカーと一緒に位置も変更されます。ピボットやUIエレメントの位置を中央に戻すときになどに便利です。サイズとスケールの違いUIエレメントのサイズ(WidthやHeight)とスケールは違うことに気を付けましょう。どちらも見た目の大きさを変更することができますがサイズはUIエレメント自体の大きさでスケールは倍率です。UIエレメントのWidthやHeightを変更しても子のUIエレメントには影響しません(アンカーを除く)しボタンUIなどの角の丸みも同じです。スケールを変更すると子のUIエレメントにもスケールが適用されます。ボタンのサイズ(width,height)を大きくしてもボタンの中のラベルのフォントサイズは変わりませんが、ボタンのスケールを大きくするとボタンの中のフォントも大きくなります。サイズは負数はとれませんが、スケールは負数を設定することで反転表示させることができます。Transformコンポーネントには二つの操作モードがオプションであります。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での操作のみ影響します。