「時間内に何回連打できるか」ゲームを作りたいと思います。

まずはどんなゲームなのかを体験してみてください。

1.ビルド設定の変更:

Build Settings を開き、プラットフォームを WebGL に切り替える。

今回は作ったゲームを実際にWEB上でアップロードするのが目的です。

なのでプラットフォームをWEB用に変える必要があります。

これをしないと例えゲームを完成できたとしても、ネットにこのゲームをアップロードできないもしくは不具合が起こる可能性があります。

後からでも設定はできますが一番最初にやることを推奨します。

メニューバーの File をクリックし、Build Profiles（Ctrl + Shift + B）を選択してください。

左側の「Platforms」リストに「Web」があるか確認してください。

右側にある「Add Build Profile」ボタンを押します。

すると「Web用のビルド設定」が開きます。

ここは基本的になにも押さずにもう一回「Add Build Profile」を押しましょう。

するとこのような画面になります。しっかりと左下の「Build Profiles」に「Web」が追加さえていますね。

これでビルド設定は完了です。

もしうまくいかない場合

もしかするとWEBGLモジュールがこのようにインストールされていない可能性があります。

この場合は一回プロジェクトを保存してから一回終了します。

インストールの管理の部分から「WEB Build Support」にチェックを入れてインストールしましょう。

インストールが終わったらまた起動してもう一度やってみてください。これで元の手順通りに表示されるはずです。

画面比率の固定:

Game ビューの解像度を 9:16

画面比率（アスペクト比）の固定は、Webゲーム開発において「誰がどこで見ても同じ見た目になるようにする」ための非常に重要な工程です。

これを行うことによってPCの縦長画面でも、スマホのブラウザでも、「意図した通りの配置」で表示されます。

画面上部にある「Game」タブをクリックしてGameビューを表示します。

そしてGameビューの左上に「Free Aspect」と書かれたプルダウンメニューがあるので、そこをクリックしてください。

一覧の中に「9:16」があればそれを選びます。もし無ければ、一番下の 「＋」ボタン を押してください。

Type:「Fixed Resolution（固定解像度）」を選択。

Width: 1080

Height: 1920

名前を「Portrait 9:16」などにしてOKを押します。

メニューの中から今作った「Portrait 9:16」を選択します。

今回はスマホで見ている読者にも快適に遊んでほしいので、9:16（縦画面）の設定にしています。

3.UIパネル作成:

StartPanel（スタートボタン）、GamePanel（スコア/タイマー）、ResultPanel（結果表示）の3つをCanvas内に配置する。

「Canvas（キャンバス）」というUIを置くための専用の画用紙をシーンに配置します。何を言っているんだ？と思うかもしれません。なので詳しく説明していきます。

なぜ「Canvas」が必要なのか？

Unityでゲーム画面上に「ボタン」や「スコア表示」などのUIを出す場合、必ずCanvasという枠の中に配置しないと画面に正しく表示されません。

たとえば映画の世界を想像してみてください。

映画の画面に「スコア」や「ボタン」という字幕（UI）を入れたいとします。

もし、映画のセットの中に直接「スコア」という看板を置くとどうなるでしょうか？

• 俳優が走って後ろに行ったら、スコアも一緒に遠くへ行ってしまう。
• カメラを横に向けたら、スコアが見えなくなってしまう。
• 俳優にぶつかって、スコアが倒れてしまう。

これではゲームのUIとして機能しませんよね。

そこで登場するのが 「Canvas（アクリル板）」 です。 このアクリル板を、カメラのレンズの直前（一番手前）にピタッと固定して配置します。

俳優（キャラクター）がどこへ行こうが、カメラをどう振ろうが、アクリル板に書かれた字幕（スコアやボタン）は常に画面の同じ位置に固定されていて、いつでも読める状態になります。

Canvas の中にパネルを3つ作る

では実際に作っていきましょう。

「Hierarchy」上で「右クリック」→「UI(Canvas)」→「Image」

わかりやすいように名前を「StartPanel」にしましょう。

「右クリック」→「Rename」で名前を変更できる。

