読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

UnityのuGUIのレイアウト調整機能について解説してみる(RectTransform入門)

2D GUI(uGUI/NGUI/旧UI) ゲームの作り方・チュートリアル・サンプル エディタ拡張・エディタ機能 Unity

uGUIのレイアウトシステムの調整機能…の基礎であるRectTransformの調整についてについて解説します。今回はGUIで触れる範囲。

f:id:tsubaki_t1:20141219032115p:plain

目次

Pivot(中心点)の設定

まずuGUIのUIのレイアウト基準点となるpivot(ピボット)を指定します。これがuGUIのレイアウトの基本となります。

Pivotを動かす

pivotはボタンを選択した時の中心の◯です。基本的にこの◯を中心にUIの位置が決定します。pivotの位置はUIの大きさを正規化した値で、右上が(x:1, y:1)左下が(x:0, y:0)です。ちなみにUIからはエディタ右上の操作モードがpivotの時しか動かせません。

f:id:tsubaki_t1:20141219002658p:plain

f:id:tsubaki_t1:20141219004625p:plain

Pivotの挙動

UIの操作はpivotが中心となるため、例えばUIの回転や拡大・縮小を行った際もpivotの位置を中心に行われます。

例えばUIの大きさをRectTrasnfromWidthHeightで操作した場合、pivotの位置によっては以下のように挙動が変化します。これはUIの高さ・幅が未定の時や、UIの位置を中心点に置きたい場合等で有効です。

f:id:tsubaki_t1:20141219004305g:plain

Anchorの設定

レイアウトの基準点を求める上でもう一つ重要なのが、Anchor(アンカー)です。

アンカーとUIのサイズ

AnchorはUIの親のUIのサイズとの比率からUIのサイズや位置を調整する機能です。これは所謂9パッチと呼ばれる技術です。親UIの大きさを%で分割し、各マージンの大きさを求めます。

下の場合、UIの高さは親UIの49%程度、幅は71%程度を維持します。この各マージン0%にする事で、親UIのサイズと同じサイズを維持する事が出来ます。

f:id:tsubaki_t1:20141219011544p:plain

さらにAnchorで求めたマージンを元にUIのサイズを決定します。これは、Anchorからの相対距離で求めます。例えば下のような場合、マージンの上から46.5、右から152の距離を保ちます。

f:id:tsubaki_t1:20141219014741p:plain

画面サイズ(親サイズ)とアンカー

この状態で親UIのサイズが変化した場合、UIの距離を一律で保っているためUIのサイズがストレッチするように変化します。

f:id:tsubaki_t1:20141219031559g:plain

ストレッチしたくない場合、Anchorのxかyの位置をあわせる事で、RectTransformの表記がTop/DownまたはLeft/RightからPos Y/HeightもしくはPos X/Widthに変わり、UIの位置調整がAnchorとの相対距離幅/高さで指定する形に変化します。

f:id:tsubaki_t1:20141219014623p:plain

f:id:tsubaki_t1:20141219031632g:plain

これらの設定が面倒な場合、uGUIにはAnchorのプリセットが用意されています。具体的にはAnchorの基準点を左上や右上に設定や、幅ストレッチ・縦ストレッチ等を設定する事ができます。

f:id:tsubaki_t1:20141219015459p:plain

BluePrint ModeとRaw Edit Mode

このUIを操作する上で少し知っておくと便利なのが、BluePrintModeRawEditModeです。RectTransform右側にトグルボタンがあり、ここでON/OFFします。

f:id:tsubaki_t1:20141219021115p:plain

BluePrintMode

まずBluePrintModeですが、RectTransformScaleRotationとは関係なくWidthやHeight等のUIの位置情報を元にUIを操作出来るモードです。

例えばUIの回転を行った場合スプライト操作モードは縦横最大値で表示されますが、BluePrintModeにチェックを入れている場合、回転・拡縮されていないUIのサイズを表示します。これはUIが斜めになっている状態でUIのWidthやHeightを編集する際に便利です。

f:id:tsubaki_t1:20141219022520p:plain

f:id:tsubaki_t1:20141219022304p:plain

RawEditMode

RawEditModepivotAnchorの位置を操作した際に追随するかどうかの設定です。RawEditModeにチェックが入っている場合、InspectorビューからpivotAnchorを動かした際にpivotAnchorの位置を変えずにUIの位置やサイズだけを変更する事ができます。

f:id:tsubaki_t1:20141219024127g:plain

なお実は、SceneViewでAnchorを操作する場合は、別にRawEditModeがONになっていない状態でもShiftを押しながら操作すればUIの位置を調整する事ができます。実際のUI調整はこっちがメインになる気がします。

スクリプト側からレイアウトを操作する

uGUIをスクリプト側から操作する際、ちょっと面倒な点がEditorの表記とRectTransformのフィールドが一致しない点です。例えばPos X等のパラメータは存在しませんし、Width/Heightも存在しません。

そんな時はInspectorをDebugモードに変更してRectTransformの隠しているパラメータを晒します。これで大体パラメータが何を指しているのかが分かります。マニュアルも読むとなお良し。

f:id:tsubaki_t1:20141219025437p:plain

f:id:tsubaki_t1:20141219025458p:plain

ちなみに大体こんな感じです。

  • Width/Height : Size Delta
  • Pos X/Pos Y : Anchored PositionとPivotを計算したもの
  • Left/Right/Top/Bottom : Size DeltaとpositionとAncherd positionを計算したもの
  • Anchors : Anchor MinやAnchor Max
  • Scale : LocalScale
  • Rotation : LocalRotation

なおUIをランタイムに羅列したい場合、Component>Layout以下のコンポーネントを使うと色々と出来ます。その機能は癖があって使いにくいと思ったらスクリプトで調整という感じです。

UnityのuGUIでスクロールビューを作る - テラシュールブログ

参考

Rect Transform - Unity Official Tutorials - YouTube

UnityのuGUI入門してみた|とあるプログラマーのブログ

Android、今さら人に聞けない9パッチグラフィック | dotproof

GUI(uGUI/NGUI/旧UI) カテゴリーの記事一覧 - テラシュールブログ