そういうのがいいブログ

アプリ個人開発　まるブログ

アプリ開発覚え書き

トップ > Unity > Unity ゲーム 作り方 １から9までのボタンを順番に押すゲームを作る方法

Unity ゲーム 作り方 １から9までのボタンを順番に押すゲームを作る方法

Unity

要件

使用Unityバージョン：2021.3.18f1

はじめに

Unityの操作に慣れるために単純なゲームを作ってみましょう。
Unityをほんの少しさわったことがある方向けです。

どんなゲーム？

1から９のボタンを配置し、1から順番に押していくとボタンが消える内容です。

作り方の手順

作り方の手順は以下です。
1.プロジェクト作成
2.レイアウト設定
3.背景の変更
4.ボタンの配置（1つ）
5.ボタンの配置（9つ）
6.処理の作成
7.ボタンへ処理の登録
8.実行

1.プロジェクト作成

UnityHubを開いて新しいプロジェクトを作成します。

プロジェクト
→ 新しいプロジェクト

すべてのテンプレート
→ 2Dコア
→ プロジェクト名を入力します。
　 (好きな名前で良いです。今回はNumberGame1としました。)
→ 「プロジェクトを作成」を押します。

2.レイアウト設定

お好みでレイアウト変更を実施してください。

画面右上の「Default」を押します。


レイアウトのメニューが表示されますので「2×3」を選択します。


Assetsのフォルダ表示を小さくしたいため画面下側のつまみを一番左へ移動します。

3.背景の変更

背景は今の青色でも良いですが、気分を変えたいので違う色にしてみましょう。

ヒエラルキーウインドウの「SampleScene」を展開
→「Main Camera」をクリック

すると、インスペクターウインドウに「Main Camera」が持つ機能一覧が表示されます。

背景は画像でいう右側部分の「背景」で変更ができますので、こちらをクリックします。

クリックするとこのような画像選択のウインドウが表示されますので

お好きな色に設定してください。

今回、私は目に優しい画像のような薄い緑にしました。

4.ボタンの配置（1つ）

ボタンの生成

まず、ボタンを１つ作ります。

ヒエラルキーウインドウ →「+」ボタン
→「UI」
→「古い機能」
→「ボタン」


すると、ゲームビューの左下にボタンが生成されます。
また、ヒエラルキーにはCanvas、Button、EventSystemが生成されています。

Canvasは、ボタンやテキストなどを配置するスペースと考えていただければ良いでしょう。

EventSystemは、クリックなどを検出するものなので
消去せずにそのままにしておいてください。

ボタンの大きさ、位置変更

このままではボタンが押しづらいためボタンの大きさと位置を変更しましょう。

大きさと位置は、Button(Legacy)をクリックした後に表示されるインスペクターウインドウの
「位置X」、「位置Y」、「幅」、「高さ」にて設定します。

今回は以下のように設定しました。
位置X：0
位置X：0
幅：200
高さ：200

設定後は以下のようになります。

テキスト内容の変更

ボタンのテキスト内容を変更します。
変更する項目は、「テキストの文字」と「テキストの大きさ」になります。

こちらの編集画面を表示するには、以下のようにボタンの中のTextをクリックします。

ヒエラルキーウインドウ
→ Canvas - Button(Legacy) - Text(Legacy)

すると、インスペクターに下記画像のように編集画面が表示されます。
今回は、次のように変更します。
「テキスト」：1
「フォントサイズ」：110

5.ボタンの配置（9つ）

前項で作成したボタンを複製して９つのボタンを配置します。

ボタンの複製

ボタンを複製し、合計で９つのボタンを生成します。

Button(Legacy)を右クリックしてコピーを選択


その後、Button(Legacy)を右クリックして複製を選択


ボタンが複製されます。

複製を繰り返し、合計9個になるようボタンを生成してください。

ボタンの位置調整

9つのボタンは、現在同じ位置にあるため位置を調整する必要があります。

前述の位置を変更する方法で、一つずつ変更しても良いのですが、

今回は整列させるコンポーネントを使用し、配置します。

現在のゲームビュー

方法
→「Canvas」を選択
→「コンポーネントを追加」をクリック

→検索窓にGridと打ち込み、「Grid Layout Group」を選択
　

こうすることで、整列機能を持つ、「Grid Layout Group」コンポーネントが追加されます。



各種値を変更することで任意の配置とすることが可能です。
（各設定項目のご説明は省略します。）
・セルサイズ：X200 Y200
・間隔：X5 Y5
・子を整列：Middle Center
・制約：Fixed Column Count
　制約数：3


次のように配置ができます。

テキスト内容の変更

ボタンのテキストは1〜9としたいため、
Textの内容を全てのボタンで変更していきます。

以下の画像は、二つ目のボタンのテキストを変更した場合


同様にテキストを変更し、ボタンのテキストがそれぞれ1〜9となるようにします。

オブジェクト名の変更

ヒエラルキーを見ただけではどのボタンオブジェクトがゲームビューのボタンに
対応しているのかわかりづらい状態です。
そのため、ボタンのオブジェクト名を変更します。


変更方法は変更したいボタンオブジェクトを右クリックし「名前を変更」を選択します。


