Unityで数字順押しゲーム(タッチナンバー)を作る 1

初めてのUnityゲーム制作

記念すべきUnityでのゲーム制作第一弾。簡単なものということで、数字順押しゲームを作ってみようと思います。画面上に表示される数字の中から小さい順にクリックしていくゲームです。

このゲームを選んだ理由ですが、ボタンだけあれば作れるゲームだからです。ということでやっていきます。

ちなみにUnityについては書籍1冊を一通りやったくらいです。

Unity数字順押しゲーム開発

環境とか

• Unity 2017
• Visual Studio 2017
• Windows
• WebGLでビルド
• .NET 4.6(C#6)

作業予定

大体3日くらいの作業でしたので、全3回の記事に分けます。

1. ボタンの生成とか設定とか
2. ボタンの自動生成と順押し判定
3. メニューシーンとゲームシーンの遷移判定

設計

作成するのはゲームシーンとスタートシーンです。

スタートシーンからはじまり、クリックでゲームシーンへ遷移します。

ゲームシーンでは時間を表示し、すべてのボタンを押し終えたら結果(計測時間)を表示します。その後クリックでスタートシーンへ戻る、みたいな感じです。

完成予定のゲームとソース

完成するゲームは以下のページで遊べます。

Unity WebGL Player | TouchNumber

gamegame-game.com

ソースはGitHubのページにあります。

gamegame-game/TouchNumber

Unity Game, Touch Number. Contribute to gamegame-game/TouchNumber development by creating an account on GitHub.

github.com

プロジェクトの作成

まずは2DでUnityプロジェクトを作成します。

ひとまずシーンを保存しておきます。

.NET のバージョン設定

File -> BuildSettings -> PlayerSettingsから.NET のバージョンを設定しておきます。

詳しくはこちら。

数字ボタンを作成

画面にボタンを配置する

ヒエラルキー -> Create -> UI -> Button でボタンを配置します。配置したボタンの情報を Inspector から設定します。ゲーム画面上にボタンがぽつんと表示されると思います。

設定箇所は以下の通りです。

• 名前 -> NumberButton
• Tag -> NumberButtonを追加して設定
• Position -> (0, 0, 0)
• Width -> 40, Height -> 40

NumberButtonController作成

ボタンの処理をするためのスクリプト、NumberButtonControllerを作成します。Project -> Create -> C# Script から作成します。

using UnityEngine;
using UnityEngine.UI;

public class NumberButtonController : MonoBehaviour
{
    // ボタンに表示されるテキストと数値
    public string Text { get; private set; }
    public int Number { get; private set; }

    // ボタンのサイズ
    public int Width = 40;
    public int Heigh = 40;

    void Start()
    {
        // ボタンクリック時の処理を追加
        this.GetComponent<button>().onClick.AddListener(OnClick);

        // ボタンのサイズを設定
        this.GetComponent().sizeDelta = new Vector2(this.Width, this.Heigh);

        // テスト用のボタン情報を設定
        SetButtonInfos(1, "1");
    }

    // ボタンの情報を設定する
    public void SetButtonInfos(int number, string text)
    {
        this.Text = text;
        this.Number = number;

        this.GetComponentsInChildren()[0].text = text;
    }

    // クリック時の処理
    private void OnClick()
    {
        Debug.Log("Clicked ...");
    }
}

コードの説明

プロパティとか

まず、ボタンに表示されるテキストとそのボタンの数字をプロパティで保持します。テキストと数字は基本一致することになりますが、まあ場合によっては変更できるようにするために分けてます。

次にボタンのサイズを定義しておきます。UnityのInspectorから編集できるようにPublic変数にしています。この値はボタンの表示位置を計算するのにも使用します。

SetButtonInfos メソッド

引数でボタンに表示するテキストと数字を設定するメソッドです。生成したボタンに対して、このメソッドで情報を設定します。

this.GetComponentsInChildren()[0] で、ボタンの子コンポーネント(Text)を取得し、テキストを設定します。

OnClick メソッド

ボタンクリック時に呼ばれるメソッドです。今は仮の処理として、ログを表示しています。

Start メソッド

コメントの通りですが、ボタンのクリックイベントに OnClick メソッドを追加し、ボタンサイズを設定しています。

確認用に SetButtonInfos メソッドを実行し [1] ボタンが表示されるようにしています。これは確認用なので正しく動いたら消してください。

NumberButton にスクリプトを追加

作成した NumberButtonController をボタンに追加しておきます。

この時点で一度実行してみると、ボタンのテキストが 1 となっているボタンが画面中央に表示されているはずです。クリックするとLogが表示されます。

画面はこんなふうに表示されます。

Prefabを作成

スクリプトがうまく動作していることを確認した後、作成したボタンをドラッグドロップでPrefabにしておきます。ボタンはこのPrefabをもとに動的に生成して使いますので、ヒエラルキーからボタンは削除しておきましょう。

作成されたPrefabのインスペクターはこんな感じです。

まとめ

• 数字ボタンのPrefabを作成しました。
• ボタンのテキストを設定するためのメソッドとクリック時の処理を作成して動作を確認しました。

次回予定

• ボタンを自動で生成する処理
• ボタンが順番通りにクリックされているかを判定する処理
• 正しい順でクリックされたボタンを削除する処理

以上。

リンク

• Unityで数字順押しゲーム(タッチナンバー)を作る 1
• Unityで数字順押しゲーム(タッチナンバー)を作る 2
• Unityで数字順押しゲーム(タッチナンバー)を作る 3