UIを作ろう のバックアップ差分(No.5)

  • 追加された行はこの色です。
  • 削除された行はこの色です。
#contents
*はじめに [#k8bcc0ba]
[[アイテムの設置]]の続きになります。
ついに、このページでゲーム完成となります。
最後の工程はUI（User Interface）の追加です。
#br
*UIの設置 [#a7480bad]
#br
UIとは、プレイヤー（=User）とゲームとをつなぐ箇所（＝Interface）という意味で、
ここでは、その仕組みのことを指します。
マップやガイド、スコア表示、体力ゲージ、ボタン、メッセージなどがこれに当たります。
#br
このゲームでは、
 ・ゲームシーンでの現在のタイムスコア（経過時間）のテキスト
 ・スコアシーンでのリスタートボタン
 ・スコアシーンでの最終的なタイムスコアのテキスト
を作っていきます。
一つずつ実装していきましょう。
#br
**タイムスコア（ゲームシーン）の設置 [#i88cae95]
まずは、ゲームシーンでのタイムスコアのテキストを表示してみましょう。
#br
UIの設置はほかのGameObjectと同様にヒエラルキーを右クリックしてできます。
UI＞Textを選択して名前を「Timer」とします。
これで、ヒエラルキーに「Canvas」と「EventSytem」が追加されて、
「Canvas」の中に「Timer」という名前でテキストUIができます。
画面のどこかに（たぶん画面中央）に「NewText」と文字が出てきてるかと思います。
#br
「Canvas」とは、
「EventSystem」とは、
#br
まずは、テキスト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」という名前でスクリプトを追加します。
#br
#geshi(csharp,number){{
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //<=UI関連の名前空間

public class MoveSheep : MonoBehaviour
{
    private Text Text = null; //<=「Text」コンポーネントを定義

    // Start is called before the first frame update
    void Start()
    {
        Text = this.GetComponent<Text>(); //<=「Text」コンポーネントを取得
    }

    // Update is called once per frame
    void Update()
    {
        float totalTime = Time.time; //<=ゲーム開始からの経過時間
        Text.text = totalTime.ToString() //<=「Text」コンポーネントの「text」を変更
    }
}
}}
#br
名前空間として、「UnityEngine.UI」を追加しています。
「UnityEngine.UI」はUI関連を扱う名前空間で、UI関連の処理を行うときに使われます。
Update関数の中で出てきた「Time.time」というのは、ゲーム（シーン）開始からの時間を扱う変数です。
これを定義・取得した「Text」コンポーネントの「text」変数に代入することで、現在の経過時間を出力できます。
次に、出力のフォーマットを「○○:○○（分：秒）」形になるように改良してみます。
#geshi(csharp,number){{
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; 

public class MoveSheep : MonoBehaviour
{
//略
    void Update()
    {
        int minutes = (int)(time.time / 60); //「分」を取得
        int seconds = (int)(Time.time % 60); //「秒」を取得
        Text.text = minutes.ToString("D2") + ":" + seconds.ToString("D2"); // それぞれ１０進数２桁にして出力 
    }
}
}}
まず経過時間をまとめて「totalTime」で取得していたものを分と秒でそれぞれ分けて取得します。
分は総経過時間を60で割ったもの、秒は60で割った余りになるので、それを代入しましょう。
最後に、書式設定を"D2（D=>10進数表記、２=>2桁、足りない部分は0埋め）"に設定すれば完成です。
#br
**リスタートボタンの設置 [#yeaf90e8]
次は、リスタートボタンの設置をします。
「Score」シーンに移動します。（アセット>Scene>Scoreを押すとシーンが変わります）
まず「Score」シーンに移動します。（アセット>Scene>Scoreを押すとシーンが変わります）
真っ青な画面になって、ヒエラルキーを見てみるとカメラしかない状態になったと思います。
オブジェクトはシーンごとに管理されるので、別のシーンに移るとこれまで作成したオブジェクトはなくなります。
カメラはどのシーンにも作成時にデフォルトでできるのでカメラだけのシーンになったわけです。
そのため、これまで指定してきたカメラ、アスペクト比の設定等がこのシーンでは設定されていないことになってしまいます。
ということで、最初にシーンの各設定を行います。
カメラの

そうしたら、ボタンUIを追加します。
テキストUIと同様にヒエラルキーを右クリックして、UI>Buttonを押して名前を「Restart」とします。
Canvas>