【Unity入門】超初心者向け！UIボタンを押したらオブジェクトを出現させる方法

こんにちは、カバゴトです！今回は、ボタンを押したらオブジェクトを出現させる方法について超初心者向けに解説していきたいと思います。

UIとは？

UIとは「ユーザーインターフェース」の略です。

ゲーム内で言うところの、スタートボタンやアイテム表示をする画面のことです。

今回はUnityでUIを用いて、ボタンを作成します。

ボタン画面の作成

UIを出す

まず初めに、UIをUnityで表示させます。

Unityを起動させたら、「GameObject」→「UI」→「Canvas」の順にクリックします。

すると、すごくでかい四角で囲まれたものがでてきます。

これをカメラで写せるように調整します。

下の画像の左から順に、「Canvas」をクリックし、「Render Mode」→「World　Space」をクリックします。

次に、「Canvas」の座標や大きさなどを設定するので、下の真ん中のように数値を変えてください。

最後に、「Main　Camera」の座標や大きさを下の右側のように数値を変えてください。

この「World Space」とは、ゲームの中の世界にUIが配置されるという意味です。
他には、ScreenSpace-Overlay（常に画面最前面）やScreenSpace-Camera（指定のカメラに映るように配置）があります。今回は、画面がある座標にあるようにしたかったので、「World Space」にしました。

今回、カメラとUIの座標を指定しましたが、別に好きな座標でも構いません！（上の画像の数字）
自分が見やすいように配置してください!

好きな画像を貼り付ける

先ほど、作ったUIに画像を貼り付けます。

「Game Object」→「UI」→「Image」の順にクリックします。

こんな感じに白い板みたいなやつが出てくればOKです。

そして好きな画像を作ります。

引用元：Canvaホームページ

私はこのCanvaで画像を作成してみました。Canvaは、オンラインで使える無料のグラフィックデザインツールです。

自分オリジナルの画像を作るとき便利です！ぜひ使ってみてください！

例として私はこのような画像を作りました。（クオリティー低くてごめんなさい…）

大きさは1200×561pxに設定しています。

作成した画像を下の図のようにドラック＆ドロップします。

次に画像がUnityで使えるように設定します。

移動させた画像をクリックし、「Texture Type」→「Sprite(２D and UI)」の順にクリックします。

次に画像をUnityの画面に映します。

「image」を選択し、画像を「Source image」にドラッグ＆ドロップします。

そして、先ほどの画面の大きさを下の図のように設定します。

下の図のようになればOKです！

オブジェクトの準備

planeを配置する

まずは、pleneを配置します。「Game Object」→「３D Object」→「Plane」でplaneを出します。

planeの座標は下のようにしました。大きさや座標は好きにしてもらって大丈夫です！

Prefab化したオブジェクトの設置

Prefab化とは

Prefab化を超簡単に言うと、データを保存し、必要なときに再利用する仕組みです！

例えば、下のような武器があったとしよう。それをデータ化して強化だったり、使えるようにしています。

Unityで使うと下のようになります。

赤いキューブというデータを作るためPrefab化しました。

こんな感じに使えます。

Prefab化したオブジェクトを準備する

では、実際にオブジェクトを準備します。

「Game object」→「3DObject」→「Cube」・「Sphere」・「Cylinder」でオブジェクトを出します。

このオブジェクトをPrefab化します。下のようにHierarchyビューからProjectビューへドラッグ＆ドロップします。

次にMaterial（色）を作ります。

「Asset」→「Create」→「Material」で色を作ります。そして、下の図のように色を設定します。（私は赤にしましたが好きな色にしてもらっても構いません）

そして、作ったMaterialをPrefab化したオブジェクトにドラッグ＆ドロップします。

最後にHierarchyビューにある３Dオブジェクトを消します。（右クリック→Deleteで消せます）

buttonを設置する

最初に作ったUIにbuttonを追加します。「Canvas」右クリック→「UI」→「button」の順にクリックします。

おそらく、この画面が出てくるので、「Import TMP Essentials」をクリックします。

ボタンを3つ作り、大きさや位置を変えていい感じに配置しましょう。そして、名前も右クリックで変えましょう！

「Button」の左にある▷をクリックして「Text」から画面上のボタンのテキストを変更します。（3つとも）

以上でボタン設置完了です！

Script作成（ボタンを押したらオブジェクトを出現）

