MRTK3のサンプルプロジェクトを見る HandInteractionExamples その②PinchSlider

本日はMRTK枠です。

先日に引き続きMRTKのサンプルプロジェクトであるDevTemplateのプロジェクトからHandInteractionExamplesを見ていきます。

redhologerbera.hatenablog.com

〇Pinch Interaction

Pinch InteractionはスライダーのUIです。

Pinch Interactionはその名の通りつまみをHandTrackingでつまんで手で動かすことができるスライダーです。

サンプルでは上部に配置されているGemが回転します。

構造としてはスライダー基部であるNonCanvasSliderBase、背景パネルであるBackPlateで構成されています。

BackPlateはただのメッシュであり、特に機能を持っていませんがMRGTで提供されているNon-CanvasのBackplateシェーダーを使用しています。

一方でNonCanvasSliderBaseオブジェクトはスライダーにかかわる多くの機能を持っています。

〇Sliderコンポーネント

SliderコンポーネントはPinchSliderのコアに相当するコンポーネントです。

MRTK3ではXR Interaction Toolkitに乗っ取って機能が提供されていますが、Sliderコンポーネントも同様にXRinteractionToolkitをオーバーライドする形で構成されています。

〇Sliderのイベント

スライダー操作時のイベントはSlider EventsのOn Value Updated(SliderEventData)のイベントリストで行うことができます。

スライダーの値を使用して何かを起すためにはスライダーに対応するメソッドを実装する必要があります。

サンプルで使用されているObjectSpinnerではMicrosoft.MixedReality.Toolkit.UXのネームスペースを使用してSpinObjectWithSlider(SliderEventData args)のメソッドを定義しています。

using Microsoft.MixedReality.Toolkit.UX;


    public void SpinObjectWithSlider(SliderEventData args)
        {
            // If this is our first slider event, let's record the initial values.
            if (initialSliderValue < 0)
            {
                initialRotation = transform.localRotation;
                initialScale = transform.localScale;
                initialSliderValue = args.NewValue;
            }

            // Adjust the gem based on the difference between the current slider's value and where it started.
            float sliderDelta = args.NewValue - initialSliderValue;
            transform.localRotation = initialRotation * Quaternion.AngleAxis(sliderDelta * -90, Vector3.up);
            transform.localScale = initialScale * (1 + sliderDelta * 0.2f);
        }

このメソッドではargsでスライダーの値0~1を受け取っています。

この値を使用してスライダーの値に応じて回転を行うようにしています。

自身のクラスでスライダーの機能を実装するためには以下のように記述します。

   public void メソッド名(SliderEventData data)
{
　　float x = data,newValue; 
}

注意すべき点としてスライダーの値は0~1をとります。そのため状況に応じて360をかけたり、マイナスをかけたりなどする必要があります。

本日は以上です。