同様の手順で2つ作り、名前をそれぞれ「GamePanel」、「ResultPanel」にしましょう。

「StartPanel」 を右クリックし、「Duplicate（複製）」を2回行い、名前を変更するとスムーズにできる。

「Hierarchy」がこのような状態になっていれば成功です。

配置とサイズを整える

「StartPanel」 を選択。

「Inspector」の「Rect Transform」 の四角いアイコン（アンカー設定）をクリックします。

Alt (Macは Option) を押しながら、右下の「Stretch – Stretch」（四角い枠が全て広がるアイコン）をクリックします。

これでパネルがCanvas全体にぴったりフィットします。

残り2つのパネル（GamePanel, ResultPanel）にも同じ設定を行ってください。

各パネルに「必要な部品」を置く

次に各パネルの中にボタンやテキストを配置します。「Hierarchy」で各パネルを右クリックし、必要なUIを追加します。

「StartPanel」を「右クリック」→「UI 」→「 Button – TextMeshPro 」を追加（「スタート」ボタン）する。

初回のみ、「 Button – TextMeshPro」 を作成した瞬間に「Import TMP Essentials」という画面が出てきます。

「Import TMP Essentials」ボタンを押してください。 これをやらないと日本語フォントが表示されません。

下の「Import TMP Examples & Extras」は押さなくてもいいです。

これはおまけみたいなものなのでデータの節約のためにも×を押しちゃいましょう。

このように表示されたら完了です。

一様区別するために名前を「StartButton」に変更しましょう。

GamePanelの中

「右クリック」→「UI 」→「 Text – TextMeshPro 」を２つ追加（スコア用、タイマー用）する。

名前を区別するため、「ScoreText」「TimerText」とそれぞれ名前を変更しましょう。

このように表示されたら完成です。

ResultPanelの中:

右クリック」→「UI 」→「 Text – TextMeshPro 」を追加（最終スコア表）する。名前を「FinalScore」にする。

「右クリック」→「UI 」→「 Button – TextMeshPro 」を追加（「リトライ」ボタン）する。名前を「RetryButton」にする。

このように表示されたら完成です。

4.スクリプト作成:

C#スクリプトでの制御

今から「GameManager」という司令塔を作って、プログラムでパネルの表示を管理します。

＊注意点

ここから先は「なんでその操作するの？」「そのコードの意味は何？」といった疑問が何回も出てくるところです。しかしこの疑問は先にゲームを完成させないと理解できないものばかりです。

まず第一の目的は「ゲームを完成させること！」

その後から疑問の解消をしていきましょう。

「GameManager」の作成

「Hierarchy」の何もないところで右クリックし、「Create Empty」を選択。

名前を「GameManager」に変更します。

「Project」ウィンドウで右クリック→「Create」→「Scripting」→「MonoBehaviour Script」 を選択し、名前を GameFlow としてください。

今このような状態です。

下の「Project」ウィンドウに「 GameFlow 」という空のScriptが作られました。

作成した GameFlow スクリプトを、Hierarchyの「GameManager」オブジェクトにドラッグ＆ドロップしてアタッチ（取り付け）します。

「GameManager」を選択して左の「Inspector」を見てください。しっかりと「GameManager」のScriptが追加されていますね。

しかし今はScriptの中身が空っぽです。ここからScriptの中身を書いていきましょう。

スクリプトの記述①

下の「Project」ウィンドウにある先ほど作った「GameFlow 」をダブルクリックして開いてください。

このようにVisualStudioが開きました。

ここに以下のコードをコピペして貼り付けてみてください。

public class GameFlow : MonoBehaviour
{
    // [1] パネルを登録するための「枠」を用意する
    public GameObject startPanel;
    public GameObject gamePanel;
    public GameObject resultPanel;

    // [2] ゲーム開始時に最初に呼ばれる（自動実行）
    void Start()
    {
        ShowStart(); // 最初はスタート画面を表示
    }

    // [3] スタート画面を表示する（他のパネルは隠す）
    public void ShowStart()
    {
        startPanel.SetActive(true);  // 表示
        gamePanel.SetActive(false);  // 非表示
        resultPanel.SetActive(false); // 非表示
    }

