MRTKでMulti-dimensionalボタンを利用して複数の状態を遷移するボタンを作成する

本日は MRTK の小ネタ枠です。
MRTKでMulti-dimensionalボタンを利用して複数の状態を遷移するボタンを作成する手順を記事にします。

前提条件

本記事は以下の記事の続きです。テーマ作成の作成を利用します。
bluebirdofoz.hatenablog.com

Multi-dimensionalボタン

Multi-dimensionalモードのボタンは、2つ以上のステップを持つボタンを作成するために使用されます。
例えば、等速(x1)、倍速(x2)、三倍速(x3)といった3つの値で速度をコントロールするような場合です。
microsoft.github.io

次元数が数値の場合、最大で9つの異なるテーマを各ステップごとに使用することができます。
テーマを切り替えることでボタンのテキストラベルやテクスチャを制御できます。
全てのクリックイベントでは実行時に 1 ずつ進み、サイクル時は 0 にリセットされます。

3つの状態を持つMulti-dimensionalボタンの作成

クリックするごとに、グー、チョキ、パーのテクスチャとテキストが切り替えるMulti-dimensionalボタンを作成してみます。

ボタンを追加する

MRTK Toolbox から Button オブジェクトを追加します。

追加したボタンの Inspector ビューを開き、[Interactable]コンポーネントを開きます。
[Selection Mode]を[Multi Dimension]に切り替えます。これで複数の状態を持つボタンになります。

[Dimension]を[3]、[Start Dimension Index]を[0]に設定します。
すると[Profiles]パネルが拡張され、2つ目、3つ目の状態でのテーマの設定項目[Theme2],[Theme3]が追加されます。

今回はテクスチャとテキストのみを切り替えたいので、デフォルトのテーマは全て同じテーマを設定しました。

テーマを作成する

テクスチャとテキストを切り替えるためのテーマを作成します。
MRTK をインポートしていると、右クリックから[Create -> MixedRealityToolkit -> Theme]でテーマを作成できます。

それぞれ3つの状態に対してテクスチャとテキストを設定した以下の6つのテーマを作成しました。
・テクスチャテーマ



・テキストテーマ

1つのテーマの中にテクスチャとテキストの両方を含めることもできます。
今回は変更対象となるターゲットがテクスチャとテキストでオブジェクトが分かれているため、別々にテーマを作成しています。

テーマを反映する

状態ごとに作成したテーマを反映します。
再び、追加したボタンの Inspector ビューを開き、[Profiles]パネルの[Add Profile]でターゲットを増やします。

テクスチャの変更ターゲットである[UIButtonSquareIcon]オブジェクトと、テキストの変更ターゲットである[TextMeshPro]オブジェクトをターゲットに指定します。

それぞれ[UIButtonSquareIcon]のターゲットにはテクスチャのテーマを、[TextMeshPro]のターゲットにはテキストのテーマを状態ごとに設定します。

動作を確認する

これで3つの状態を持つMulti-dimensionalボタンが作成できました。
[再生]ボタンをクリックして動作を確認します。ボタンをクリックするたび、状態が切り替われば成功です。

現在の状態を取得する

ボタンの現在の状態は[Interactable]コンポーネントの[DimensionIndex]で取得できます。
例えば、以下のように取得可能です。
・DebugInteractable.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Microsoft.MixedReality.Toolkit.UI;

[RequireComponent(typeof(Interactable))]
public class DebugInteractable : MonoBehaviour
{
    public void Log_CurrentDimension()
    {
        Interactable component = this.GetComponent<Interactable>();
        Debug.Log("Interactable.DimensionIndex : " + component.CurrentDimension);
    }
}