UnityUnityメモ

Unityで触れたオブジェクトの色によって画像を切り替える方法【初心者向け解説】

Unity

1. はじめに

この記事では、プレイヤーが赤や青のボールに触れたときに、それぞれの色に対応した画像を画面に表示する仕組みを作ります。

この機能は、簡単なゲームでのインタラクションや学習プロジェクトで役立つだけでなく、Unityの基本操作やスクリプト作成のスキルを磨くことにもつながります。

Unityの基本操作を押さえながら進められる内容になっているので、ぜひ楽しんで学んでください!

Unityを触ったことがないという方はコチラの記事から読んでみてください!



2. 必要な準備

Unityで赤や青のボールに触れたときに画像を表示する仕組みを作るには、プロジェクトの作成と素材の準備が必要です。ここでは、それらの手順を詳しく説明します。


1. Unityプロジェクトの作成

まず、Unityで新しいプロジェクトを作りましょう。

  1. Unity Hubを起動
    お使いのPCでUnity Hubを起動し、画面上部の「新しいプロジェクト」ボタンをクリックします。
  2. テンプレートを選択
    テンプレート選択画面で「3D」を選び、プロジェクト名を入力します。名前は「ColorBallImage」など、内容が分かりやすいものにするとよいでしょう。
  3. プロジェクトを作成
    「プロジェクトを作成」ボタンを押すと、Unityエディターが開きます。これで、新しいプロジェクトが作成されました。

2. 赤と青の画像を用意

次に、赤色と青色の画像を用意します。この画像は、プレイヤーがボールに触れたときに画面に表示されるものです。

画像の作成またはダウンロード

  • 自作する場合
    PhotoshopやCanvaなどの画像編集ソフトを使って、赤と青の画像を作成します。サイズは256×256ピクセル程度が適切です。
  • ダウンロードする場合
    無料素材サイト(例: UnsplashやPexels)を利用して、赤や青を基調とした画像をダウンロードしてください。

ファイル形式はPNG形式が推奨されます。画像の名前は分かりやすくRedImage.pngBlueImage.pngと付けておきましょう。


3. Unityに画像をインポート

用意した画像をUnityに取り込みます。

  1. 画像のインポート
    UnityエディターのProjectウィンドウを開きます。画像ファイルをドラッグ&ドロップして、プロジェクトに追加します。
  2. Texture Typeを変更
    インポートした画像を選択し、Inspectorウィンドウで以下の設定を行います。
    • Texture Type: 「Sprite (2D and UI)」に変更
    • Applyボタン: 設定を反映するために「Apply」をクリック

これで、Unityプロジェクトの準備と画像のインポートが完了です。次のセクションでは、シーンに赤と青のボールを配置し、プレイヤーを作成する方法を解説します。



3. シーンの設定

このセクションでは、Unityシーン内に赤と青のボールを配置し、プレイヤーを作成する手順を解説します。さらに、物理的な動作を実現するためにRigidbodyの設定も行います。


1. 赤と青のボールを配置

Unityのシーンに赤と青のボールを配置し、それぞれの色を設定します。

赤いボールを作成

  1. ヒエラルキーウィンドウで右クリック
    「3D Object」→「Sphere」を選びます。これでシーン内に球体(Sphere)が追加されます。
  2. 名前を変更
    作成したSphereを選択し、Inspectorウィンドウで名前を「RedSphere」に変更します。
  3. 赤色のMaterialを設定
    • Projectウィンドウで右クリックし、「Create」→「Material」を選びます。
    • 新しいMaterialを「RedMaterial」と命名し、Inspectorウィンドウで「Albedo」カラーを赤色に設定します。
    • 作成したMaterialをRedSphereにドラッグ&ドロップして適用します。

青いボールを作成

  1. 同様の手順で作成
    再び「3D Object」→「Sphere」を選び、名前を「BlueSphere」に変更します。
  2. 青色のMaterialを設定
    「RedSphere」の手順を参考に、青色のMaterialを作成し、BlueSphereに適用します。

2. プレイヤーの作成と設定

プレイヤーとなるオブジェクトをシーンに配置し、移動できるように設定します。

  1. Cubeを作成
    ヒエラルキーウィンドウで右クリックし、「3D Object」→「Cube」を選びます。これがプレイヤーになります。
  2. 名前を変更
    Cubeを選択し、Inspectorウィンドウで名前を「Player」に変更します。
  3. プレイヤーの色や形を設定
    • 必要に応じてMaterialを作成し、Cubeに適用します。
    • CubeのTransform(位置やスケール)を調整して、好みの形やサイズにします。
  4. Rigidbodyを追加
    • Playerオブジェクトを選択し、Inspectorウィンドウの「Add Component」をクリックします。
    • 検索ボックスで「Rigidbody」と入力し、Rigidbodyコンポーネントを追加します。
    • Rigidbodyの「Use Gravity」のチェックを外します(プレイヤーが落下しないようにするため)。

