二代目備忘録

適当に勉強した事を忘れないように講座風に書き留めたりするブログ。

Unity備忘録16頁目「UIの作成1」

江上宿六です。

 

UIと言っても場所や状況によって変わってくるのですが、ゲーム等の場合は

メニューやらコマンドの表示みたいな事や、スコアやライフの表示とかそういう

ものを指したりするものだと思います。 最近は後者をHUDとも言いますかね。

まぁ、そういうのを作っていく事になります。

 

Unityにはあらかじめこういうのを作るためのものが用意されています。

早速作っていきましょう。 ヒエラルキーのCreateからUI→Textと選択します。

f:id:y6yegami:20180720131208p:plain f:id:y6yegami:20180720131215p:plain

何か線が表示されたと思いますが、これは線ではなくキャンバスなんです。

画面を引いてみるといかに大きいかが分かります。 ヒエラルキーCanvas

このキャンバスで、その中にあるTextがUIとして表示されるTextです。

地味にシーンビューの角度が変わりました、今までのが変でしたね。

 

こういうサイズになると普通に拡大縮小してオブジェクトを確認するのも

大変です。 こういう時はヒエラルキーのオブジェクト名をダブルクリックすると

そのオブジェクトに注視してくれるので行き来が簡単になります。

とりあえずゲームビューを見てみましょう。

f:id:y6yegami:20180720132940p:plain

画面やや左下にNewTextという文字があります。 これが先ほどのTextです。

位置関係を見ると先ほどのキャンバスと連動している感じなのが分かります。

このTextの位置や文字を編集することでUIを作っていくというわけです。

では選択してインスペクターを見てみましょう。

f:id:y6yegami:20180720134118p:plain

色々と要素がありますが、左上の四角い所を見てみましょう。 これを

クリックするとアンカーを置く位置のプリセットが表示されます。

f:id:y6yegami:20180720134902p:plainf:id:y6yegami:20180720135327p:plain

アンカーというのは、今回で言えばTextが配置される原点の事でデフォルトでは

キャンバス中央になっていますが、上下左右それぞれ設定する事ができます。

使わなくても問題無いとは言え、使った方が便利だと思います。 今回は

右上に配置したいので右上の所を選択します。

 

すると画面上は変わってないのにインスペクターのPosX、PosYが変化しました。

どういう事かというと、これは単にアンカーからの位置を表しているからです。

f:id:y6yegami:20180720135735p:plain

(0,0,0)にするとこんな感じです。サイズ的に丁度見えない感じです。今回は

ゲームビューを見ながらPlaneの右上辺りに配置しました。

 

WidthとHeightはこのテキストの表示されるフィールドのサイズです。

テキストがこのサイズを超えてしまうと(設定次第では)表示されなくなるので

注意が必要です。 その他Rotation、Scaleとありますが、回転と拡縮です。

 

では次にその下の所を見てみましょう。

f:id:y6yegami:20180720140653p:plain

だいたい説明がなくても分かる感じではないでしょうか。

Textが表示する中身で、フォントやフォントサイズ、行間の幅も設定出来ます。

Paragraphの方は左揃えだとかそういうのを変えたり出来ます。

 

HorizontalOverflow、VerticalOverflowが先ほど言ったテキストがフィールドを

超えた時の処理ですかね。 Horizontalの方は横方向にを超えた時の処理で

Wrapで折り返し、Overflowで突き抜けます。 Verticalの方は縦方向ですね。

Truncateで表示がされなくなり、Overflowで突き抜けます。 BestFitにチェックを

入れるとピッタリ収まるようになりますが、好ましい方法とは思えませんね。

 

その他、色とかマテリアルをセットする事も出来ます。 見ての通りです。

f:id:y6yegami:20180720142832p:plain

まぁ、今回はこのように画面上部にフロアとスコアを用意しました。

スコアはともかくフロアなんですが、SphereがPlaneに一定個数乗っている時に

Planeが下降していき、一定の高さまで落ちたらゲームオーバーになると言う

ルールをなんとなく思いついたので、その為の数値を表示する所です。

が、少し別の表示方法を思いついたので次回以降唐突に変わると思います。

 

今回はここまでです。 なんかあまり必要無いかもしれない所まで説明したので

長くなってしまいました。 回跨ぎは想定内です。