【Unity】ソースコードコピペ可能！マリオ風2Dアクションゲームの作り方 #6 コイン（収集アイテム） / 破壊可能ブロック

はじめに
コインの追加
破壊可能レンガの追加
- オブジェクトの追加 / スクリプトの編集
- プレハブの作成
今回の進捗 / ソースコード
さいごに

はじめに

どうも。Unity2Dアクションゲーム制作第６回です。

今回は収集可能なコインと、下からジャンプして叩くことで壊れるブロックを作ります。

前回：

www.umagame.info

コインの追加

オブジェクトの作成・スプライト

まず、コインの追加を行います。

今回はこんなスプライトを用意しました。

見た目はコインですが、元ネタ（ウマ娘）ではマニーという名前なのでUnity内ではこっちに合わせます。

画像のインポート・設定（やり方は第２回または第３回参照）をしたら、画像をそのままシーン内にドラッグアンドドロップして新たにオブジェクトを作成します。（ヒエラルキー内で右クリック→作成でも可）

名前もちゃんと変えておきます。

新しくスクリプトを作ります。

コイン以外にも回収可能なアイテムを作る可能性があるので、名前はCollectable（収集可能）にします。

//Collectable
public class Collectable : MonoBehaviour
{
    public string ID;

    void Start()
    {
        
    }

    void Update()
    {
        //Rotation
        this.transform.Rotate(0, 0.3f, 0);
    }
}

コードはこんな感じです。publicのstring型変数IDを持ち、毎フレーム0.3°だけY軸が回転します。

スクリプトをMoneyオブジェクトに適用して、IDを「money」に設定します。このIDは後ほど使います。

これでテストプレイすると、コインが回転します。現時点では、コインに触れても何も起きません。

トリガーの設定

先程作成したMoneyのオブジェクトにコライダーを追加します。円の形なので、「Circle Collider 2D」を使います。

ここで、「トリガーにする」にチェックを入れます。

コライダーをトリガーとして使うと、他のオブジェクトとの当たり判定がなくなりますが他のオブジェクトと重なりを検知することが出来ます。

そして、Player.csに以下のコードを追加します。

//Player.cs
public class Player : MonoBehaviour
{

    public int Money = 0;

    private void OnCollisionEnter2D(Collision2D collision)
    {
        //コード簡略化のためにobjを追加
        GameObject obj = collision.gameObject;

        //InstaDeath
        if (obj.CompareTag("InstaDeath"))
        {
            SceneManager.LoadScene("SampleScene");
        }
    }

    private void OnTriggerEnter2D(Collider2D collision)
    {
        //コード簡略化のためにobjを追加
        GameObject obj = collision.gameObject;

        //Collectable
        if (obj.GetComponent<Collectable>() != null)
        {
            if(obj.GetComponent<Collectable>().id == "money")
            {
                Money++;
                GameObject.Destroy(obj);
            }
        }
    }
}

トリガーに設定したコライダーとの接触時に、OnTriggerEnter2Dというメソッドが呼び出されます。

そのトリガーがCollectable（回収可能なアイテム）かどうかを判定して、そのIDが"money"であれば以下の処理を実行します。

public int変数であるMoneyを1増やす（Moneyは獲得したコインの総数です）
コインのオブジェクトを削除

トリガーのオブジェクト（この場合はコインのオブジェクト）はOnCollsionEnter2Dと同様にcollision.gameObjectで取得できますが、長いのでobjという名前の変数に格納して使うようにしています。

前回（第５回）に追加したOnCollsionEnter2Dでもobjを使うように修正しておきました。

UIの追加

コインを取得した数をテキストで表示するようにします。

ヒエラルキーで右クリック→UI→「テキスト - TextMeshPro」をクリック。

名前はMoneyTextにします。

TextMeshProを初めて作成したときは、このようなウィンドウが開きます。

上の「Import TMP Essentials」をクリックして、TMP Essentialsをインポートしましょう。これはTextMeshProを使う際に必須となります。

下の「TMP Examples & Extras」はあってもなくてもどちらでも良いです。私はインポートしませんでした。

テキストを追加しましたが、シーン内にそれらしきものは見えないと思います。

それもそのはずで、このように初期設定のままだとテキストが作ったマップと比べてとてつもなく大きくなってしまっています。

ちなみに、右上のやつはCanvas（テキストなどのUIを配置するエリア）の中心です。

まず、Canvasをカメラ（Main Camera）の子オブジェクトにします。CanvasをMain Cameraにドラッグアンドドロップしてください。

これで、テキストを含むUIがカメラに追従するようになります。

次にCanvasのインスペクターから、「レンダーモード」を「ワールド空間」に設定して、

テキスト（MoneyText）の位置と幅、高さをこのように設定します。

するとこのような黄色の枠が表示されるので、位置を移動させ、黄色の枠が横長になるようにします。