これで赤と青のボール、そしてプレイヤーの配置と設定が完了しました。次のセクションでは、UIの設定と画像表示の準備を進めます!




4. UIの設定

このセクションでは、プレイヤーがボールに触れたときに画像を表示するためのUI設定を行います。具体的には、UnityのUIシステムを使用して画像を表示する仕組みを作ります。


1. UI Imageの作成

プレイヤーがボールに触れた際に表示される画像の配置場所を作成します。

  1. ヒエラルキーウィンドウで右クリック
    「UI」→「Image」を選びます。これで画面にImageオブジェクトが追加されます。
  2. 名前を変更
    追加されたImageオブジェクトを選択し、Inspectorウィンドウで名前を「Image」に変更します。
  3. サイズと位置を調整
    • Rect Transformを使い、画面の中央にImageを配置します。
    • サイズを調整して、画像が適切な大きさで表示されるように設定します(例: 256×256)。
  4. Imageの初期状態を非表示にする
    Inspectorウィンドウで「Image」コンポーネントの「Enabled」チェックボックスを外します。これにより、ゲーム開始時に画像が表示されなくなります。

2. インポートした画像をUIに設定

次に、Unityにインポートした赤と青の画像をUIに関連付けます。

  1. 画像の確認
    Projectウィンドウで、事前にインポートした赤と青の画像(RedImage.pngBlueImage.png)があることを確認します。
  2. 画像の設定
    • 赤と青の画像をそれぞれ選択し、Inspectorウィンドウで以下の設定を確認します。
      • Texture Type: 「Sprite (2D and UI)」になっていることを確認。
    • 設定を変更した場合は「Apply」をクリックして反映します。

3. UIオブジェクトのテスト

ここまでの設定を確認するために、簡単なテストを行いましょう。

  1. UIが画面に表示されるか確認
    ヒエラルキーウィンドウでImageオブジェクトを選択し、Inspectorウィンドウで「Enabled」をオンにします。再生モードで画像が表示されるか確認します。
  2. UIの表示状態を元に戻す
    テストが完了したら、「Enabled」のチェックを再び外して初期状態に戻します。

これで、ボールに触れたときに画像を表示する準備が整いました。次のセクションでは、プレイヤーが動き、ボールに触れた際に画像を切り替えるスクリプトを作成します。



5. スクリプトの作成

このセクションでは、プレイヤーが赤や青のボールに触れたときに、それぞれ対応する画像を画面に表示するスクリプトを作成します。さらに、プレイヤーを動かすスクリプトも組み込みます。


1. スクリプトの新規作成

まずは、スクリプトファイルを作成します。

  1. プロジェクトウィンドウで右クリック
    **「Create」→「C# Script」**を選び、新しいスクリプトを作成します。
  2. スクリプト名を変更
    スクリプトの名前を「CubeMove」に変更します。
  3. スクリプトを開く
    作成したスクリプトをダブルクリックして、コードエディター(Visual StudioやRider)で開きます。

2. スクリプトの記述

以下のコードを入力してください。

コード全体の説明

  • キューブが左右・前後に動く。
  • 赤い球(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;
  1. using UnityEngine;using UnityEngine.UI; は、Unityの基本機能とUI機能を使えるようにします。
  2. public class CubeMove : MonoBehaviour は、このクラスがUnityのMonoBehaviourを継承していることを示します。
  3. [SerializeField] は、Unityのインスペクターで変数を設定できるようにするためのものです。Spriteは画像を、ImageはUI画像を表示するためのコンポーネントを指します。
  4. 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を非表示にします。

全体の動き

  1. ゲームが始まると、myPhotoが非表示になります。
  2. プレイヤーがキーボードを使ってキューブを左右・前後に動かします。
  3. キューブが「RedSphere」または「BlueSphere」に衝突すると、対応する画像が表示されます。
  4. 衝突が終了すると、画像は再び非表示になります。
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" || other.gameObject.name == "BlueSphere")
        {
            myPhoto.enabled = false;
        }
    }
}

3. スクリプトのアタッチ

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

  1. ヒエラルキーウィンドウでPlayerオブジェクトを選択
    プレイヤーとして作成したCubeをクリックします。
  2. スクリプトをアタッチ
    作成した「CubeMove」スクリプトをPlayerオブジェクトにドラッグ&ドロップします。
  3. Inspectorウィンドウで設定
    • imageRed: 赤色のSprite画像をドラッグして設定します。
    • imageBlue: 青色のSprite画像をドラッグして設定します。
    • myPhoto: UIのImageオブジェクト(名前が「Image」)をドラッグして設定します。

これでスクリプトの設定が完了しました。次のセクションでは、動作確認と追加機能のアイデアについて説明します!



6. 動作確認と改善案

