MRTKでTheme設定を使って無効化時に見た目が変化するボタンを作成する

本日は MRTK の小ネタ枠です。
MRTKでTheme設定を使って無効化時に見た目が変化するボタンを作成する手順を記事にします。

MRTKのボタンプレハブ

MRTK のボタンは Interactable コンポーネントを使って状態(State)を管理しています。
Theme の設定で状態ごとの設定を行うことで、ボタンの状態に応じた見た目の変化を定義できます。
docs.microsoft.com
docs.microsoft.com

Interactable コンポーネントの[General]項目でボタンの状態の定義を、[Profiles]項目で状態に応じたボタンの変化を定義できます。

サンプルプロジェクトの作成

実際に手順を実施してみるため、MRTK をインポートしたサンプルプロジェクトを作成します。

MRTK のインポートと基本設定

MRTK のインポートと HoloLens 向けプロジェクトの基本設定を行い、サンプルプロジェクトを作成します。
手順の詳細は以下の記事を参照してください。
bluebirdofoz.hatenablog.com

無効化状態のときにボタンの色を変化させる

実際に無効化状態のときにボタンの色を変化させる設定を行ってみます。

ボタンを無効化する

初めにボタンの変化を確認するため、ボタンを無効化する以下のサンプルスクリプトを作成しました。
・ButtonDisable.cs

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

[RequireComponent(typeof(Interactable))]
public class ButtonDisable : MonoBehaviour
{
    [ContextMenu("DisableButton")]
    public void IsDisableInteractable()
    {
        // Interactableの状態を Disabled に移行する
        this.GetComponent<Interactable>().IsEnabled = false;
    }
}

ボタンにスクリプトを追加し、シーン再生中にコンテキストメニューから[DisableButon]を実行することでボタンを Disabled 状態に移行できます。

デフォルトのボタンでは Disabled 状態になっても[Say XXX]の音声認識用ラベルが非表示になるだけで、ボタンの見た目は変わりません。

背景色を変化させるThemeを作成する

今回はボタンの状態の定義は変更せず Profiles に状態に応じた変化を Theme で設定します。
MRTK をインストールしたプロジェクトの Project フォルダで右クリックから[Create -> MixedReality -> Toolkit -> Theme]で新規 Theme を作成できます。