夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

MixedRealityToolKit v2 Examplesを触ってみる ObjectCollectionExamples　その③　応用編

MRTKv2/Examples

　MixedRealityToolKit（以下MRTK）にはExamplesというデモサンプル集が含まれています。

　Examplesを理解すればMRTKの機能の使い方を学習することやノンコーディングでのアプリ開発が可能になります。

　今回は前回扱ったObjectCollectionExamplesのシーンに手を加えてHoloLens実機で動きを見ていきます。

　前回の記事はこちらです。

redhologerbera.hatenablog.com

〇ランタイムでObjectCollectionを行う。

デモシーンではエディタのInspectorでGridObjectCollection.csの各パラメータを変更してUpdate Collectionを実行することでObjectCollectionが行われました。

　しかし、デモシーンのままでは実機にビルドしてしまっては各パラメータを変更することはできないため、実機で実際にオブジェクトの並び方を見ながら理解を深めることはできません。

　そこで今回はデモシーンを加工して、アプリ内でGridObjectCollection.csの各パラメータを操作できるようにしました。

〇Sliderの実装。

　GridObjectCollection.csには次のパラメーターが主に存在しています。

　・Ignore Inactive Transform 　

　・Sort Type

　・Surface Type

　・Orient Type

　・Layout

　・Radius

　・Radial Range

　・Rows

　・Distance

　・Cell Width

　・Cell Height

　アプリ内でこれらの値のうち数値設定である

　・Radius

　・Radial Range

　・Rows

　・Distance

　・Cell Width

　・Cell Height

の値を実機でMRTKに含まれているPinchSliderを用いて実行中に変更します。

　まずGridObjectCollection-Radialオブジェクト以外のGridObjectCollection-○○オブジェクトを削除したsceneにPinchSliderを配置します。

　GridObjectCollection-Radialをベースにしたのは趣味です。 f:id:Holomoto-Sumire:20191114083511j:plain

　PinchSliderにはPinchSlider.csがアタッチされていて、EventのOnValueUpdated(SliderEventData)の＋をクリックしイベントを追加します。 f:id:Holomoto-Sumire:20191114083929j:plain

　GridObjectCollectionがアタッチされているゲームオブジェクト（GridObjectCollection-Radial）に下のGridObjectCollectionControol.csを作成、アタッチしてPinchSliderのOnValueUpdated(SliderEventData)のイベントにアタッチしGridObjectCollectionControol.（それぞれのパラメータ）を設定します。 　f:id:Holomoto-Sumire:20191114084102j:plain

　これを　

　・Radius

　・Radial Range

　・Rows

　・Distance

　・Cell Width

　・Cell Height

　それぞれに対応したPnichSliderを作成・配置します。 　 　GridObjectCollectionControol は以下になります。 　

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Microsoft.MixedReality.Toolkit.Utilities;
using Microsoft.MixedReality.Toolkit.UI;
public class GridObjectCollectionControol  :MonoBehaviour
{
   public GridObjectCollection GridObjectcollection;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    public void OnSliderUpdatedRadius(SliderEventData eventData)
    {
        GridObjectcollection.Radius = (eventData.NewValue*100f);
        GridObjectcollection.UpdateCollection();
    }
    public void OnSliderUpdatedRadialRangeRadius(SliderEventData eventData)
    {
        GridObjectcollection.RadialRange = (eventData.NewValue*360f);
        GridObjectcollection.UpdateCollection();
    }

    public void OnSliderUpdatedDistance(SliderEventData eventData)
    {
        GridObjectcollection.Distance = (eventData.NewValue*100f);
        GridObjectcollection.UpdateCollection();
    }
    public void OnSliderUpdatedCellHeight(SliderEventData eventData)
    {
        GridObjectcollection.CellHeight = eventData.NewValue;
        GridObjectcollection.UpdateCollection();
    }
    public void OnSliderUpdatedCellWidth(SliderEventData eventData)
    {
        GridObjectcollection.CellWidth = eventData.NewValue;
        GridObjectcollection.UpdateCollection();
    }
    public void OnSliderUpdatedRows(SliderEventData eventData)
    {
        GridObjectcollection.Rows = (int)(eventData.NewValue*10f);
        GridObjectcollection.UpdateCollection();
    }
}

　GridObjectCollectionを扱うために

using Microsoft.MixedReality.Toolkit.Utilities;

PinchSliderの数値を扱うために

using Microsoft.MixedReality.Toolkit.UI;

のネームスペースを使用します。

　Sliderの値はOnSliderUpdated○○(SliderEventData eventData){}でeventDataとして扱うことができるため

 GridObjectcollection.（パラメータ）= eventData.NewValue;
 GridObjectcollection.UpdateCollection();

