Unityーボタンとスコアを連動させるー

はじめに

Unityに関わらず、ゲームを作成する際にはプレイヤーの移動距離を表示したり、
ボタンを押している間、何らかのアクションを実行したり、
といった処理が必要になると思います。

今回はボタンと連動してスコアが増えたり減ったりする、簡単なアプリの作り方をご紹介します。私自身プログラミング歴6ヶ月、Unity歴3ヶ月なので、私のような初心者の方でも制作できるように、わかりやすく書いたつもりです。

アプリのイメージはこんな感じです。

実装要件は以下の通りです

・右のボタンを押すとスコアが増える。
・左のボタンを押すとスコアが減る。
・スコアが２００になったら「クリア」と表示する。
・スコアが０になったら「ゲームオーバー」と表示する。

目次

1.事前準備
2.StandardAsetts(バーチャルパッド）のダウンロード
3.ボタン(バーチャルパッド）の作成
4.InputManagerの作成
5.GameManagerの作成
6.Canvasの作成
7.GameManagerに各Canvasをアタッチ
8.参考にしたサイト
9.ゲームのご紹介
10.おわりに

1.事前準備

まずはUnity２Dの新規プロジェクトを立ち上げてください。

次にプラットフォームをIOSに変更してください。
ファイル　→　ビルド設定　→　IOS　→　SwitchPlatform

ゲーム画面のサイズを調整してください　1920*1080 Portrait

2.StandardAsetts(バーチャルパッド）のダウンロード

StandardAsettsのダウンロードは非常に簡単に行えます。
1.まずは以下のURLよりアセットストアを開きます。
https://assetstore.unity.com/

2.AssetStoreは英語表示のため、必要に応じて日本語表示に変更してください。
※GoogleChromeをご利用の方は以下が役に立つと思います。
https://support.google.com/chrome/answer/173424?co=GENIE.Platform%3DDesktop&hl=ja

3.検索欄に「StandardAssets」と記載して検索してください。
4.Standard Assets (for Unity 2018.4)を選択してください。

5.「Open In Unity」を押してください。
すると自動的にパッケージマネージャーが開きます。

6.Standard Assets (for Unity 2018.4)を選択し、右下の「ダウンロード」を押してください。
ダウンロードが完了すると「ダウンロード」が「インポート」に変わります。

7.Standard Assets (for Unity 2018.4)を選択し、右下の「インポート」を押してください。
するとImport Unity Packageが開きます。

8.以下の画像をよくみて同様のチェックを入れて（注意深く確認してください）、「インポート」を押してください。

・CrossPlatformInputは全てにチェックを入れています。
・Editorは一部にチェックを入れています。
・その他は全てチェックを外しています。

3.ボタン(バーチャルパッド）の作成

1.canvasグループの作成

まずはヒエラルキー上で右クリックをしてください。
UI > キャンバスグループをクリックしてください。
そしてヒエラルキー内に生成されたcanvasをクリックしてください。

その後レンダーモードを「スクリーンスペース - カメラ」に変更します。
インスペクター　> canvas > レンダーモード　をクリックして変更します。

その後、レンダーカメラに「Main Camera」をアタッチします。

2.MobileSingleStickControlのプレハブを開く

プロジェクト > Assets > StandardAssets > Prefabs > MobileSingleStickControl
以下の画像の右上の「プレハブを開く」をクリックしてください。

3.Mobile JoyStickを削除する

ヒエラルキー > MobileSingleStickControl > JoyStick
JoyStickを右クリックして削除を押す。
※Saveするか聞かれた場合はSaveをクリックする。

4.JumpButton内のTextを削除する

ヒエラルキー > MobileSingleStickControl > JoyButton >Text
Textを右クリックして削除を押す。
※Saveするか聞かれた場合はSaveをクリックする。

5.MobileSingleStickControlのプレハブをcanvas内にドラックアンドドロップする

プロジェクト > Assets > StandardAssets > Prefabs > MobileSingleStickControlを先ほど作成したcanvasにドラックアンドドロップしてください。
以下の画像のようになっていれば成功です。

6.MobileSingleStickControlの幅と高さを調整する

インスペクター内で変更を行います。
まずはRectTransformの幅と高さをそれぞれ1080と1920にします。
次にRectTransformのスケールX,Y,Zをそれぞれ１に変更します。
以下の画像のように白いボタンが出現すればOKです。

7.JumpButtonを複製し、名前を変更する
ヒエラルキー　> Canvas > MobileSingleStickControl > JumpButtonを右クリック > 複製
それから以下の画像のようにそれぞれのオブジェクトの名前を変更します。
・LeftButton
・RightButton

8.ボタンの位置を調整する
左右のボタンの位置を以下の画像のように調整します。

LeftButton

RightButton

ここまでできたらお好みでボタンの色などを変更してもいいと思います。

9.ButtonHandler(スクリプト）の名前を変更する
【重要】ここに記載している名前は今後重要になってきますので、綴りの間違いがないようにしておいてください。

LeftButton

RightButton

以上でボタンの作成は終了です。
お疲れ様でした。
筆者はコーヒーを淹れて、江國香織さんの「スイカの匂い」という小説を読みながら、すこし休憩します。

4.InputManagerの作成

イメージはこんな感じです。

1.空のオブジェクトを作成します。

ヒエラルキー内で右クリックを押して、空のオブジェクトを作成してください。
それから、名前を「InputManager」に変更してください。

2.InputManagerスクリプトを作成します。

・プロジェクト内にScriptフォルダを作成してください。
プロジェクト　> Assetsを右クリック　> 作成　>フォルダー
その後、フォルダー名を「Script」に変更してください。

・次にInputManageｒ(スクリプト）を先ほどのフォルダー内に作成してください。
プロジェクト　> Assets　> Scriptを右クリック　> 作成　> C#スクリプト
その後、Script名を「InputManager」に変更してください。

3.InputManagerスクリプトのコードを書き換える
InputManagerのC#スクリプトを開き以下のようにコードを書き換えてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;
using UnityStandardAssets.CrossPlatformInput;

public class InputManager : MonoBehaviour
{
    protected static readonly string[] findTags;

    private static InputManager instance;

    public static InputManager Instance
    {
        get { return instance;}
    }

    void Awake()
    {
        CheckInstance();
    }

    private bool CheckInstance()
    {
        if (instance == null) {
            instance = (InputManager)this;
            DontDestroyOnLoad(gameObject);
            return true;
        } else if (Instance == this) {
            return true;
        }

        Destroy(this);
        return false;
    }

    /* -- 入力検知 --------------------------------------------------------------------------------- */
    private int  buttonKey = 0;
    //パブリックの変数
    public int ButtonKey
    {
        get { return buttonKey; }
    }

    void Update()
    {
        // ジャンプ
        PushBottun();
    }

    //GetButtonDownはボタンを押した時に返す値を記載
    //GetButtonはボタンを押している間に返す値を記載
    //GetButtonUpはボタンを離した時に返す値を記載
    void PushBottun()
    {
        if (CrossPlatformInputManager.GetButtonDown("RightButton")) { //クロスプラットフォームのButtonハンドラーのname欄ということ
            buttonKey = 1;
        } else if (CrossPlatformInputManager.GetButton("RightButton")) {
            buttonKey = 2;
        } else if (CrossPlatformInputManager.GetButtonUp("RightButton")) {
            buttonKey = 0;
        } else if (CrossPlatformInputManager.GetButtonDown("LeftButton")) { //クロスプラットフォームのButtonハンドラーのname欄ということ
            buttonKey = 3;
        } else if (CrossPlatformInputManager.GetButton("LeftButton")) {
            buttonKey = 4;
        } else if (CrossPlatformInputManager.GetButtonUp("LeftButton")) {
            buttonKey = 0;
        }
    }
}

4.InputManager（スクリプト）をInputManager（オブジェクト）にアタッチする

プロジェクト内にあるInputManage（スクリプト）を、ヒエラルキー内にあるInputManager（オブジェクト）にドラック&ドロップでアタッチしてください。

InputManagerの作成は以上となります。

5.GameManagerの作成

イメージはこんな感じです。

1.空のオブジェクトを作成します。

ヒエラルキー内で右クリックを押して、空のオブジェクトを作成してください。
それから、名前を「GameManager」に変更してください。

2.GameManagerスクリプトを作成します。

・次にGameManageｒ(スクリプト）をScriptフォルダー内に作成してください。
プロジェクト　> Assets　> Scriptを右クリック　> 作成　> C#スクリプト
その後、Script名を「GameManager」に変更してください。

3.GameManagerスクリプトのコードを以下のように書き換えます。

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

public class GameManager : MonoBehaviour
{
    //インプットマネージャー
    InputManager inputManager;

    //スコア
    public GameObject canvasScore;
    public Text scoreText;//Canvasのスコアテキストをアタッチメントするための変数（箱）
    int score = 100;//ゲームスタート時に表示するスコアを決める
    string score_3digits;//２５を表示する時に025のように3桁で表示するために必要

    //ゲームクリアキャンバス
    public GameObject canvasGameClear;
    public GameObject canvasGameOver;


    //ゲーム開始と同時に呼び出される関数
    void Start()
    {
        canvasScore.SetActive(true);
        canvasGameClear.SetActive(false);
        canvasGameOver.SetActive(false);
        inputManager = InputManager.Instance;
        SetScore();
    }

　　 //0.02秒ごとに呼び出される関数（初期設定の場合）
    void FixedUpdate()
    {
        AddScore();
        ClearCheck();
    }


//--スコアを画面に表示する関数ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    private void SetScore()
    {
        score_3digits =score.ToString("D3");//数字を3桁で表示するための記述
        scoreText.text = score_3digits + "m";//3桁の数字＋mで表示するための記述
    }

//--ボタンを押している時の処理ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    //スコア加算
    public void AddScore()
    {
        if (inputManager.ButtonKey == 2) {
            UpScore();
        }
        if (inputManager.ButtonKey == 4) {
            DownScore();
        }

    }

    private void UpScore()
    {
        score += 1;
        SetScore();
    }

    private void DownScore()
    {
        score -= 1;
        SetScore();
    }

//--ゲームクリアに関する処理ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    private void ClearCheck()//スコアが0か200になったらゲームクリア
    {
        if(score == 200)
        {
            GameClear();
        }
        else if(score == 0)
        {
            GameOver();
        }
    }

    private void GameClear()
    {
        canvasScore.SetActive(false);
        canvasGameClear.SetActive(true);
    }

    private void GameOver()
    {
        canvasScore.SetActive(false);
        canvasGameOver.SetActive(true);
    }

}

4.GameManageｒ（スクリプト）をGameManageｒ（オブジェクト）にアタッチする

プロジェクト内にあるInputManage（スクリプト）を、ヒエラルキー内にあるGameManageｒ（オブジェクト）に
ドラック&ドロップでアタッチしてください。

GameManagerの作成は以上となります。

６.Canvasの作成

このアプリケーションでは3つのCanvasを作成します。
・スコアを表示するためのTextCanvas（UI）
・「クリア」という文字を表示するためのTextCanvas（UI）
・「ゲームオーバー」という文字を表示するためのTextCanvas（UI）

イメージはこんな感じです。

1.スコアを表示するためのTextCanvas（UI）を作成します。

ヒエラルキー　> Canvasを右クリック　> UI　> Text
表示名を「ScoreText」に変更してください。

インスペクターを以下のように変更してください。

位置Y：300
幅：700
高さ：300
テキスト:000m
フォントサイズ：200
Paragraph > 整列：真ん中、真ん中
色：白

下の画像のようなイメージです。

2.「クリア」という文字を表示するためのTextCanvas（UI）を作成します。

まず、上記で作成したScoreTextを複製してください。
ヒエラルキー > ScoreTextを右クリック　>　複製

表示名を「GameClearText」に変更してください。

その後、インスペクター内のテキスト「000m」を「クリア」に書き換えてください。

3.「ゲームオーバー」という文字を表示するためのTextCanvas（UI）を作成します。

まず、上記で作成したScoreTextを複製してください。
ヒエラルキー > ScoreTextを右クリック　>　複製

表示名を「GameOverText」に変更してください。

その後、インスペクター内のテキスト「000m」を「ゲームオーバー」に書き換えてください。
また、フォントサイズ「200」から「100」に変更してください。
※200だと「ゲームオーバー」の文字列がうまく表示されないため。

以上です。
あともうすこしで完成です！

7.GameManagerに各Canvasをアタッチ

イメージはこんな感じです。

上記の画像のように、ヒエラルキー内にあるScoreText,GameClearText,GameOverTextを、GameManagerオブジェクトのGameManager(スクリプト）にアタッチしてください。

8.参考にしたサイト

9.ゲームのご紹介

今回ご紹介した技術を活かして作成したゲーム（IOS限定）はこちらです。

10.おわりに

以上でアプリケーションの作成は終了となります。
動作確認をして、無事に動けば完了となります。
筆者は2021年5月時点では、Unityでのゲーム制作歴3ヶ月です。

ここのコードの書き方もっとこうした方がいいよとか、他にもっと良い方法があるよというアドバイス等をいただけると嬉しいです。

まだまだ至らない点が多いですが、引き続きよろしくお願いいたします。
最後までお付き合いいただきまして、ありがとうございました。

筆者：いのう