    // [4] ゲーム画面を表示する
    public void ShowGame()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(true);
        resultPanel.SetActive(false);
    }

    // [5] 結果画面を表示する
    public void ShowResult()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);
    }
}

貼り付けたら必ず「Ctrl＋S」で保存をしましょう。

では元に戻って「Hierarchy」にある「GameManager」を選択し、左側の「Inspector」を見てください。

「GameFlow」のScriptに「StartPanel」「GamePanel」「ResultPanel」の3つの枠が現れました。

今のままでは、プログラムは「どのパネルを消したり出したりすればいいのか」を知りません。

一番最初に作った「Hierarchy」にある「StartPanel」「GamePanel」「ResultPanel」をさっきの枠にドラッグ＆ドロップしてください。

これで、プログラムが「あのパネルたちのことね！」と認識できるようになります。

スタートボタンに「ShowGame()」を登録する

次に、スタートボタンを押した時の動作を決めます。

Hierarchy」で、StartPanel の中にある 「StartButton」 を選択します。

「Inspector」を一番下までスクロールし、 「On Click ()」 という項目を探します。

「＋」ボタンをクリックします。

「None (Object)」と書かれた枠に、Hierarchyから 「GameManager」 をドラッグ＆ドロップして入れます。

その右側のドロップダウン（No Function）をクリックします。

メニューから 「GameFlow」→「ShowGame()」 を探してクリックします。

この状態で、画面上部の 「▶（再生ボタン）」 を押してみてください。「StartButton」をクリックして、画面が切り替われば成功です。

↑「GamePanel」が画面いっぱいに映っていません。もし同じ状況になった人は…

スクリプトの記述②

次に「GameFlow」のScriptに以下のコードをコピーして、今のコードの上から上書きしてください。

using UnityEngine;
using TMPro; // 追加: TextMeshProを使うために必要

public class GameFlow : MonoBehaviour
{
    public GameObject startPanel;
    public GameObject gamePanel;
    public GameObject resultPanel;

    public TextMeshProUGUI scoreText; // スコア表示用の枠
    private int score = 0;            // スコアを保存する変数

　　void Start()
　　{
    // ゲーム起動時はスタート画面から
    ShowStart();
　　}

    public void ShowStart()
    {
        startPanel.SetActive(true);
        gamePanel.SetActive(false);
        resultPanel.SetActive(false);
        score = 0; // スコアをリセット
    }

    public void ShowGame()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(true);
        resultPanel.SetActive(false);
        score = 0;
        UpdateScoreText();
    }

    // ボタンを押した時に呼ぶ関数
    public void AddScore()
    {
        score++;
        UpdateScoreText();
    }

    void UpdateScoreText()
    {
        scoreText.text = "Score: " + score;
    }

    public void ShowResult()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);
    }
}

すると「GameManager」のInspectorに新たに「Score Text」という枠ができました。

ここに「Score Text」をドラッグ＆ドロップして入れます。

連打ボタンの作成

ここで「GamePanel」に新たに「ClickButton」というボタンを追加します。これが連打のボタンになります。

「GamePanel」を「右クリック」→「UI 」→「 Button – TextMeshPro 」を追加する。

今「Hierarchy」はこんな感じになっています。

連打ボタンの配置と微調整

Hierarchyで GamePanel の中にある ClickButton を選択します。

「Scene画面」の左上のツールバーから 「Rect Tool」（キーボードの T を押すと切り替わります）を選択。

今青い点で囲まれた□が連打ボタンになっています。これを好きな場所に移動させます。

ちなみにこの画面は「StartPanel」を2回連続クリックすると全体を見通せる画面になります。

私はこんな感じにど真ん中に「ClickButton」を配置しました。

Anchor Preset を使って位置を固定する

Inspectorの 「Rect Transform」 の左上にある 「十字のアイコン（Anchor Preset）」 をクリックします。

ここで 「Center Middle（中央）」 のアイコン（ちょうどど真ん中にあるやつ）をクリックしてください。