のように記述することでsliderの値に応じてパラメータが設定され、UpdateCollection()で反映させています。

　ただし、PinchSliderでは0~1の値域であったため各パラメータごとに、例えば角度であれば360を掛け算等の処理を行っています。

　また、OnSliderUpdated○○(SliderEventData eventData){}でeventDataはfloat型として扱うためint型であるRows（行数）は

 GridObjectcollection.Rows = (int)(eventData.NewValue*10f);

　というようにint型として処理しています。

　以上でHoloLens実機でsliderを操作するとGridObjectCollection.csのパラメータが変化し、実機上でGridObjectCollectionの機能を確認できます。


ObjectCollectionExamples

〇SurfaceTypeの変更ボタンの作成

　次にSurfaceTypeを変更するボタンを作成します。

　ProjectからButton HoloLens1を検索して、sceneに配置してください。

　（HoloLens2ではButton HoloLens 2を使用してください）

　GridObjectCollectionがアタッチされているゲームオブジェクト（GridObjectCollection-Radial）に下のLayoutStyleChanger .csをアタッチします。

LayoutStyleChanger .cs

using Microsoft.MixedReality.Toolkit.Utilities;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LayoutStyleChanger : MonoBehaviour
{
    public GridObjectCollection objectCollection;
    public Transform tableParentTransform;

    public void ChangeLayoutStylePlane()
    {
        if (objectCollection != null)
        {
            objectCollection.SurfaceType = ObjectOrientationSurfaceType.Plane;
            objectCollection.OrientType = OrientationType.FaceParentFoward;
            objectCollection.Radius = 1.6f;
            objectCollection.RadialRange = 180.0f;
            objectCollection.Rows = 4;
            objectCollection.CellWidth = 0.21f;
            objectCollection.CellHeight = 0.21f;
            objectCollection.UpdateCollection();

            tableParentTransform.localPosition = new Vector3(0.0f, 0f, 0f);
         
        }
    }

    public void ChangeLayoutStyleCylinder()
    {
        if (objectCollection != null)
        {
            objectCollection.SurfaceType = ObjectOrientationSurfaceType.Cylinder;
            objectCollection.OrientType = OrientationType.FaceOrigin;
            objectCollection.Radius = 1.6f;
            objectCollection.RadialRange = 180.0f;
            objectCollection.Rows = 4;
            objectCollection.CellWidth = 0.21f;
            objectCollection.CellHeight = 0.21f;
            objectCollection.UpdateCollection();

            tableParentTransform.localPosition = new Vector3(0.0f,0f, 0f);
        
        }
    }

    public void ChangeLayoutStyleRadial()
    {
        if (objectCollection != null)
        {
            objectCollection.SurfaceType = ObjectOrientationSurfaceType.Radial;
            objectCollection.OrientType = OrientationType.FaceCenterAxis;
            objectCollection.Radius = 12.0f;
            objectCollection.RadialRange = 120.0f;
            objectCollection.Rows = 10;
            objectCollection.CellWidth = 1.0f;
            objectCollection.CellHeight = 1.0f;
            objectCollection.UpdateCollection();

            tableParentTransform.localPosition = new Vector3(0.0f, 0f,0f);
        
        }
    }

    public void ChangeLayoutStyleSphere()
    {
        if (objectCollection != null)
        {
            objectCollection.SurfaceType = ObjectOrientationSurfaceType.Sphere;
            objectCollection.OrientType = OrientationType.FaceOrigin;
            objectCollection.Radius = 1.2f;
            objectCollection.RadialRange = 180.0f;
            objectCollection.Rows = 8;
            objectCollection.CellWidth = 0.3f;
            objectCollection.CellHeight = 0.3f;
            objectCollection.UpdateCollection();

            tableParentTransform.localPosition = new Vector3(0.0f, 0.0f, 0.0f);
    
        }
    }
}

　LayoutStyleChanger .csはMRDL_Unity_PeriodicTableのサンプルでレイアウトを変更するのに用いていたものを加工しています。 　

　Slider同様ButtonにもEventを指定するOnClickがあります（Interactive.cs内）でGridObjectCollectionがアタッチされているゲームオブジェクト（GridObjectCollection-Radial）を設定してLayoutStyleChanger.ChangeLayoutStyle(タイプ)を指定します。 　

　これによってボタンをAirTap（HoloLens 2の場合touch）するとSurfaceTypeが変化します。 　


ObjectCollectionExamples

　以上でHoloLens実機で実行中にObjectCollectionExamplesの変化を確認できるようになりました。

　次回は実機にビルドして確認します。