Zenn
📰

MRTK3 - Themingについて(Early Preview)

2022/12/14に公開
Unity
VR
HoloLens
MR
MRTK3
tech

Mixed Reality Toolkit3の新機能「Theming」

Data Bindingの派生機能として提供されている。コンテンツの色やスタイル（フォントや文字サイズ）といった情報をテーマとして管理し、動的に切り替えることができる。

必要なパッケージ

  • com.microsoft.mrtk.data 1.0.0-pre.12

Theming概要


UX Theme Profile

各UX部品のどの要素にTheme Profileの定義を適用するかを設定した定義ファイル。後述のUX Binding Profileのキーと値として管理されている。例えば、ボタンの背景パネルのマテリアあるについては、UX.Button.BackplateQuadMaterialになります。画像ではここに[MRTK_Backplate_InnerQuad_HoloLens2]というマテリアルを割り当てています。

UX Binding Profile

各UX部品に適用するマテリアル等の情報を設定した定義ファイル。UX Theme Profileのキー値と実際のUX部品をバインドするための定義を行っています。画像では、[Theme Key Path]にUX.Button.BackplateQuadMaterialを、[Game Object Name Regex]にUX.Button.BackplateQuadを指定しています。これによってHierarchy上で名前が[UX.Button.BackplateQuad]のオブジェクトすべてに対してUX Theme Profileに定義されている[UX.Button.BackplateQuadMaterial]の値、[MRTK_Backplate_InnerQuad_HoloLens2]マテリアルを適用するようになります。

DataSourceThemeProvider

UX Binding Profileの定義情報を各UX部品に提供する。

UX Binding Configurator

Theme Providerの情報と配下のUX部品（Game Object等）紐づけを行う。

ThemeSelecter（Helper）

ヘルパークラスとして提供されているもので、コンテンツ内で複数のテーマを管理し動的にテーマを切り替えることが可能になります。このヘルパークラスでテーマを切り替えるとDataSourceThemeProviderで定義されているUX Theme Profileが書き換わりコンテンツのテーマが変更されます。ThemeSelecter.CurrentThemeのインデックス値をボタンクリックイベントなどで変更する形で利用します。

サンプル - スタイルを切り替える

Unityプロジェクトを作成しMRTK3を導入する

基本的な手順は以下の記事を参考に設定してください。

https://zenn.dev/miyaura/articles/32dbaf7256fef4

https://zenn.dev/miyaura/articles/be65665439f0d4

Themingに必要なパッケージを導入する

必要なパッケージは以下のものになりますので、Mixed Reality Feature Toolでインポートしてください。

https://learn.microsoft.com/ja-jp/windows/mixed-reality/develop/unity/welcome-to-mr-feature-tool

  • com.microsoft.mrtk.data 1.0.0-pre.12

テーマを作成する

MRTK3の標準で提供されているUX部品はすでにUX Theme ProfileとUX Binding Profileが適用済みの状態になっています。ですので、標準部品でテーマを切り替える場合はこれをコピーして利用することができます。

最初にTheme Profileをコピーしましょう。[Project]タブ内の検索ボックスに「MRTK_UX」と入力し、検索範囲を[In Package]にすることで候補として出てきます。

Assets内の任意の場所にコピーし、名前を[Sample_UX_ThemeProfile]など任意の名前に変更します。

今回はボタンの背景を変更するテーマを作ってみたいと思います。
先ほどコピーした[MRTK_UX_ThemeProfile]を選択し[Inspector]タブを確認します。PressableButtonの背景に使用するマテリアルは[Backplate Outer Geometry Material]で定義されています。

このマテリアルを選択し先ほどのTheme Profile同様Assets配下の任意の場所にコピーします。

コピーしたマテリアルの名前を任意に変更し、色味を変えておきましょう。画像ではグリーン系に変えています。

次に先ほどコピーした[Sample_UX_ThemeProfile]を選択し[Inspector]タブを確認します。[Backplate Outer Geometry Material]で定義されているマテリアルを先ほど作ったマテリアルに変更します。

以上で、テーマの定義は完了です。

Theme設定用のData Sourceを準備する。

次に実際にボタンに先ほど作成したテーマを割り当てる実装を行います。
[Hierarchy]タブを選択し任意の場所に空のGameObjectを作成し、[Data Source Theme Provider]を追加します。[Data Source Theme Provider]にはTheme Profileが設定できますので、ここに先ほど作ったTheme Profileを設定してください。

ボタンを追加する

次にMRTK3で提供されているPressableButtonを追加します。[Project]タブ内の検索ボックスに「PressableButton」と入力し、検索範囲を[In Package]にすることで候補として出てきます。
今回は[PressableButton_32x32mm_IconAndText]を使いました。このPrefabを[Data Source Theme Provider]の配下に張り付けてください。

実行すると先ほど作成したマテリアルが適用された状態でButtonが表示されます。

テーマを切替える

テーマを動的に切替えるためには、Theme Selectorを利用すると簡単に実現することができます。まずは先ほどのThme Profileとマテリアルをコピーして何種類かのテーマを作成しておきます。

次に先ほど[Data Source Theme Provider]を定義したGameObjectに[Theme Selector]を追加します。Theme Profilesパラメータに先ほど作った複数のTheme Profileを設定します。またTheme Providerにもオブジェクトを設定しておきます。

アプリを実行します。実行中に[Theme Selector]のCurrent ThemeのIndex値を変更すると、[Theme Selector]のTheme Profiles内の該当するTheme Profileが[Data Source Theme Provider]に反映されスタイルが変更されます。

参考リンク

Discussion