【超簡単】unity2dで衝突時に画像を切り替える方法をわかりやすく解説

Unityで画像の切り替え方法を探している方向け。

例えばプレイヤーが爆弾に触れた時に爆弾の画像を爆発した画像に切り替えるような感じです。

コピペできるようにコード付きで本記事にてわかりやすく解説します。

この記事は以下のような方を対象者としています。

ゲームアプリ開発に興味がある方
ゲームアプリを個人開発している方
Unityで画像の切り替え方法がわからない方

Unity2Dでの画像切り替えの参考例
#

まずはこちらのgif画像をご覧ください。

キャラクターが爆弾の画像に衝突した時に、爆発後の画像に切り替わっています。

こちらのやり方を本記事にて詳細に説明していきたいと思います。

また今回参考例として使うアプリは、先日開発したJumping Quest（ジャンピングクエスト）という2Dゲームアプリを使って説明していきます。

小さいドット絵調のウサギがジャンプひとつで様々な世界を冒険するというコンセプトのゲームです。

ダウンロードして遊んでいただけると泣いて喜びます！

1.画像切り替え用のSpriteを用意する
#

まずは画像を表示するためのSpriteを生成しましょう。

Spriteとは簡単に言うとUnity2Dで使われる画像データです。

まずは添付画像のようにGameObject->2D Object->Sprites->Squareを選択しましょう。

するとゲーム画面上に白い四角の画像が表示されます。

2.Spriteに衝突できるようRigidbody2DとBoxCollider2Dを設定する
#

この辺りは本題にあまり関係がないので簡潔に説明します。

Rigidbody2DをSpriteにセットすることで物理挙動がつけられるようになります。

BoxCollider2Dはオブジェクトに衝突ができるようになります。

また、今回はキャラが爆弾の絵にぶつかっても爆弾自体の位置は動かしたくないので下記添付画像の通り値をセットします。

gravity（重力）を0にすることでオブジェクトが落下しないようにできます。

また、Freeze Position(位置固定)/Freeze Rotation(回転固定)でオブジェクトの位置や回転を制御できます。

3.ImageReplaceスクリプトを作成する
#

続いて本題の画像切り替え用のスクリプトを作成します

先ほど作成したSpriteをクリックし添付画像の通りimageReplace.csファイルを作成＆追加しましょう。

そしてこちらのスクリプトをコピペしてください。

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

public class bombController : MonoBehaviour
{
    // デフォルトの画像(爆弾の画像)
    public Sprite defaultImage;
    // デフォルトの画像(爆発後の画像)
    public Sprite explodeImage;
    // 画像描画用のコンポーネント
    SpriteRenderer sr;

    void Start() {
        // SpriteのSpriteRendererコンポーネントを取得
        sr = gameObject.GetComponent<SpriteRenderer>();
    }

    // Playerタグがついたオブジェクトと衝突した時に処理
    void OnCollisionEnter2D(Collision2D coll) {
        if (coll.collider.tag == "Player") {
            // デフォルトの画像を爆発後の画像に切り替える
            sr.sprite = explodeImage;
        } 
    }
}