たるこすの日記

たるこすの日記

リアルからバーチャルへ、バーチャルからリアルへ

MRDesignLabs_Unity のボタンを拡張して ON OFF できるボタンを作る

先日、Microsoft より MRDesignLabs_Unity というリポジトリが公開されました。 github.com

ボタン、プログレス表示、オブジェクト操作機能など、さまざまな役に立つコンポーネントが含まれています。

この記事では、MRDesignLabs に含まれるボタンを ON, OFF 表現ができるトグルボタンに拡張する方法について解説します。

MRDesignLabs_Unity のダウンロード

上記ページから、MR_DesignLabs_Unity のリポジトリをクローンします。新しいプロジェクトを作成し、MR_DesignLabs_Unity に含まれている MR_DesignLabs_Unity_Examples をインポートします。

初期設定

新しいシーンを作成したら、Main Camera を削除します。

また、以下の2つをシーンに追加します。

  • MRDesignLab\HUX\Prefabs\Interface\HoloLens
  • MRDL_ControlsExample\Prefab\ButtonPush

トグルボタンのスクリプト作成

以下のスクリプトを作成し、ButtonPush にアタッチします。

ToggleButton.cs

これだけでうまくいけば綺麗なのですが、43行目の StateChange は protected な関数のため、エラーになってしまいます。

buttonMesh.StateChange(Button.ButtonStateEnum.ObservationTargeted);


そのため、MRDesignLab\HUX\Scripts\Buttons にある CompoundButtonMesh.cs の 127 行目を

protected void StateChange(Button.ButtonStateEnum newState)

から

public void StateChange(Button.ButtonStateEnum newState)

へと変更します。

StateChange を呼ばなかった場合、MeshProfile を変更してもボタンの色がすぐには変更されず、ボタンが次の状態に遷移するときになって新しい MeshProfile が反映されます。そのため、仕方なく MRDesignLab のコードに変更を加えています。

トグルボタンの設定

ButtonPush のボタンの色の設定は、PushButtonMeshProfile で設定されています。 これをコピーし、新しく PushButtonOnMeshProfile, PushButtonOffMeshProfile を作成します。

色の設定は Inspector 上の GUI で行うことができます。 PushButtonOnMeshProfile の Offset の値を少し小さくすることで、ON の時はボタンが押し込まれて少しへこんだ状態になるようにしています。

Profile を作成したら、ButtonPush のインスペクターで設定をしていきます。

Interactibles, Targets にそれぞれボタンのオブジェクトを設定します。さらに、ON State Mesh Profile, Off State Mesh Profile で先ほど作成した Profile を設定します。

Callback Event には、ボタンが押されたときに呼び出されるイベントを設定します。

実行すると、ボタンは以下のように動作します。

複数のボタンを連動させて動作させることもできます。Interactibles, Targets にそれぞれ複数のボタンを設定すれば、片方のボタンが押されたときに別のボタンも動作します。

ButtonPush に Compound Button Sounds と Audio Source を付け加えると、ボタンを押した際に音を鳴らすことができます。Compound Button Sounds の Profile には、DefaultButtonSoundsProfile を設定します。

HoloLens 上での動作

HoloLens で動作させると以下のようになりました。

他にも MRDesignLabs にはいろいろなコンポーネントが含まれているので、試していきたいと思います。