MixedRealityToolKit(以下MRTK)にはExamplesというデモサンプル集が含まれています。
Examplesを理解すればMRTKの機能の使い方を学習することやノンコーディングでのアプリ開発が可能になります。
前回からUX/Interactables/InteractablesExamplesを見ています。
前回はToggleを見ていました。
今回はSceneDescriptionPanelのRadialSetを見ていきます。
〇RadialSet
[RadialSet]はラジオボタンのプレファブになります。
[Toggle]プレファブ同様テキストに当たる[Label]、装飾に当たる[Background]オブジェクト、選択状態、非選択状態で色が変わる[Button]オブジェクト、装飾に当たる[Dot]オブジェクトで構成されています。
[CheckBox]や[Toggle]とは違い、[RadialSet]は複数のボタンのうちで一つのみが選択可能なUIです。
●Profiles
これまで同様[RadialSet]オブジェクトにも[Interactable.cs]がアタッチされています。
Profileを見てみると[Target]の[Theme]が[Theme(Deselected)]、[Theme(selected)]の二種類設定できるようになっています。
ここで選択状態、非選択状態でアクション時だけでなく色の変化が持続するような仕組みとなっています。
[Theme(Deselected)]と[Theme(Selected)]の二種類の[Theme]を使用するためには[Interactable.cs]の[General]の[Selection Mode]を[Toggle]に設定することで可能になります。
また、[Can Select]、[Can Deselect]の二つの設定はそれぞれボタンを選択可能か、選択解除不能かを設定します。
[Can Select]を無効にすることで選択ができなくなります。
次にラジオボックスとしての排他的選択機能を調べます。
[RadialSet]をコピーして4つ目のボタンとしました。
この状態で排他的な選択ができるか実行します。
結果は排他的な選択ができませんでした。この機能は親オブジェクトである[RadialSet]オブジェクトにあります。
[RadialSet]オブジェクトには[InteractableToggleCollection.cs]がアタッチされています。
このコンポーネントのリストにはオブジェクトの[Interactable.cs]を設定するようになっており、ここで設定されているオブジェクト同士が排他的な選択の機能を持つようです。
ここでは[Size]を4に変化させて先ほどコピーしたオブジェクトの[Interactable.cs]を設定しました。
この作業によって4つのオブジェクトで排他的な選択が可能になりました。
これで[RadialSet]の機能と仕組みを理解できました。
これまでのオブジェクト同様UIとしてイベントを指定するためには[Interactable.cs]の[OnClick()]にイベントを追加します。