Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのRectTransformの使い方【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

 

f:id:hiyotama:20150504205926p:plain

 

ひよこエッセンスの時間です〜

Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜

今回はuGUIのRectTransformについてです〜

uGUIのRectTransformまとめ 

 

Unity5からuGUIという、画面に文字や画像、ボタン等を表示させる機能が追加されました〜今回はuGUIの位置や大きさを決定するRectTransformというコンポーネントについて説明致します〜

 

まずは開発画面のHierarchyビューから、Create>UI>Textを選択して下さい〜

 

f:id:hiyotama:20150505130519p:plain

Text選択

 

するとHierarchyビューにCanvas、Text、Event Systemというオブジェクトが作成されます〜

 

f:id:hiyotama:20150505130715p:plain

Text作成

 

それではInspectorビューにあるRectTransformを確認してみましょう〜

 

f:id:hiyotama:20150505140149p:plain

InspectorビューのRectTransform

 

①Anchor Presets

GUIの位置や大きさは、RectTransformコンポーネントによって調整します〜

まずはテキストの位置を決める基準となる位置(Anchor)を決定するところからはじめましょう〜「Anchors」の上にある四角い画像をクリックするとAnchor Presetsビューが表示されます〜

 

f:id:hiyotama:20150505131914p:plain

Anchor Presets

 

画面の左上にAnchorを設定したい時はtopとleftが交差する部分を、画面の中心にAnchorを設定したい時はmiddleとcenterが交差する部分をクリックします〜

 

f:id:hiyotama:20150505133202p:plain

画面左上にAnchor設定

 

f:id:hiyotama:20150505133213p:plain

画面右下にAnchor設定

 

ちなみにaltボタンを押しながらクリックすることにより、Anchorの設定だけでなくTextそのものの位置も移動させることができます〜

 

f:id:hiyotama:20150505133429p:plain

f:id:hiyotama:20150505133443p:plain

altを押しながらクリック

 

なぜAnchorを設定するのかというと、スマートフォンにアプリを書き出しした時に、端末のサイズによってGUIがズレて表示されることがありますが、テキストの位置はAnchorとの相対関係によって決まっているため、Anchorを適切に配置すればそのズレを最小限に抑えることができるというわけです〜

例えば左上にゲームのスコアを配置したい時、左上にAnchorを設定してAnchorとスコアTextとの距離を縮めておけば、端末のサイズが変わっても左上から大きくズレて表示されることはないということです〜

 

②Position 

RectTransformのPosX,PosYは、このAnchorを基準にしてテキストの位置を決めています〜例えばAnchorを画面中央に設定した状態でPosX:100,PosY:100にすると右上に

 

f:id:hiyotama:20150505134506p:plain

PosX:100 PosY:100

 

PosXを-100,PosYを-100に設定すると左下へテキストは移動します〜

 

f:id:hiyotama:20150505134612p:plain

PosX:-100 PosY:-100

 

③Width/Height

Width/Heightを調整し、テキストの大きさを決めます〜フォントサイズではない点に注意して下さい〜

 

f:id:hiyotama:20150505135718p:plain

Width:160 Height:40

 

f:id:hiyotama:20150505135727p:plain

WIdth:500 Height:300

 

ちなみに、フォントサイズを大きくした時にテキストが消えてしまうことがあるのですが、これはフォントサイズがこのテキストサイズを超えてしまうと、表示されないためです〜

 

画像はWidth160 Height:40の時FontSizeを100にした例です〜

 

f:id:hiyotama:20150505140632p:plain

消えた・・・

 

④Pivot

PivotはGUIを回転させたり、サイズを変更する時の基準点です〜ちなみに、開発画面がPivotモードの時しか変更できませんので注意です〜

 

f:id:hiyotama:20150505141805p:plain

Pivotモードに変更

 

f:id:hiyotama:20150505142200p:plain

Pivotを右上に設定し回転

 

⑤Rotation

GUIの角度を変更します〜基本的にはZに軸を変更して使うことになると思いますが、X軸やY軸も変えられます〜

 

f:id:hiyotama:20150505142503p:plain

Z軸45度

 

f:id:hiyotama:20150505142622p:plain f:id:hiyotama:20150505142631p:plain

X軸45度 Y軸45度

 

⑥Scale

ScaleはX軸とY軸を変更してGUIサイズを変更させます〜

Cube等のオブジェクトの大きさを変える時と同じ感じです〜

 

以上、ひよこエッセンスでした〜

ありがとうございました〜