ここまでで、シーン設定とスクリプト作成が完了しました。このセクションでは、プロジェクトをテストして正しく動作するか確認します。さらに、追加機能のアイデアも提案します。


1. 動作確認

ゲームをプレイしてテスト

  1. 再生ボタンをクリック
    Unityエディター上部の「▶(再生ボタン)」をクリックして、シーンを実行します。
  2. プレイヤーを操作
    キーボードの矢印キーまたは「WASD」キーでプレイヤーを移動させます。
  3. ボールに触れる
    赤いボール(RedSphere)または青いボール(BlueSphere)にプレイヤーを接触させてみてください。
    • 赤いボールに触れると、赤色の画像が画面に表示されます。
    • 青いボールに触れると、青色の画像が画面に表示されます。
    • ボールから離れると、画像が非表示になります。

2. トラブルシューティング

もし正しく動作しない場合は、以下を確認してください。

  1. オブジェクト名の確認
    スクリプトで指定したオブジェクト名(RedSphere、BlueSphere)が、ヒエラルキーウィンドウの名前と一致しているか確認します。
  2. UI設定の確認
    Inspectorウィンドウで以下の設定が正しいか確認してください。
    • imageRedimageBlueに適切なSprite画像が設定されているか。
    • myPhotoにUIのImageコンポーネントが設定されているか。
  3. Rigidbodyの設定
    プレイヤーオブジェクト(Player)にRigidbodyが追加され、Use Gravityがオフになっているか確認します。
  4. スクリプトエラーの確認
    コンソールウィンドウにエラーメッセージが表示されていないか確認してください。

3. 改善案と追加機能

プロジェクトにさらなる魅力を加えるために、以下の機能を追加することを検討してください。

1. 複数の色のボール

  • 他の色(例: 緑や黄色)のボールを作成し、対応する画像を追加しましょう。
  • スクリプト内に新しい条件を追加して処理を拡張します。

2. スコア機能の実装

  • プレイヤーがボールに触れるたびにスコアを加算する仕組みを追加します。
  • UnityのTextコンポーネントを使用して画面にスコアを表示します。

3. タイマーの導入

  • 制限時間内にできるだけ多くのボールに触れるゲームにアレンジできます。
  • タイマーを表示して時間切れを知らせる機能を追加します。

4. 音声エフェクト

  • ボールに触れた際に、色ごとに異なる音声エフェクトを再生します。
  • UnityのAudioSourceコンポーネントを使用して簡単に追加可能です。



よくある質問

Q
スクリプトが動作しません。エラーが出ています。
A

エラーが発生する場合、以下の点を確認してください。

  1. スクリプト内で指定したオブジェクト名(例: RedSphere, BlueSphere)が、ヒエラルキーウィンドウの名前と一致しているか確認してください。名前が一致しないとスクリプトが正しく動作しません。
  2. コンソールウィンドウを確認
    • Unityエディター下部のコンソールウィンドウに表示されるエラーメッセージを読んでみましょう。エラーの原因と解決方法のヒントが記載されています。
  3. 必要なコンポーネントがアタッチされているか確認します。特に、Imageコンポーネントが正しく設定されているかが重要です。
Q
ボールに触れても画像が表示されません。
A

この問題が発生する場合、以下の点を確認してください。

  1. UI Imageの設定
    • Imageオブジェクトが正しく設定されているか確認します。特に「myPhoto」にImageコンポーネントがアタッチされているか確認してください。
  2. Spriteの設定
    • 赤や青の画像が「imageRed」と「imageBlue」に正しくドラッグ&ドロップされているか確認します。
  3. オブジェクトのタグや名前
    • スクリプト内で使用しているRedSphereBlueSphereが正しいオブジェクトを指しているか確認してください。
Q
プレイヤーが動きません。
A

プレイヤーが動かない場合、以下を確認してください。

  1. スクリプトのUpdateメソッドで、入力キー(HorizontalVertical)が正しく取得されているか確認します。キーボードの矢印キーやWASDキーで操作できるはずです。
  2. Rigidbodyの設定
    • PlayerオブジェクトにRigidbodyが追加されているか確認してください。
    • Use Gravityがオフになっているかも確認してください。

おすすめのアセット

「Find It – Hidden Object Template」は、Unityで隠しオブジェクトゲームを簡単に作成できるテンプレートです。このアセットは、隠しオブジェクトゲームの基本的な構造を提供し、ゲーム開発の手間を大幅に減らします。

主な特徴として、カスタマイズ可能なUI、タイマー機能、複数のレベル設定が可能です。また、オブジェクトの配置やリストの管理も直感的に行えます。使い方はシンプルで、テンプレートをインポートして、オブジェクトを配置し、ゲームロジックを設定するだけです。プログラミングの知識がなくても、誰でも簡単に自分だけの隠しオブジェクトゲームを作ることができます。