【Unity】UIの基本(Canvas,描画順,アンカー,ピボット)を徹底解説してみる

右上の「create」からUIを選択し「text」などとすることでUI要素を作ることができます。
すると同時にCanvasとEventSystemというものができると思います。
UIは全てCanvasの子要素として作られます。

なお、すでにUI要素を作成しているときはすでにできているcanvasのなかにUIが作られ、EventSystemは作られません。
eventsystemとはボタンのクリックなどのイベントを感知するためのものです。間違って消さないようにしましょう。

デフォルトではUIの描画モードはScreen Space-Overlayになっています。
これはキャンバスの位置にかかわらずキャンバスが画面いっぱいに移されるというものです。

f:id:turedureengineer:20190203020639p:plain

上の画像を見るとわかる通り、UIであるテキストとcubeの大きさはシーン上では全く違いますが、ゲーム画面では同じように見えます。

イメージとしてはUI以外のものを写すものと、UIだけを常に画面いっぱいに写すカメラが二つあって、その二つの映像をゲーム画面では足し合わせて見ている感じです。

描画の順番はヒエラルキー上で上にあるものほど奥に描画されます。
下にあるものほど手前にきます。

描画の順番を変えたい場合、zの値を変えることで実現できます。
手前に描画したい場合、zの値をマイナスの値にすればいいのです。

これによりゲーム画面で見たときの大きさが変わることはないので安心してください。

以前こちらの記事でも言ったように子要素のTransformはローカル座標(親要素との相対座標)を表します。

UI要素はTransformではなくRectTransformがついています。
しかしRectTransform自体がTransformを継承したものなので大きくは変わりません。

大きな違いとしてアンカーとピボットの存在があるのでそれについて詳しく見ていきましょう。

違いとしてはアンカーの存在があります。
アンカーは錨という意味がありますがまさしくUIを止めておくために必要なものです。

RectTransformの左にある十字の的のような所をクリックすると以下のような画面が見えます。

f:id:turedureengineer:20190203020909p:plain

デフォルトでは真ん中のものになっています。

これは親要素のど真ん中(縦方向の真ん中かつ横方向の真ん中)を基準とすることを意味します。
図を見てわかると思いますが真ん中にある10このものはそれぞれ親要素のどこを基準とするかということを示しています。

アンカーはシーン上ではこう見えます。
f:id:turedureengineer:20190203021352j:plain

ここを直接動かす書くこともできますが、さっきのようによく使うアンカーの位置はすでに用意されているので直接動かすことはあまりないでしょう。

アンカーの所をクリックしてシーン場で見えるアンカーがどのように変わっていくか一度見てみるとよくわかると思います。

アンカーの下にピボットがあると思います。

これは自分自身の基準のことです。
例えばピボットがx＝0,y=1となっていたら自分自身の左上が基準んということです。
x＝0.5,y=0なら底辺の真ん中が自分の基準となります。

Canvas直下にtextがあってそのrectransftomがこの写真のようになっているとします。
f:id:turedureengineer:20190203021807j:plain

まず親の基準がアンカーを見て上辺の真ん中ということがわかります。
そしてピボットを見ることで自分自身の基準がわかり、自分自身のど真ん中(縦も横も真ん中)だとわかります。

つまりこれは自分の中心を親オブジェクトであるcanvasの上辺の真ん中から下に433.5下に行ったところにするという意味です。

UI特にrecttransformのアンんかーやピボットは最初は違いなどがわかりにくいと思います。
このブログを参考にして頑張ってみてください！

徒然エンジニアブログ