夜風のMixedReality

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

HoloLensでスライダーUIを使用する YubimoziHoloLensのアニメーション速度を変更できるようにする

本日はMRTK調査枠です。

現在YubimoziHoloLensをリリースに向け作成しています。

redhologerbera.hatenablog.com

今回はYubimoziHoloLensのフィードバックを得る中で、「もっとゆっくりアニメーションを見たい」という意見があり、筆者自身も指文字のスピードを可変式にしたかったためMRTKで提供されているUIコンポーネントを使用して実装します。

〇PinchSlider

PinchSliderはMRTKで提供されているUIです。

f:id:Holomoto-Sumire:20220314221342p:plain

Pinchの名のように中央部のつまみをつかんでスライドさせることでその値をコンポーネント内で使用することができます。

www.youtube.com

PinchSliderには[PinchSlider]コンポーネントがアタッチされています。

いくつかパラメータに関してまとめます。

・SliderValue

f:id:Holomoto-Sumire:20220314221651p:plain

初期値です。 ここで指定した値が初期のパラメータ値になります。

・Slider Axis

f:id:Holomoto-Sumire:20220314221816p:plain

スライダーの向きです。xでは水平方向のスライドが可能に、yでは鉛直方向のスライドが可能になります。

今回のYubimoziHoloLensでは鉛直方向に設定しています。

f:id:Holomoto-Sumire:20220314221948p:plain

・On Value Updated(SliderEventDeta)

こちらのイベントがピンチスライダーをつかんでいる間マイフレーム実行される関数です。 ここで指定するイベントの関数にはSliderEventDetaの引数を持っている必要があります。

 呼び出される関数内ではSliderEventDetaの引数にスライダーの値が代入されます。

YubimoziHoloLensでは入力したテキストをもとに_speedの値(秒数)間隔で一文字一文字区切り読み込まれ、文字に応じたアニメーションが実行されます。

    IEnumerator AnimatoinSwitch()
    {
        int _textsize= _TextList.Length;//指文字で実行されるテキストの大きさ
        int i;
        for (i = 0; i < _textsize; i++)
        {
            string source = _TextList[i];
            Debug.Log(source);
            _HandText.text = source;//1文字ずつ分割して格納
            switch (source)
            {
                 ...  //読み込んだ文字に応じてアニメーション処理
            }
            yield return new WaitForSeconds(_speed);//_speed秒待つ
        }        
    }

今回はこの_sppedをPinchSliderと対応させます。

今回は以下の関数を書きました。 

   public void ChangeReadingSpeed(SliderEventData eventData)
    {
        
        _speed = 3.0f * (eventData.NewValue+0.5f);//デフォルト値で3秒、スライダーのパラメータに応じて変更される。
    }

ここでeventData.NewValue+0.5fと0.5fを足している理由はPinchSliderの値が0~1であり、中央値・・・つまりスピードの中央値が0.5になるためです。

0.5を足すことでPinchSlider一つでスピードをデフォルトの3から落とすことだけではなく、早めることもできます。

On Value Updated(SliderEventDeta)のイベントで ChangeReadingSpeedを呼び出すように登録します。

f:id:Holomoto-Sumire:20220314223105p:plain

これでスライダーを用いてアニメーション速度を可変にすることができました。