MRDesignLab -Periodic Table-

MRDesignLabのサンプルアプリ「Periodic Table」の中身を見ていきます。

MRDesignLabとは

こちらを参考にしてください。 http://roy29fuku.com/virtual-reality/hololens/mrdesignlabs/

導入方法

周期表。 Githubからコードをクローンします。

git clone https://github.com/Microsoft/MRDesignLabs_Unity_PeriodicTable.git
cd MRDesignLabs_Unity
git submodule init
git submodule update
git submodule foreach git pull origin master

以下のシーンを開きます。 「MRDesignLabs_Unity_PeriodicTable -> Assets -> MRDL_PeriodicTable -> Scenes -> Main」

いつものようにビルド。

最初は操作に躓いていますが、キューブをAir Tapすると、詳細説明が表示されます。 視線がフォーカスしているときにキューブの色が少し変わるのも、操作しやすいです。 https://youtu.be/5iiksmMopkk

Tableの生成プロセス

周期表のオブジェクトはアプリを起動するまではHierarchyに存在しません。

アプリ起動時に何らかのスクリプトによって生成されているようです。

構成要素はこんな感じ。

半透明のウィンドウを参考にしたいので中身を見てみます。 アプリ起動後、さらに周期表の適当な箱をタップします。 すると、原子の詳細説明が表示されます。 目当ての半透明パネルはDegitalDataの中に入っているInfoBackPanelLeft, Rightです。

これがどのように生成されているか確認します。 Scripts/ の中身を眺めてみます。

PeriodicTableLoaderというスクリプトがアプリ起動時に周期表を生成しているっぽいですね。 こういう知らない人が見ても内容が想像できる命名って素敵。

ダブルクリックで確認。 ここら辺がそれっぽいです。PeriodicTableJSONというファイルを読み込んで、elementsという変数にしまって、それで配列を回していろいろ作っているみたい。

FromJsonメソッドについては以下の公式を参考に。 Jsonからオブジェクトを生成できるみたい。便利。

• Unity | スクリプトリファレンス JsonUtility.FromJson

ちなみに、ElementDataというクラスについては頭のほうで定義されています。

PeriodicTableJSONも確認してみます。

中身はこんな感じ。JSON形式のテキストファイルです。 ElementDataクラスに一致しているのがわかります。

コバルト発見。

見比べてみます。記述が一致しているので間違いなさそう。これが周期表を生成している部分ですね。

念のため、JSONファイルを書き換えてみる。 再度アプリを起動し、コバルトをタップ。説明が書き変わっています。確証得たり。

まとめるとこんな感じでしょう。

1. アプリ起動
2. PeriodicTableLoaderが実行される
   1. PeriodicTableJSONから周期表を生成するために必要な情報を読み込み
   2. Listに成形
   3. foreach文を回して1つずつ、周期表を構成するキューブを生成

SetFromElementDataはどこかで定義されているんでしょう。 こんな感じでJSONファイルに定義しておいて、ぐるぐる読み込んでスクリプトでオブジェクトを生成していたんですね。