UIを作ろう のバックアップ(No.3)

はじめに

アイテムの設置の続きになります。
ついに、このページでゲーム完成となります。
最後の工程はUI（User Interface）の追加です。

 

UIの設置

 

UIとは、プレイヤー（=User）とゲームとをつなぐ箇所（＝Interface）という意味で、
ここでは、その仕組みのことを指します。
マップやガイド、スコア表示、体力ゲージ、ボタン、メッセージなどがこれに当たります。

 

このゲームでは、

・ゲームシーンでの現在のタイムスコア（経過時間）のテキスト
・スコアシーンでの最終的なタイムスコアのテキスト
・スコアシーンでのコンテニューボタン

を作っていきます。
一つずつ実装していきましょう。

 

タイムスコア（ゲームシーン）

まずは、ゲームシーンでのタイムスコアのテキストを表示してみましょう。

 

UIの設置はほかのGameObjectと同様にヒエラルキーを右クリックしてできます。
UI＞Textを選択して名前を「Timer」とします。
これで、ヒエラルキーに「Canvas」と「EventSytem」が追加されて、
「Canvas」の中に「Timer」という名前でテキストUIができます。
画面のどこかに（たぶん画面中央）に「NewText」と文字が出てきてるかと思います。

 

「Canvas」とは、
「EventSystem」とは、

 

まずは、テキストUIの大きさや位置を調整します。
現在、このゲームのカメラは解像度が未固定で、ゲームのウィンドウの大きさに自動で調整されるようになっています。
しかし、キャンバスの初期状態では、UIはpixel固定であるためゲーム画面の大きさで表記に乱れが出てしまいます。
そこで、「Canvas」のインスペクタからCanvasScaler>UIScaleMode>ScaleWithScreensizeに設定を変更してあげることで、
カメラと同じようにウィンドウサイズに合わせてUIの大きさが変わるようにできます。
そして、「Timer」のインスペクタのRestTranformから（posX,posY,Width,height）、Textから（FontSize,Paragraph>Aligment）を変更します。
それぞれ「キャンパスに対する相対位置(x座標、y座標)」「UIの幅、高さ」「文字の大きさとUI内の位置」に当たります。
見やすい位置、大きさになるように調整してみましょう。（左から-60,-30,120,60,40,縦横中央揃えがキレイかも？)

次に、経過時間を出力する機能をスクリプトで書いていきます。
「Text」のインスペクタからAddCompornent>NewScriptを押して「Timer」という名前でスクリプトを追加します。

 
  1. using System.Collections;

  2. using System.Collections.Generic;

  3. using UnityEngine;

  4. using UnityEngine.UI; // UI関連の名前空間

  5.  

  6. public class Timer : MonoBehaviour

  7. {

  8.     private Text Text = null; // 「Text」コンポーネントを定義

  9.  

  10.     // Start is called before the first frame update

  11.     void Start()

  12.     {

  13.         Text = this.GetComponent<Text>(); // 「Text」コンポーネントを取得

  14.     }

  15.  

  16.     // Update is called once per frame

  17.     void Update()

  18.     {

  19.         float totalTime = Time.time; // ゲーム開始からの経過時間

  20.         Text.text = totalTime.ToString() // 「Text」コンポーネントの「text」を変更

  21.     }

  22. }
 

まず名前空間として、「UnityEngine.UI」を追加します。
「UnityEngine.UI」はUI関連を扱う名前空間で、UI関連の処理を行うときに使われます。
次に「Text」コンポーネントの定義・取得をして、
Update関数の中で、

  1. using System.Collections;

  2. using System.Collections.Generic;

  3. using UnityEngine;

  4. using UnityEngine.UI; 

  5.  

  6. public class Timer : MonoBehaviour

  7. {

  8. //略

  9.     void Update()

  10.     {

  11.         int minutes = (int)(time.time / 60); //「分」を取得

  12.         int seconds = (int)(Time.time % 60); //「秒」を取得

  13.         Text.text = minutes.ToString("D2") + ":" + seconds.ToString("D2"); // それぞれ１０進数２桁にして出力 

  14.     }

  15. }