【Unity ＆ STUDIO】ドロップダウンでオブジェクトの色を変更！

STUDIO
2024.01.14

ウェブサイトやアプリケーションにおいて、ユーザーインタラクションは重要な要素です。今回はUnityを使って、ユーザーにUIボタンが押された時、ドロップダウンで指定されているオブジェクトの色を変更していくようなシーンを作成します。最終的にはこれをSTUDIOで作成したWEBサイト上で動かせるようにしていきます。

今回の記事で最終的に作成したいものはこちら↓

①色を変えるオブジェクトを準備

まず、オブジェクトを準備します。今回はとりあえずオブジェクトを3つ用意します。

以下のように3DモデルのCubeを3つ作成して、横に並べましょう。今回はそれぞれのオブジェクトを左からA.B.Cとします。

②UIボタンの作成

次に、先ほど作ったオブジェクトの色を変更するためのボタンを作成します。下記のように3色に変えられるように、UIボタンを3つ作成してください。

ユーザーがこのボタンを操作して、オブジェクトの色を変更できるように設定していきます。今回はとりあえず赤、青、緑の3色に変更できるようにしていきます。

※必須ではないですが、どのボタンが何色に変えるか分かりやすいように、ボタン自体の色と、表示される文字を変更しています。

③ドロップダウンの作成

次は、最初に作成した3つのオブジェクトA.B.Cのいずれかを選択するためのドロップダウンを作成します。

ドロップダウンリストに表示される項目の数は、ドロップダウンのインスペクター(画面右側に表示されてる設定画面のようなもの)の中の[Options]の項目の右下にある+.-のボタンを押すと、増やしたり減らしたりできます。今回は用意したオブジェクトが3つなので、最初から用意されている3つの表示を変更していきます。

※TextMesh Proのドロップダウンは標準のUI Dropdownとは異なります。あとで出てきますが、この場合、TMP_Dropdownの型を使用するようにスクリプトを記載する必要があります。

TextMesh Proとは？
簡単に言うと文字を描画する機能のことです。TextMeshPro を使用すると、テキストのフォーマットとレイアウトに際してより高度な制御が可能になります。 例えば、文字・行・段落の間隔調整や、カーニング、テキストの両端揃え、リンク、30 種類を超えるリッチテキストタグ、複数のフォントやスプライトのサポート、カスタムスタイルなどの機能を備えています。

④スクリプトの作成

次はここまで作成してきたボタンやドロップダウンを使用した時に、期待通りにオブジェクトの色が変わるようなC#のスクリプトを作成します。

具体的に作成したスクリプトは下記です↓

using UnityEngine;
using UnityEngine.UI;
using TMPro; // TextMesh Proの名前空間を追加

public class ObjectColorSelector : MonoBehaviour
{
    public Button redButton;
    public Button blueButton;
    public Button greenButton;
    public TMP_Dropdown objectDropdown; // Dropdownの代わりにTMP_Dropdownを使用

    public GameObject objectA;
    public GameObject objectB;
    public GameObject objectC;

    private GameObject selectedObject;

    void Start()
    {
        redButton.onClick.AddListener(() => ChangeColor(Color.red));
        blueButton.onClick.AddListener(() => ChangeColor(Color.blue));
        greenButton.onClick.AddListener(() => ChangeColor(Color.green));

        // ドロップダウンの変更イベントリスナーを設定
        objectDropdown.onValueChanged.AddListener(delegate { DropdownItemSelected(objectDropdown.value); });

        // 初期状態でのオブジェクト選択を反映
        DropdownItemSelected(objectDropdown.value);
    }

    void DropdownItemSelected(int index)
    {
        switch (index)
        {
            case 0:
                selectedObject = objectA;
                break;
            case 1:
                selectedObject = objectB;
                break;
            case 2:
                selectedObject = objectC;
                break;
        }
    }

    void ChangeColor(Color newColor)
    {
        if (selectedObject != null)
        {
            Renderer renderer = selectedObject.GetComponent<Renderer>();
            if (renderer != null)
            {
                renderer.material.color = newColor;
            }
        }
    }
}

※このスクリプトは次に作成する「UI Manager」というUI操作を一括で管理するためだけに作成する空のオブジェクトにアタッチします。

⑤UI Managerを作成

最後に、今回作成するシーンにおけるUI要素の操作を管理するために「UI Manager」という名前で空のオブジェクトを作成します。

空のオブジェクトの名前はなんでもいいですが、目的はUIボタンやドロップダウンなど、ユーザー操作による命令をまとめて管理できた方が分かりやすく、追加で何かしたいとなった時に拡張しやすいです。

この作成した「UIManager」空のオブジェクトに先ほどのスクリプトをアタッチします。

アタッチできたら、「UIManager」のインスペクターの中で、RED、BLUE、GREENの各ボタンとドロップダウン、そして3Dオブジェクト（A、B、C）を、対応するスクリプトのフィールドに割り当てます。

⑥実行結果確認

それでは、unityで実行結果を確認します。

上記のように、ドロップダウンで選択したオブジェクトの色が、UIボタン操作によって切り替わっていることが確認できました。

まとめ

ここまでで、Unityを使用してボタンやドロップダウンリストからオブジェクトの色を変更する機能の基本的な作成方法を学びました。次の記事では、このUnityプロジェクトをWebGLでビルドし、ロリポップサーバーにアップロードして、最終的にSTUDIOのカスタムコードを使用してウェブサイトに組み込むプロセスを詳しく解説します。ウェブ開発におけるUnityの応用に興味がある方は、ぜひ次の記事もご覧ください。

コメント