おもちゃラボ

Unityで遊びを作っていきます

【Unity】これだけは覚えておきたいRectTransformの基本

UnityのUIを作るときに使うuGUIですが、このuGUIを動かしたいときに使う座標系ってちょっと分かりにくくないですか?uGUIの座標系についてはあやふやなまま使っているという方も多いかと思います。

そこで、ここではuGUIで座標を扱うときに、最低限押さえて置かなければいけないポイントをまとめておこうと思います。CanvasのRender Modeの設定はデフォルトの「Screen Space - Overlay」になっている前提で説明しますね。

RectTransformについて

UIで座標を指定するにはTransformではなくRectTransformを使用します。RectTransformのメンバには「position」と「anchoredPosition」の2種類が用意されています。

f:id:nn_hokuson:20210512072509p:plain

RectTransformを使うときは、この2つのメンバがあることを意識して、きちんと使い分けられるようになればOKです!

positionの場合

画面の解像度を1280x720に設定した場合、RectTransformのpositionを使った座標系では画面左下が(0,0)、右上が(1280, 720)になります。
f:id:nn_hokuson:20210511231403p:plain:w500

anchoredPositionの場合

一方、anchoredPositionを使った座標系では、インスペクタで設定したアンカーが原点になります。例えばアンカーをセンターに指定した場合、画面の座標は次のように-640 < x < 640、-360 < y < 360の範囲になります。

f:id:nn_hokuson:20210511231416p:plain:w500

インスペクタで座標を設定する

さて、ではインスペクタで設定する値はpositionとanchoredPositionのどちらでしょうか?(すぐに答えを言っちゃうんですけど)インスペクタに表示されている値はanchoredPositionになります!このあたりがあやふやだと混乱するので注意してください。

f:id:nn_hokuson:20210511232246p:plain

スクリプトから値を設定する

スクリプトからuGUIの座標を設定するには、ゲームオブジェクトにアタッチされているRectTransformコンポーネントを取得して、そのメンバであるpositionかanchoredPoistionに値を設定します。

// positionを使って設定する。
// この場合、positionに(0,0)を設定しているので画面左下に表示される
GetComponent<RectTransform>().position = Vector3.zero;

// anchoredPositionを使って設定する
// この場合、anchoredPositionに(0,0)を設定しているのでアンカーの位置に表示される
GetComponent<RectTransform>().anchoredPosition = Vector3.zero;

ワールド座標系をuGUIの座標系に変換する

ゲーム中のオブジェクトの上に、何かUIで情報を表示したい場合には「ワールド座標」→「スクリーン座標」の変換ができると便利です。この変換のため、UnityにはRectTransformUtility.WorldToScreenPointというメソッドが用意されています。

f:id:nn_hokuson:20210512143315p:plain:w550

使い方は次のとおりです。WorldToScreenPointの戻り値はRectTransformのpositionに代入します。anchoredPositionではないので注意しましょう。

//Utility.WorldToScreenPointを使って座標変換をする
GetComponent<RectTransform>().position 
= RectTransformUtility.WorldToScreenPoint (Camera.main, player.transform.position);

DOTweenを使ってuGUIの要素を動かす

DoMoveメソッドの場合

DOTweenを使ってuGUIのオブジェクトを動かすとき、DoMoveメソッドを使うと、positionを使った座標系(左下が原点)でオブジェクトが移動します。

次の例ではimgは画面左下に移動します。

img.transform.DoMove(Vector3.zero, 1.0f);

f:id:nn_hokuson:20211006062152p:plain:w300

DOAnchorPosメソッドの場合

一方、RectTransformコンポーネントのDOAnchorPosメソッドを使うとanchoredPositionの座標系でオブジェクトを移動できます。

次の例ではimgはアンカーの場所に移動します。

img.GetComponent<RectTransform>().DOAnchorPos(Vector3.zero, 1.0f);

f:id:nn_hokuson:20211006062231p:plain:w300

まとめ

uGUIの座標系にはpositionとanchoredPositionがあります。positionは画面左下が原点になり、anchoredPositionはインスペクタで設定したアンカーが原点になります。