05. UIとスコア表示 – 学習していく

1. UIとは

UIとはUser Interfaceの略でユーザとコンピュータで様々な情報をやり取りするもので、例えば、ボールを何回打った回数という情報は、コンピュータはカウントしており、知っていますが、プレイヤー（ユーザ）は何回ボールを打ったか数えていないと分かりません。そこで、コンピュータの持っている、打った回数の情報を画面に表示することで、ボールを何回打ったか、一目見ればわかるようになります。今回はこんな感じのものを実装していこうと思います。

2. UIの配置

ゲーム画面にUIを配置していきます。そもそも何を表示するのかという話ですが、以下のものをまず表示していこうと思います。

　①現在のホール番号

　②そのホールのPAR

　③現在の打数

　④設定ボタン

　⑤カップインした時のスコア表示

この要素を配置するために、まずCanvasという画面に表示するためのゲームオブジェクトを作成し、その中に、①”HoleText”、②”ParText”、③”ScoreText”、④”SettingButton”、⑤”ResultText”を配置します。こんな感じになります。

そしたら、これらのゲームオブジェクトを画面に配置します。

こんな感じにゲーム画面にテキストを配置することができました。やったね。

3. スクリプト作成

テキストを画面に配置しただけではUIとは言えません。コンピュータの中の情報をやり取りするためのものがUIですからね。

情報をやり取りするために、スクリプトを作成します。

この”GameManager”にUIを動かすためのコードを書いていきます。

コードはこんな感じで書きました。

    
using UnityEditor;
using UnityEngine;
using TMPro;

public class GameManager : MonoBehaviour
{
    public static GameManager instance;

    [Header("UI References")]
    public TextMeshProUGUI holeText;
    public TextMeshProUGUI parText;
    public TextMeshProUGUI strokesText;
    public TextMeshProUGUI resultText;

    [Header("Game Setting")]
    public int currentHole = 1;
    public int par = 4;
    public int currentStrokes = 0;

    private void Awake()
    {
        if(instance == null)
        {
            instance = this;
        }
        else
        {
            Destroy(gameObject);
        }
    }

    private void Start()
    {
        UpdateUI();
        if(resultText != null) resultText.gameObject.SetActive(false);
    }

    public void AddStroke()
    {
        currentStrokes++;
        UpdateUI();
    }

    void UpdateUI()
    {
        if(holeText != null) holeText.text = "HOLE: " + currentHole;
        if(parText != null) parText.text = "PAR:  " + par;
        if (strokesText != null) strokesText.text = "STROKES: " + currentStrokes;
    }

    public void HoleOut()
    {
        if (resultText == null) return;

        int scoreDiff = currentStrokes - par;
        string message = "";
        Color textColor = Color.white;

        if (currentStrokes == 1)
        {
            message = "HOLE IN ONE!!";
            textColor = Color.magenta;
        }
        else if (scoreDiff <= -4)
        {
            message = "CONDOR!!";
            textColor = Color.red;
        }
        else if (scoreDiff == -3)
        {
            message = "ALBATROSS!!";
            textColor = Color.cyan;
        }
        else if (scoreDiff == -2)
        {
            message = "EAGLE!!";
            textColor = Color.orange;
        }
        else if (scoreDiff == -1)
        {
            message = "BIRDIE!";
            textColor = Color.yellow;
        }
        else if (scoreDiff == 0)
        {
            message = "PAR";
            textColor = Color.green;
        }
        else if (scoreDiff == 1)
        {
            message = "BOGEY";
            textColor = Color.white;
        }
        else if (scoreDiff == 2)
        {
            message = "DOUBLE BOGEY";
            textColor = Color.white;
        }
        else
        {
            message = "+" + scoreDiff;
            textColor = Color.gray;
        }

        resultText.text = message;
        resultText.color = textColor;
        resultText.gameObject.SetActive(true);

        Debug.Log("Result: " + message);
    }

    public void OpenSettings()
    {
        Debug.Log("設定画面を開きます");
    }
}

これは、さっき配置したテキストをその用途に合わせて更新するコードとなっています。また、カップインした時のスコア表示はIf文でめちゃくちゃ分岐してます。

あとは、ボールを打つと打数を+1するために、”BallController.cs”にこのコードを追加します。

    
if(GameManager.instance != null)
    {
        GameManager.instance.AddStroke();
    }

また、ボールがカップインしたらスコアを表示させるために、”GoalHole”にこのコードを追加します。

    
 if (GameManager.instance != null)
    {
        GameManager.instance.HoleOut();
    }

ゴルフにおいてのスコアは以下の通りです。

1打で入る：HOLE IN ONE
PARから1打少ない：BARDIE
PARから2打少ない：EAGLE
PARから3打少ない：ALBATROSS
PARから4打少ない：CONDOR
PARと同じ打数：PAR
PARより1打多い：BOGEY
PARより2打多い：DOUBLE BOGEY
PARより3打多い：TRIPLE BOGEY
PARより4打以上多い：+（PARより多い打数）

実際に動かしてみるとこんな感じになります。

4. 変更点

そういえば、カップの形を4角形から8角形にして、より丸に近い形にしています。

5. まとめ

今回はUIを実装しました。UIがついてくると一気にゲームって感じがしてきましたね。次は、まだ何をするか決めていません。まぁ、何かしらぼちぼち実装していきます。