Unityで触れたオブジェクトの色によって画像を切り替える方法

はじめに
まとめ
おすすめのアセット
1. 関連記事:

はじめに

Unityを使ってゲームを作るとき、プレイヤーが特定のオブジェクトに触れたときにアクションを起こすのはよくあることです。今回は、プレイヤーが赤や青のボールに触れたときに、それぞれの色に対応した画像を画面に表示する方法を解説します。

Youtubeで見る

準備するもの

Unityプロジェクト
赤と青のボールオブジェクト
赤と青の画像

ステップ1：ボールをシーンに追加

まず、赤と青のボールをシーンに追加します。

ヒエラルキーウィンドウで右クリックします。
「3D Object」→「Sphere」を選びます。
作成したSphereを「RedSphere」と名前を変更し、Materialを使用して赤色に設定します。
同じようにして、もう一つのSphereを作成し、「BlueSphere」と名前を変更して青色に設定します。

【Unityの使い方】Materialについて

ステップ2：プレイヤーをシーンに追加

プレーヤーも3D Objectを使用して作成します。プレーヤー用のCubeを「Player」と名付け、好みの色や形を設定しましょう。

ヒエラルキーウィンドウで右クリックします。
「3D Object」→「Cube」を選びます。
作成したCubeを「Player」と名前を変更し、好みの色を設定しましょう。
inspector画面AddComponentからRigidbodyを検索してアタッチし、UseGravityのチェックを外します。

【Unityの使い方】Rigidbodyについて

ステップ3：画像を準備する

赤と青の画像を用意する。

用意した赤と青の画像をUnityにインポートします。
inspector画面からインポートした画像のTextureTypeをSpriteに変更します。

インポートした画像を表示するためのUIを設定します。

ヒエラルキーウィンドウで右クリックします。
「UI」→「Image」を選びます。

ステップ4：スクリプトを作成する

プレイヤーがボールに触れたときに画像を表示するスクリプトを作成します。

プロジェクトウィンドウで右クリックします。
「Create」→「C# Script」を選びます。
スクリプトに「CubeMove」と名前を付けて開き、以下のコードを入力します。

【Unityの使い方】C#スクリプト

スクリプトの解説

コード全体の説明

キューブが左右・前後に動く。
赤い球（RedSphere）や青い球（BlueSphere）に衝突すると、指定された画像を表示する。
衝突が終了すると、画像が非表示になる。

各部分の説明

using UnityEngine;
using UnityEngine.UI;