これで「どんな画面サイズでも、このボタンは必ず中央に配置される」というルールが完成しました。

この設定をしたあと、Inspectorの 「Pos Y」 を調整して、画面下部からどれくらい上に浮かせたいか（例：50 や 100 など）を入力して微調整してください。

Score・TimerTextの配置を設定する。

「GamePanel」や「ClickButton」と同じように好きな位置に配置しましょう。

今現時点では二つとも中央に配置されているため、右上などの「ClickButton」の邪魔にならない場所に移動させましょう。

また文字の色は白になっているため、Inspectorの「Vertex Color」を黒にしましょう。

これで背景と同化するのを避けます。

「▶（再生ボタン）」 を押して確認してみましょう。（Scene画面では「StartPanel」が手前に来ているので表示されません）

「連打ボタン」への接続

Hierarchyの ClickButtonに、連打機能を紐付けます。

Hierarchy で 「ClickButton」 を選択します。

Inspector の一番下 「On Click ()」 に「＋」を押して枠を追加します。

Hierarchy から 「GameManager」 をその枠へドラッグ＆ドロップします。

右側のドロップダウンで 「GameFlow」→「AddScore()」 を選択します。

これは以前やった「StartButton」の設定と同じ工程です。

スクリプトの記述③

次に「GameFlow」のScriptに以下のコードをコピーして、今のコードの上から上書きしてください。

using UnityEngine;
using TMPro;

public class GameFlow : MonoBehaviour
{
    public GameObject startPanel;
    public GameObject gamePanel;
    public GameObject resultPanel;

    public TextMeshProUGUI scoreText;
    public TextMeshProUGUI timerText; // タイマー用テキスト

    private int score = 0;
    private float timeRemaining = 10.0f; // 制限時間
    private bool isPlaying = false;      // ゲーム中かどうか

　　　void Start()
　　{
    // ゲーム起動時はスタート画面から
    ShowStart();
　　}

    void Update()
    {
        // ゲーム中ならタイマーを減らす
        if (isPlaying)
        {
            timeRemaining -= Time.deltaTime;
            timerText.text = "Time: " + Mathf.Ceil(timeRemaining).ToString();

            if (timeRemaining <= 0)
            {
                ShowResult();
            }
        }
    }

    public void ShowStart()
    {
        isPlaying = false;
        startPanel.SetActive(true);
        gamePanel.SetActive(false);
        resultPanel.SetActive(false);
    }

    public void ShowGame()
    {
        score = 0;
        timeRemaining = 10.0f; // 10秒にリセット
        isPlaying = true;      // ゲームスタート！
        
        startPanel.SetActive(false);
        gamePanel.SetActive(true);
        resultPanel.SetActive(false);
        
        UpdateScoreText();
    }

    public void AddScore()
    {
        if (isPlaying) // ゲーム中だけスコア加算
        {
            score++;
            UpdateScoreText();
        }
    }

    void UpdateScoreText()
    {
        scoreText.text = "Score: " + score;
    }

    public void ShowResult()
    {
        isPlaying = false;
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);
    }
}

GameManagerを選択し、Inspectorを見ると「Timer Text」という空の枠が追加されています。

Hierarchy の GamePanel にある 「TimerText」（もし作っていなければ新しく作成してください）を、その枠にドラッグ＆ドロップしてください。

これで、ゲーム開始時に「Time: 10」と表示され、自動的にカウントダウンが始まります！

「ResultPanel」の設定

結果画面用のテキストを用意する

「FinalScore」を画面中央の分かりやすい場所に配置してください。

スクリプトの記述④

以下のコードを今のコードに追加してください。

// 追加する変数
    public TextMeshProUGUI resultScoreText; 

    public void ShowResult()
    {
        isPlaying = false;
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);

        // 結果画面にスコアを表示！
        if (resultScoreText != null)
        {
            resultScoreText.text = "Final Score: " + score;
        }
    }

Unityでの紐付け

GameManager の Inspector に Result Score Text という枠が新しく増えているはずです。

そこに、作成した「FinalScore」をドラッグ＆ドロップしてください。