Data Binding and Theming 入門
神 戸 デ ジ タ ル ・ ラ ボ
堀 尾 風 仁 / F u t o H o r i o
T o k y o H o l o L e n s ミ ー ト ア ッ プ v o l . 3 0
M i x e d R e a l i t y T o o l k i t 3
Slide 2
Slide 2 text
堀 尾 風 仁
株 式 会 社 神 戸 デ ジ タ ル ・ ラ ボ
コ ミ ュ ニ テ ィ 運 営
・ A R K O B E
・ A z u r e T e c h L a b .
M i c r o s o f t M V P
f o r W i n d o w s D e v e l o p m e n t
Twitter アカウント
@Futo_Horio
Early preview packages
開発の早期段階に位置するパッケージ
MRTK 3 のいくつかのパッケージは他のパッケージと比較して、
開発段階の初期段階 (Early Stage) に位置します。
これらは Early preview packages (初期プレビューパッケージ) と呼ばれ、
パッケージ名の Early Preview によって識別が可能
2022年6月現在、以下3つのパッケージが
Early preview として扱われています。
・Accessibility
・Data Binding and Theming
・Environment
※ Early preview package には、リリースが計画されている
すべての機能セットが含まれていない場合や、正式リリース前に
アーキテクチャに大きな変更が加えられる場合があります。
Slide 7
Slide 7 text
Getting Started
前提条件
・Unity 2020.3 LTS 以降
・Text Mesh Pro 2.1.4 以降
・MRTK3 初期セットアップ済みであること
( 初期セットアップ方法 : https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-unity/mrtk3-overview/setup )
Slide 8
Slide 8 text
Getting Started
Scripting Define Symbols を設定する
MRTK3 Data Binding and Theming を有効にするためには、
Player Settings > Other Settings > Scripting Define Symbols に
MRTK_UX_DATABINDING_THEMING_ENABLED
シンボルを追加する必要があります。
・このシンボルを追加しないと動作に必要となる
パッケージがコンパイルされず、Data Binding and Theming が
正しく機能しないので注意が必要です。
・Data Binding and Theming が不要な場合は、
シンボルと取り除くことで、パフォーマンスへの影響をゼロにします。
注意点
Slide 9
Slide 9 text
Getting Started
新しいシーンを追加して、MRTK の設定を追加する
新しいシーンを追加する ( 名前 : 任意 )
Main Camera ゲームオブジェクトを削除
・MRTK XR Rig ( カメラや入力設定 )
・MRTKInputSimulator ( 入力シミュレーター )
1
2
MRTK’s Prefab を追加する ( 以下、2つ )
※ Apply Recommended scene settings for HoloLens 2 が正しく動作しないため、手動で対応 (セットアップミス?)
Slide 10
Slide 10 text
Getting Started
Data Source コンポーネントを追加する
1
2
3
データソースタイプ
( Data Consumer 参照用 : 任意の文字列 )
URL
( Curl を実行する URL )
Seconds Between Fetches
( データを取得する間隔 [秒] )
・新しいゲームオブジェクトを追加 ( 名前 : DataBinding )
・Data Source Json Test コンポーネントをアタッチ
・URL に http://www.boredapi.com/api/activity を設定
Slide 11
Slide 11 text
Getting Started
Data Source JSON Test コンポーネントで指定した URL について
・リクエスト毎に異なる値を持つ JSON オブジェクトを返却する
公式ドキュメントで記載されている通り、https://www.boredapi.com/api/activity を指定すると、上記エラーが発生する。
理由は、こちらのサイトの証明書の有効期限が切れているため。https → http に置き換えることでサンプルを動作させることが可能。
Slide 12
Slide 12 text
Getting Started
データソースから取得したデータを反映する Text Mesh Pro を追加する
DataBinding オブジェクトの
子オブジェクトとして、
Text – TextMeshPro を追加します
Slide 13
Slide 13 text
Getting Started
データソースのデータ更新を UX (View) に反映するための Data Consumer コンポーネントを追加する
1
2
データソースタイプ
( データを取得する Data Source Type を指定 )
Truncate String
取得した文字列を切り捨てるかどうか
Manage Children
( Data Consumer を
子オブジェクトにも反映するかどうか )
ヒエラルキーから Canvas を選択して、
Data Consumer Text コンポーネントをアタッチ
Slide 14
Slide 14 text
Getting Started
データソースからデータを反映するために、Text Mesh Pro に テンプレート を設定する
テンプレートを入力する
ex. {{ Key }}
Text (TMP) オブジェクトを選択して、
TextMeshPro > Text Input を以下に置き換える
{{ activity }}. It’s {{ type }}.
Slide 15
Slide 15 text
DEMO
Slide 16
Slide 16 text
Data Binding and Theming
Data Binding と Theming (テーマシステム) を組み合わせて、動的にテーマを変更する方法
Theming (テーマシステム) では、
アプリの外観 (テーマ) を動的に扱うために
UX Theme Profile (ScriptableObject) を使用
Slide 17
Slide 17 text
Data Binding and Theming
Data Binding で Theme を扱う場合の Data Source 側の設定
A s s e t s / U X T h e m i n g E x a m p l e / S c e n e s / U X T h e m i n g E x a m p l e
Data Source Provider Singleton
Data Source Theme Provider
テーマ (UX Theme Profile) を取得するための
データソースプロバイダー
データソースプロバイダーをシングルインスタンス化
Data Consumer が子オブジェクトに無くても検出可
Slide 18
Slide 18 text
Data Binding and Theming
Data Consumer 側の設定方法 ( UX Binding Configurator )
UX Binding Configurator
アプリケーション実行時にテーマ設定を有効にするための
Data Consumer が動的にアタッチしてくれる
Slide 19
Slide 19 text
Data Binding and Theming
実行時に UXBindingConfigurator で指定されている Data Consumer を動的にアタッチされる
アプリケーション実行時
UXBindingConfigurator が UX Binding Profile を
用いて、必要な Data Consumer をアタッチしている
Slide 20
Slide 20 text
Data Binding and Theming
Data Source の Theme を動的に変更するためのコンポーネント ( Theme Selector )
Theme Selector
Data Source Theme Provider へテーマプロファイルを
スワップするコンポーネント
Slide 21
Slide 21 text
Data Binding and Theming
ThemeSelector.SetTheme() メソッドを実行することで動的にテーマを変更することが可能
ThemeSelector.SetTheme
サンプルシーンでは、ThemeSelector の SetTheme(int)
を呼び出すことで、テーマ切り替えを実現している
Slide 22
Slide 22 text
参考文献
・Mixed Reality Toolkit 3
https://docs.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-overview
・Data Binding and Theming Framework
https://docs.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-data/packages/data/overview
・Working with Dynamic Data and Theming in MRTK3 ( MRDevDays )
https://www.youtube.com/watch?v=IiTpZ2ojyno