public class CubeMove : MonoBehaviour
{
    [SerializeField] Sprite imageRed;
    [SerializeField] Sprite imageBlue;
    [SerializeField] Image myPhoto;
    private float speed = 3.0f;

using UnityEngine; と using UnityEngine.UI; は、Unityの基本機能とUI機能を使えるようにします。
public class CubeMove : MonoBehaviour は、このクラスがUnityのMonoBehaviourを継承していることを示します。
[SerializeField] は、Unityのインスペクターで変数を設定できるようにするためのものです。Spriteは画像を、ImageはUI画像を表示するためのコンポーネントを指します。
private float speed = 3.0f; は、キューブの移動速度を設定しています。

`Start`メソッド

void Start()
{
    myPhoto = GameObject.Find("Image").GetComponent<Image>();
    myPhoto.enabled = false;
}

Startメソッドは、ゲーム開始時に一度だけ呼ばれます。
GameObject.Find("Image").GetComponent<Image>()でシーン内の「Image」オブジェクトを見つけ、そのImageコンポーネントを取得します。
myPhoto.enabled = false; で、最初は画像を非表示にしています。

`Update`メソッド

void Update()
{
    float moveX = Input.GetAxis("Horizontal") * Time.deltaTime * speed;
    float moveZ = Input.GetAxis("Vertical") * Time.deltaTime * speed;
    transform.position = new Vector3(
        transform.position.x + moveX,
        transform.position.y,
        transform.position.z + moveZ
    );
}

Updateメソッドは毎フレーム呼ばれます。
Input.GetAxis("Horizontal")とInput.GetAxis("Vertical")でプレイヤーの入力を取得します。これでキーボードの矢印キーやWASDキーの入力を検知します。
Time.deltaTimeは、前フレームからの経過時間を示します。これを使うことで、フレームレートに依存しない動きを実現しています。
キューブの位置を新しい位置に更新します。

`OnCollisionEnter`メソッド

void OnCollisionEnter(Collision other)
{
    if (other.gameObject.name == "RedSphere")
    {
        myPhoto.enabled = true;
        myPhoto.sprite = imageRed;
    }

    if (other.gameObject.name == "BlueSphere")
    {
        myPhoto.enabled = true;
        myPhoto.sprite = imageBlue;
    }
}

OnCollisionEnterメソッドは、キューブが他のオブジェクトに衝突したときに呼ばれます。
衝突したオブジェクトの名前が「RedSphere」なら、myPhotoを表示し、imageRedを設定します。
衝突したオブジェクトの名前が「BlueSphere」なら、myPhotoを表示し、imageBlueを設定します。

`OnCollisionExit`メソッド

void OnCollisionExit(Collision other)
{
    if (other.gameObject.name == "RedSphere")
        myPhoto.enabled = false;

    if (other.gameObject.name == "BlueSphere")
        myPhoto.enabled = false;
}

OnCollisionExitメソッドは、キューブが他のオブジェクトとの衝突を終了したときに呼ばれます。
衝突終了したオブジェクトの名前が「RedSphere」または「BlueSphere」なら、myPhotoを非表示にします。

全体の動き

ゲームが始まると、myPhotoが非表示になります。
プレイヤーがキーボードを使ってキューブを左右・前後に動かします。
キューブが「RedSphere」または「BlueSphere」に衝突すると、対応する画像が表示されます。
衝突が終了すると、画像は再び非表示になります。

using UnityEngine;
using UnityEngine.UI;

public class CubeMove : MonoBehaviour
{
    [SerializeField] Sprite imageRed;
    [SerializeField] Sprite imageBlue;
    [SerializeField] Image myPhoto;
    private float speed = 3.0f;


    void Start()
    {
        myPhoto = GameObject.Find("Image").GetComponent<Image>();
        myPhoto.enabled = false;
    }

    void Update()
    {
        float moveX = Input.GetAxis("Horizontal") * Time.deltaTime * speed;
        float moveZ = Input.GetAxis("Vertical") * Time.deltaTime * speed;
        transform.position = new Vector3(
        transform.position.x + moveX,
        transform.position.y,
        transform.position.z + moveZ
        );
    }

    void OnCollisionEnter(Collision other)
    {
        if (other.gameObject.name == "RedSphere")
        {
            myPhoto.enabled = true;
            myPhoto.sprite = imageRed;
        }

        if (other.gameObject.name == "BlueSphere")
        {
            myPhoto.enabled = true;
            myPhoto.sprite = imageBlue;
        }
    }

    void OnCollisionExit(Collision other)
    {
        if (other.gameObject.name == "RedSphere")
            myPhoto.enabled = false;

        if (other.gameObject.name == "BlueSphere")
            myPhoto.enabled = false;
    }
}

ステップ5：スクリプトをオブジェクトにアタッチする

作成したスクリプトをプレイヤーにアタッチします。

ヒエラルキーウィンドウでプレイヤーオブジェクト（Cube）を選びます。
スクリプトをドラッグ＆ドロップしてプレイヤーオブジェクトにアタッチします。
インスペクターウィンドウで「CubeMove」コンポーネントを確認し、赤と青のSpriteをそれぞれドラッグして「imageRed」と「imageBlue」に設定し、MyPhotoにUI画像を表示するためのコンポーネントを設定します。

ステップ6：動作確認

すべての設定が完了したら、シーンを再生してプレイヤーを赤や青のボールに接触させてみてください。それぞれのボールに触れると、対応する色の画像が表示されるはずです。

まとめ

これで完成です！プレイヤーが赤や青のボールに触れたときに対応する色の画像を表示する方法がわかりましたね。色々な応用が考えられるので、ぜひ試してみてください。