次に、ボタンを押したらオブジェクトを出現させるスクリプトを作ります。

スクリプトとは何か分からな人、コードを書き方が分からない人は下の記事を参考にしてみてください。

カバと学ぶUnity

【超初心者向け】Unityでスクリプトを作る方法 | こんにちは、カバゴトです！今回は、Unityでスクリプトを作る方法について超初心者向けに解説していきたいと思います。 スクリプトとは？ スクリプトとは、簡単に言うと、…

「Assets」→「Create」→「C＃Script」でスクリプトを新しく作ります。

スクリプトを作ったら、名前を変えて、openをクリックします。（私は、「appear」という名前にしました）

下にコードを示します。コードの解説は後ほど行いますが、全く分からない人はとりあえずコピペしてみてください。

Ctrl＋ｓを忘れずに！（保存）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIを使用します

public class apppear : MonoBehaviour  //appearという名前のクラスを定義します
{
    public GameObject cubePrefab;// 出現させるオブジェクトを保存しておくGameObejct型の変数

    public Vector3 potision;//出てくるオブジェクトの場所を決めます（宣言）


    private void Start()
    {
        Button objectAppeaButton = GetComponent<Button>();//ボタン要素を取得します

        objectAppeaButton.onClick.AddListener(SpawnCubeAtPosition);//objectAppearButtonがボタンを押されたときに、SpawnCubeAtPositionという名前の関数を呼びます
    }


    public void SpawnCubeAtPosition()//SpawnCubeAtPositionという名前の関数です
    {

       Instantiate(cubePrefab, potision, Quaternion.identity); // 変数cubePrefabに保存されたオブジェクトを変数positionの位置に出現させます。

    }
}

スクリプトをButtonにドラッグ＆ドロップしてください（3つとも）

そして、「CubeButton」、「SphereButton」、「CylinderButton」をクリックし、それぞれのボタンで出現させたいオブジェクトを右側の「None」にドラッグ＆ドロップし、それぞれのオブジェクトのポジションを指定します。（座標を決めます）

ポジションは下のようにしましたが、好きなようにしてもらって構いません！

これで、スクリプトは完成です！

RigidBodyの設定

Prefab化したオブジェクト「Cube」、「Sphere」、「Cylinder」をそれぞれクリックし、右側の「Add　Component」→「Physics」→「Rigidbody」の順にクリックし、重力を追加します。

これですべて完成です！

実行

では、実際に実行してみます。

ボタンをクリックしたら、オブジェクトが出現しています！

終わりに

最後まで読んでくださりありがとうございます！今回は、UIボタンを押したらオブジェクトを出現させる方法について解説しました！もし、うまくいない場合や意見等あればコメントの方をよろしくお願いします！

この記事が参考になれば幸いです。また、次回のブログでお会いしましょう！

コードの説明（詳しく知りたい方へ）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIを使用します

public class apppear : MonoBehaviour  //appearという名前のクラスを定義します
{
    public GameObject cubePrefab;// 出現させるオブジェクトを保存しておくGameObejct型の変数

    public Vector3 potision;//出てくるオブジェクトの場所を決めます（宣言）


    private void Start()
    {
        Button objectAppeaButton = GetComponent<Button>();//ボタン要素を取得します

        objectAppeaButton.onClick.AddListener(SpawnCubeAtPosition);//objectAppearButtonがボタンを押されたときに、SpawnCubeAtPositionという名前の関数を呼びます
    }


    public void SpawnCubeAtPosition()//SpawnCubeAtPositionという名前の関数です
    {

       Instantiate(cubePrefab, potision, Quaternion.identity); // 変数cubePrefabに保存されたオブジェクトを変数positionの位置に出現させます。

    }
}

public GameObject cubePrefab;、public Vector3 potision;は、オブジェクトを保存するGameObject型の変数とオブジェクトの場所を決める変数を定義するコードです。

Button objectAppeaButton = GetComponent();はボタンコンポーネントを取得するものです。これはすでにUnityで用意されているものであり、下の画像のことを指します。

また、objectAppeaButton.onClick.AddListener(SpawnCubeAtPosition);buttonがクリックされたときSpawnCubeAtPositionという名前の関数を呼びます。

SpawnCubeAtPosition関数は、オブジェクトを出現させるもので、(cubePrefab, potision, Quaternion.identity)は（何を、位置、回転）を指定します。