テキストのインスペクターの「Font Size」を小さくします。今回は0.5にしました。

テキストの内容（初期設定では「New Text」になっていると思います）は変更しなくて良いです。

画像UI / テキスト制御スクリプト

画像のUIも追加します。

Canvasを右クリック→UI→「画像」をクリック。

名前はMoneyIconにします。

幅・高さを1に設定します。幅と高さの比はテクスチャに合わせてください。今回は正方形のテクスチャ（幅：高さ=1:1）なのでどちらも1にしています。

テキストの隣に置きます。

そして、画像ファイルを「ソース画像」にドラッグアンドドロップして画像を設定します。

画像のアニメーションとテキストの変更を行うスクリプトを作成します。名前はGameManagerにします。（正直名前は何でも良いです）

//GameManager.cs
public class GameManager : MonoBehaviour
{
    public TextMeshProUGUI MoneyText;
    public UnityEngine.UI.Image MoneyIcon;

    public Player PlayerObj;

    void Start()
    {
        
    }

    void Update()
    {
        MoneyIcon.GetComponent<RectTransform>().Rotate(0, 0.3f, 0);

        MoneyText.text = ":" + PlayerObj.Money
    }
}

中身はこんな感じです。

Update()にコインの画像を回転させる処理と、テキストにPlayer.Moneyを表示する処理を書いています。

作ったスクリプトを適用します。新たに空のオブジェクトを追加してもいいのですが、今回はTextMeshProを作成した際に追加に作成されたEventSystemを使おうと思います。

テキスト、画像、プレイヤーのオブジェクトを設定します。

これで、コインを取得した際にその数が表示されるようになりました。

これでコインの実装は完了ですが、複数のコインをマップ上に置くのでもう少しだけ作業が必要です。

まず、新しく空のオブジェクトを作成します。これはコインをたくさんコピーしたときに、ヒエラルキーがコインまみれにならないようにするためだけのオブジェクトです。

名前はMoneyObjectsにしておきます。

MoneyオブジェクトをMoneyObjectsにドラッグアンドドロップして、子オブジェクトにします。

次に、プレハブ用のフォルダを作ります。プレハブとは、同じオブジェクトをコピーしてたくさんシーンに置くために使う設計図のようなものです。

名前はPrefabsにします。

PrefabsフォルダにMoneyオブジェクトをドラッグアンドドロップして、Moneyのプレハブを作ります。

その後Moneyのコピー＆ペーストを繰り返して、マップにコインを配置します。

配置する際は、グリッドスナップと呼ばれる機能を使うと便利です。

シーン上部のメニューを上画像のように設定して、グリッドスナップの「グリッドサイズ」をいじることでグリッドに合わせてオブジェクトを配置できるようになります。

（左から「ピボット」、「グローバル」となるようにして、磁石のアイコンをクリック）

プレハブの便利なところは、この多くのMoneyオブジェクトの設定を変えようとした際に、プレハブ側の設定を変えるだけでマップ上のすべてのMoneyオブジェクトも変更されるということです。

プレハブの設定を変える際は、Prefabsフォルダに作ったプレハブをダブルクリックすると編集画面に移ることが出来ます。

これでコインは完成です。

破壊可能レンガの追加

オブジェクトの追加 / スクリプトの編集

次に、下から叩くと壊れるブロックを追加します。

前回（第５回）と同様にタイルのテクスチャファイルを更新し、Sprite Editorからスライスし直します。今回は４種類のレンガのテクスチャを用意しました。

右クリック→「2Dオブジェクト」→「スプライト」→「正方形」から新しくオブジェクトを作成し、

スプライトを適用します。（名前はBreakableBricksとしました）

コライダー（Box Collider 2D）を追加します。

そして、破壊可能かどうかを判別できるようにタグを追加します。タグ→「タグを追加」をクリック。

名前はBreakableとしておきます。

これでブロック側の設定は完了...と言いたいところですが、

こちらもタイルマップ同様に移動キーを押しながら側面に接触すると引っかかりますので、これを修正しておきます。

修正方法は前回（第５回）と同じです。「Platform Effector 2D」を追加して、

「エフェクターで使用」をオンに、「１方向の衝突判定を使用」をオフにするだけです。

あとはPlayer.csを少しいじるだけでOKです。

//Player.cs
private void OnCollisionEnter2D(Collision2D collision)
{
    GameObject obj = collision.gameObject;

    //InstaDeath
    if (obj.CompareTag("InstaDeath"))
    {
        SceneManager.LoadScene("SampleScene");
    }

    //Breakable
    BoxCollider2D c = GetComponent<BoxCollider2D>();
    if (obj.CompareTag("Breakable") && rb.velocity.y == 0 &&
        obj.transform.position.y - obj.GetComponent<Collider2D>().bounds.size.y / 2 >= this.transform.position.y)
    {
        GameObject.Destroy(collision.gameObject);
    }
}