すると、名前変更モードになります。
画像で選択したボタンは「1」のボタンのため「BUtton 1」へ名前を変更します。


同様に1~9のボタンの名前を変更します。

以上でボタンの配置は完了です。

6.処理の作成

現在、ボタンが配置されているだけの状態です。
ゲームを実行する下記の実行ボタンを押し、
ゲームビューでボタンをクリックしても何も起きません。

実行ボタン

（実行中は編集が無効になります。忘れずに実行解除してくださいね。）

処理を実現するには、
「ボタンを1から順番に押していくとボタンが消える」処理を作成し、
ボタンへ処理内容を設定する必要があります。



では早速プログラムを書いていきましょう。
今回のプログラムを理解するためにはプログラムの事前知識が必要です。
簡単な説明を入れますが、プログラム自体はコピー&ペーストで進めていきます。

プログラムを学びたい方は、動画もしくは私が出版している書籍をご確認ください。
書籍は半分読んでいただければ、ゲームを１つ作りきるレベルに到達できます。

youtu.be


もっと早く教えてほしかった！Unity C#入門

新規スクリプトの作成

プログラムを書くファイルを作成します。
「プロジェクトウインドウ」
→ Assetsウインドウ
→ 右クリック
→ 作成
→ C#スクリプト

C#スクリプトファイルを新規作成すると
ファイルが生成されると同時にファイル名の編集モードになります。
ここで好きなファイル名を英字で書いてください。

注意！
新規作成直後に決定した名前がプログラムに反映されます。
そのため、名前をあとから変更した場合は、プログラムの内容も変更が必要です。
今回はシンプルに「A」という名前にしました。


スクリプト内容の編集

スクリプトファイル「A」をダブルクリックしファイルを開きます。
以下のようなプログラムが自動的に書かれているはずです。

では早速 次のコードをコピーして先ほど開いたファイルへ貼り付けます。

スクリプト内容の詳細は、
スクリプト内のコメントを読んでいただければおよそわかると思います。

大まかにいうと「スクリプト内で設定した変数の値」と「ボタンに登録した数字」が
同じであったらボタンを非表示にするという内容です。

using UnityEngine;
using UnityEngine.EventSystems;// EventSystem型を使用する時に必要

public class A : MonoBehaviour
{
    // int型の変数bを宣言
    int b;

    // EventSystem型の変数eventSystemを宣言　
    private EventSystem eventSystem;


    // スタート関数
    // 実行時に一度だけ処理
    void Start()
    {
        // 変数bへ1を代入
        b = 1;
    }


    // 関数Cの設定
    // 引数にint型のxを宣言
    public void C(int x)
    {
        // 変数bと引数xが等しいのか判定
        // 等しい場合　if文内の処理が実行
        if (b == x)
        {
            // 変数bへ 変数bに1を加算した値 を代入
            b = b + 1;

            // 有効なイベントシステムを取得
            eventSystem = EventSystem.current;

            // 現在選択されているゲームオブジェクトを取得
            GameObject g = eventSystem.currentSelectedGameObject;

            // 選択されたゲームオブジェクトを非アクティブ化
            g.SetActive(false);
        }

    }

}

7.ボタンへ処理の登録

スクリプトファイル「A」を空のオブジェクトへ登録

作成したスクリプトファイルを実行するには
オブジェクトにスクリプトファイルを割り当てる必要があります。
そのため、空のオブジェクトを作成し、スクリプトファイルを割り当てます。

ヒエラルキーウインドウ
→「＋」ボタン
→「空のオブジェクトを作成」

→作成された空のオブジェクト「GameObject」をクリック
→スクリプトファイル「A」を「GameObject」の
　インスペクターへドラッグアンドドロップ

ボタンへ処理の登録

Buttonのオブジェクトへスクリプトファイル「A」の関数Cを登録していきます。

「Button 1」 をクリックすると、インスペクターにButtonコンポーネントが表示されます。

クリック時()という部分が処理を登録する場所になりますのでここに関数Cを登録します。

関数の登録手順
→「+」ボタンを押す

押した後

「なし（オブジェクト）」と書いてある枠に
登録したいスクリプトが割りついているオブジェクトを紐付けます。

→ スクリプトファイル「A」が割りついているGameObjectを紐付け

紐付け後

紐付けたオブジェクトの どのスクリプトの関数を実行するかを設定します。

→ 「NoFunction」
→ スクリプト名「A」
→ 関数C(int)


これで登録ができました。
今回の関数は、ボタンに登録された数字を使うため
テキストが1のボタンなら1を、テキストが2のボタンなら2を登録します。

この要領で「Button 2」〜「Button 9」のそれぞれのボタンに処理の登録を行います。

8.実行

実行ボタンを押して動作確認してみましょう。
小さい番号のボタンを押したときだけボタンが消えます。

ボタンを押すと勝手にボタンが移動してしまいますね。
これはCanvasに追加した「Grid Layout Group」コンポーネントが
有効になっているためです。

移動させないようにするには、
このコンポーネントのチェックボックスを外し機能をオフにします。

オフにした結果が以下となります。

おわりに

スクリプトは一癖あったかもしれませんね。 なにか得るものがあれば幸いです。

講座紹介

marumaro7.hatenablog.com