Unity実践-フラッシュ暗算

【Unity入門】フラッシュ暗算アプリの作り方|ランダム数値生成と表示制御【第3回】

はじめに

前回の記事では、ランダムな数値を生成し、それを一定間隔で表示・非表示にする方法を解説しました。本記事では、プレイヤーが解答を入力するための仕組み(InputFieldの実装) について詳しく説明します。

この記事で学べること

  • UnityのInputFieldを活用してプレイヤーの入力を受け取る方法
  • スクリプトで入力値を取得し、処理する方法
  • 入力が完了したときのイベント処理
  • 「GameManager」スクリプトによるプロジェクト管理

UnityのInputFieldとは?

InputField は、プレイヤーが文字や数値を入力するためのUIコンポーネントです。フラッシュ暗算アプリでは、表示された数値の合計をプレイヤーに入力してもらうため、この機能を利用します。

InputFieldの設置と基本設定

本章に入る前に前章で作成したProblemTextGamePlayViewは邪魔になるので、非表示にしておきます。また、BackGround子オブジェクトGameObject「GameInputView」を作成しておきます。

Unity入門の画像10

InputFieldの追加

  1. GameInputView子オブジェクトとして「UI」「Input Field – TextMeshPro」を作成
  2. Placeholder に「Input Answer…」と記入
  3. Text の初期値を空に設定

※ テキストは中央表示、Font Sizeを「20」、FontStyleを「B」に変更しています。名前はご自由に変更してください。

Unity入門の画像11

ボタンの追加(送信ボタン)

  1. GameInputView子オブジェクトとして「UI」「Button – TextMeshPro」を作成
  2. Buttonの子オブジェクトのTextMeshProに「OK」と設定

   ※ 今回は日本語は入力しないでください。

Unity入門の画像12

GameManagerでプロジェクトを管理する方法

ここまで出来たら、先にプロジェクトのビュー表示を管理しましょう。

まず、「GameManager」(全体を管理するクラス)というスクリプトを作成します。作成が終われば、以下のソースコードを入力してください。(ちなみにスクリプトを作成すると歯車マークになります。)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    public FlashAnzanManager flashAnzanManager;

    //シリアライズ化(他スクリプトから変更不可だがインスペクターで設定可能)
    [SerializeField]
    private GameObject gamePlayView;
    [SerializeField]
    private GameObject gameInputView;
    [SerializeField]
    private GameObject gameResultView;

    void Start()
    {
        //初期設定(SetActiveで表示、非表示できる)
        gamePlayView.SetActive(true);
        flashAnzanManager.problemText.gameObject.SetActive(true); //テキストからGameObjectを参照
        gameInputView.SetActive(false);
        gameResultView.SetActive(false);
    }

    //PlayViewからInputViewへ表示を切り替える関数
    public void InputFromPlay()
    {
        //フラッシュ暗算の処理が終わったら入力画面を表示する。
        gamePlayView.SetActive(false);
        flashAnzanManager.problemText.gameObject.SetActive(false);
        gameInputView.SetActive(true);
    }
}

入力が終わったらHierarchyで右クリック「Create Empty」GameManagerObjectを作成します。

GameManagerObjectに「GameManager」スクリプトをアタッチし、flashAnzanManagergamePlayViewgameInputViewgameResultViewにそれぞれオブジェクトをアタッチしましょう。(Hierarchyから!!!)

Unity入門の画像13

スクリプトで入力値を取得する方法

C#スクリプトで InputField の入力内容を取得して処理する方法と回答ボタンを実装します。プロジェクトも小規模なので前回作成した、「FlashAnzanManager」スクリプトに追加します。

using System.Collections;
using TMPro;
using UnityEngine;
using UnityEngine.UI;

//フラッシュ暗算を制御する
public class FlashAnzanManager : MonoBehaviour
{
    public TextMeshProUGUI problemText;
    public GameObject startButton;  //追加(ボタンとしてではなくゲームオブジェクトとしている)

    public TMP_InputField answerInput; //回答記入
    public Button answerButton; //回答決定ボタン

    public GameManager gameManager; //GameManagerクラス

    public int sumAnswer; //表示したテキストの合計
    public int loop_Number; //表示回数

    void Start()
    {
        //ボタンを押したら回答判定をする関数の登録
        answerButton.onClick.AddListener(CheckAnswer); 

        //初期化
        sumAnswer = 0;
    }

    //Startボタン機能
    public void StartButtonClick()
    {
        //ボタンは不要なので非表示(enabledはボタンでは非表示にならない)
        startButton.SetActive(false);

        //コルーチンを開始
        StartCoroutine(DisplayNumbers());
    }

    //フラッシュ暗算制御
    IEnumerator DisplayNumbers()
    {
        for (int i = 0; i< loop_Number; i++)
        {
            //テキストに1~9までのランダムな数字を表示
            problemText.text = AnzanCalculation.GenerateRandomNumber(1, 9).ToString();
            problemText.enabled = true; // テキストを表示

            sumAnswer += int.Parse(problemText.text); //合計を計算
            
            yield return new WaitForSeconds(1.0f);
            problemText.enabled = false; // テキストを非表示
            yield return new WaitForSeconds(0.5f);
        }
        gameManager.InputFromPlay();
    }

    //回答の正誤判定
    public void CheckAnswer()
    {
        if (int.TryParse(answerInput.text, out int playerAnswer))
        {
            if (playerAnswer == sumAnswer)
            {
                Debug.Log("正解!");
            }
            else
            {
                Debug.Log("不正解!");
            }
        }
        else
        {
            Debug.Log("数値を入力してください。");
        }
    }
}

FlashAnzanManager」スクリプトに入力できたらanswerInputと answerButtonGameManagerをアタッチしましょう。

スクリプトへの記入が終わったら、実行して確認しましょう。上手くいっていれば正しい答えを入力するとConsoleで「正解!」と出てきます。

まとめ

本記事では、

  • Unityの InputField を使ってプレイヤーの入力を受け取る方法
  • スクリプトで InputField の入力を取得し、正誤判定を行う方法
  • Button で解答を送信する方法
  • GameManagerでプロジェクトを管理する方法

を解説しました。

次回は、解答の正誤判定結果を画面に表示する方法 について詳しく解説します。引き続きフラッシュ暗算アプリを作っていきましょう!