時間制限機能の実装【Unity・備忘録】

今回は、ヴァンサバ系ゲームで良くある、タイマーとカウントダウンバー、そして時間切れでゲーム終了の機能を実装していきます。

【関連記事】

2DゲームでHPバーを実装【Unity・備忘録】

2DゲームでHPバーを実装する備忘録です。

時間制限機能の実装

手順:

1. UIの作成

タイマー用テキスト:
- Hierarchy ウィンドウで Canvas を右クリック -> 「UI」-> 「Text – TextMeshPro」を選択します。
- 作成されたオブジェクトの名前を TimerText に変更します。
- Rect Transform と TextMeshPro - Text (UI) コンポーネントを、見やすい位置、フォントサイズ、色などに調整します。
カウントダウンバー用イメージ:
- Hierarchy ウィンドウで Canvas を右クリック -> 「UI」-> 「Image」を選択します。
- 作成されたオブジェクトの名前を TimeBarBackground に変更します。
- Rect Transform と Image コンポーネントを、見やすい位置、サイズ、色などに調整します。
- 必要に応じて、Projectウィンドウから画像をSource Imageに関連付け、色を調整します。
- Hierarchy ウィンドウで TimeBarBackground を右クリック -> 「UI」-> 「Image」を選択します。
- 作成されたオブジェクトの名前を TimeBarFill に変更します。
- TimeBarFill を選択し、Inspector ウィンドウで以下のように設定します。
  - Rect Transform コンポーネント:
    - Anchors: 左右に広げる (Min: X=0, Y=0, Max: X=1, Y=1)
    - Pivot: 左に設定 (X=0, Y=0.5)
    - Pos X, Pos Y: 0 に設定
    - Left, Right: 0に設定
    - Top, Bottom: 0に設定
    - Width: TimeBarBackground と同じ幅に設定
    - Height: TimeBarBackground と同じ高さに設定
  - Image コンポーネント:
    - Source Image: 無し（デフォルトのままでOK）もしくは、ProjectウィンドウのAssetsを右クリック、CreateからSpritesからSquareを選択。Source Imageにドラッグ&ドロップ
    - Color: バーの色を調整 (例: 緑色)
  - TimeBarFillを右クリックして、UIからText-TextMeshProを選択し、名前をTimeTextに変更します。以下の設定とします。
    - Anchors: 中央に設定 (Min: X=0.5, Y=0.5, Max: X=0.5, Y=0.5)
    - Pivot: 中央に設定 (X=0.5, Y=0.5)
    - Pos X, Pos Y: 0 に設定 (背景画像の中心に配置)
    - Width, Height: テキストを表示するのに十分なサイズに設定 (例: Width=200, Height=50)
    - TextMeshPro - Text (UI) コンポーネント:
      - Text: 初期値を入力 (例: “60”)
      - Font Size: 適切なサイズに調整 (例: 24)
      - Alignment: 中央揃え
      - Color: 見やすい色に設定 (例: 黒)

2. タイマー制御スクリプトの作成

Scripts フォルダ内に、TimerController.cs という名前の新しい C# スクリプトを作成します。
以下のコードを TimerController.cs に記述します。

using UnityEngine;
using UnityEngine.UI;
using TMPro;
using UnityEngine.SceneManagement;

public class TimerController : MonoBehaviour
{
    public float timeLimit = 60f; // 制限時間（秒）
    public TextMeshProUGUI timerText; // タイマー表示用テキスト
    public Image timeBarFill; // カウントダウンバーのゲージ部分
    public TextMeshProUGUI timeBarText;

    private float currentTime;
    private float startingWidth;

    void Start()
    {
        currentTime = timeLimit;
        startingWidth = timeBarFill.rectTransform.sizeDelta.x;
        UpdateTimeDisplay();
    }

    void Update()
    {
        if (currentTime > 0)
        {
            currentTime -= Time.deltaTime;
            UpdateTimeDisplay();

            // カウントダウンバーを更新
            float timePercentage = currentTime / timeLimit;
            timeBarFill.rectTransform.sizeDelta = new Vector2(startingWidth * timePercentage, timeBarFill.rectTransform.sizeDelta.y);
        }
        else
        {
            // ゲーム終了処理
            GameOver();
        }
    }

    void UpdateTimeDisplay()
    {
        int minutes = Mathf.FloorToInt(currentTime / 60);
        int seconds = Mathf.FloorToInt(currentTime % 60);
        timerText.text = string.Format("{0:00}:{1:00}", minutes, seconds);
        timeBarText.text = string.Format("{0:00}:{1:00}", minutes, seconds);
    }

    void GameOver()
    {
        // ここにゲーム終了時の処理を記述（例：リザルト画面の表示など）
        Debug.Log("Time's up! Game Over!");
        SceneManager.LoadScene("GameOver"); // 仮に、GameOverというシーンに遷移
    }
}

コード解説:

timeLimit: 制限時間を設定します (秒単位)。Inspector ウィンドウで調整できます。
timerText: タイマーの残り時間を表示する TextMeshProUGUI オブジェクトを格納します。
timeBarFill: カウントダウンバーのゲージ部分の Image オブジェクトを格納します。
currentTime: 現在の残り時間を格納します。
startingWidth: カウントダウンバーの開始時の幅を格納します。
Start():
- currentTime を timeLimit で初期化します。
- startingWidth に timeBarFill の初期の幅を記録します。
- UpdateTimeDisplay() を呼び出して、タイマー表示を更新します。
Update():
- currentTime が 0 より大きい間、毎フレーム Time.deltaTime (前回のフレームからの経過時間) を引いて残り時間を減らします。
- UpdateTimeDisplay() を呼び出して、タイマー表示を更新します。
- timePercentage で残り時間の割合を計算します。
- timeBarFill.rectTransform.sizeDelta を更新して、カウントダウンバーの幅を変更します。
- currentTime が 0 以下になったら、GameOver() を呼び出します。
UpdateTimeDisplay():
- currentTime を分と秒に分けて、timerText.text に表示します。
GameOver():
- ゲーム終了時の処理を記述します。ここではとりあえず、コンソールに “Time’s up! Game Over!” と表示し、”GameOver”という名前のシーンに移動しています。

3. スクリプトのアタッチと設定

Canvas オブジェクト (または別のオブジェクト) に TimerController スクリプトをアタッチします。
Inspector ウィンドウで、TimerController コンポーネントの以下の変数を設定します。
- Time Limit: 制限時間を秒単位で設定 (例: 60)。
- Timer Text: Hierarchy ウィンドウから TimerText オブジェクトをドラッグ＆ドロップします。
- Time Bar Fill: Hierarchy ウィンドウから TimeBarFill オブジェクトをドラッグ＆ドロップします。
- Time Bar Text: Hierarchy ウィンドウから TimeText オブジェクトをドラッグ＆ドロップします。