RectTransformについてのメモ

RectTransformについてのメモ

RectTransform

positionについて

RectTransfrom.position

Canvasの左下を原点とするワールド座標の位置。アンカーの場所に依存しない。Vector3を返す。

RectTransfrom.localPosition

親の中心を原点とする座標系の位置。 アンカーの場所に依存しない。 Vector3を返す。

RectTransfrom.anchoredPosition

UIのアンカーを中心とする座標系の位置。 Vector2を返す。

それぞれの関係

Cavas直下に配置されたUI要素について以下の関係が成り立ちます。

Pivot

 Pivotの位置がUI要素の中心となる。Pivotを0とすると、UI要素の左下が中心となる。

アンカーについて

 アンカーの場所は親になっているUI要素に依存します。 例えば、子となっているUI要素のアンカーの数値を全て0.5とした場合は親のUI要素の中心にアンカーが配置されます。また、アンカーの数値を全て0とした場合は下図のように親要素の左下にアンカーが配置されます。

World座標をUI座標へ変換

 オブジェクトの座標をUI座標へ変換します。つまり、オブジェクトにUIが追従するようになります。

Screen Space – Overlayの場合

 CanvasのRenderModeがScreen Space – Overlayに設定してある場合は以下のScriptにより変換できます。

rectUIは追従させたいUI要素のRectTranformであり、trfTargetはオブジェクトのTransformです。オブジェクトのワールド座標をスクリーン座標へ変換し、そのままUI要素のpositionに渡すだけです。追従させたいUI要素に親オブジェクト等があった場合でも問題なく追従してくれます。

UI要素がCanvas直下にある場合はanchoredPosition使用した以下のScriptでも可能です。

Screen Space – Cameraの場合

CanvasのRenderModeがScreen Space – Cameraに設定してある場合は以下のScriptにより変換できます。

オブジェクトのワールド座標をスクリーン座標へ変換し、このスクリーン座標をRectTransformUtility.ScreenPointToLocalPointInRectangleに渡すことでUI要素のローカル座標(pos)が得られます。この座標をUI要素のlocalPositionへ渡すことでオブジェクトにUIが追従するようになります。また、 追従させたいUI要素に親オブジェクト等があった場合でも問題なく追従してくれます。

UI要素がCanvas直下にある場合は、Screen Space – Overlayのときと同様のanchoredPosition使用した以下のScriptでも可能です。