MRが楽しい

MRやVRについて学習したことを書き残す

MRTKを用いてHoloLensでタップ型キーボードを利用する

本日は MRTK の技術調査枠です。
MRTKを用いてタップ型キーボードを表示する方法をまとめます。
f:id:bluebirdofoz:20190224123921j:plain

プロジェクトとシーンの準備

以下の記事を元にHoloLens(WindowsMR)プロジェクトを作成します。
bluebirdofoz.hatenablog.com

2019/2/24 現在、MRTK 2017 の最新バージョンは 2017.4.3.0 です。
f:id:bluebirdofoz:20190224123939j:plain

キーボード入力の結果を分かりやすく見せるため、シーン内に Panel と Text オブジェクトを配置します。
以下の通り、オブジェクトを追加して一部のパラメータを変更しました。
Canvas

Pos X:0
Pos Y:0
Pos Z:2
Width:100
Height:50
Scale X:0.005
Scale Y:0.005
Scale Z:0.005
Render Mode:WorldSpace

・Panel

変更無し

・Text

Width:80
Height:40

f:id:bluebirdofoz:20190224123951j:plain

キーボードオブジェクトの追加と利用方法

MRTKを用いてキーボードを利用する場合、MRTK 内にある keyboard オブジェクトをシーンに追加する必要があります。
HoloToolkit/UX/Prefabs 配下にある keyboard.prefab を Hierarchy にドラッグして追加します。
f:id:bluebirdofoz:20190224124002j:plain

次にキーボードの表示や入力を行うスクリプトを作成します。
シーン内に Keyboard オブジェクトを配置していれば Keyboard.Instance でオブジェクトにアクセス可能です。

以下の機能を持つスクリプトを作成します。
1.本スクリプトをアタッチしたオブジェクトをタップするとキーボードを表示する
2.キーボードで文字入力を行うと、同期的にテキストフィールドを更新する
3.Enterキーで入力を確定すると、入力文字列に"!"が追加されて入力が終了する
(Enter時にのみ文字列を反映したい場合はコード内の OnTextUpdated イベントを外すこと)

・MRTKKeyboardShow.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using HoloToolkit.Unity.InputModule;
using HoloToolkit.UI.Keyboard;
using System;

public class MRTKKeyboardShow : MonoBehaviour, IInputClickHandler
{
    /// <summary>
    /// 文字列を反映するテキストフィールド
    /// </summary>
    [SerializeField, Tooltip("文字列を反映するテキストフィールド")]
    private Text TargetInputField;
    
    /// <summary>
    /// アタッチオブジェクトのタップイベント
    /// </summary>
    /// <param name="eventData"></param>
    public void OnInputClicked(InputClickedEventData eventData)
    {
        // キーボードを開いていなければ実行
        if (!Keyboard.Instance.gameObject.activeSelf)
        {
            // キーボードを表示する
            Keyboard.Instance.PresentKeyboard();
            // キーボードの位置をオブジェクトの近くに配置する
            Keyboard.Instance.RepositionKeyboard(transform, null, 0.1f);

            // キーボードの確定(Enter)イベントを設定する
            Keyboard.Instance.OnTextSubmitted += KeyboardOnTextSubmitted;
            // キーボードの更新イベントを設定する
            Keyboard.Instance.OnTextUpdated += KeyboardOnTextUpdated;
            // キーボードの終了イベントを設定する
            Keyboard.Instance.OnClosed += KeyboardOnClosed;
        }
    }

    /// <summary>
    /// 入力文字列の更新イベント
    /// </summary>
    /// <param name="text"></param>
    private void KeyboardOnTextUpdated(string text)
    {
        // text変数から入力した文字列が取得できる
        if (!string.IsNullOrEmpty(text))
        {
            // Textに文字列をセットする
            TargetInputField.text = text;
        }
    }

    /// <summary>
    /// キーボード入力の確定(Enter)イベント
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="eventArgs"></param>
    private void KeyboardOnTextSubmitted(object sender, EventArgs eventArgs)
    {
        // InputField変数から入力した文字列が取得できる
        string text = ((Keyboard)sender).InputField.text;
        if (!string.IsNullOrEmpty(text))
        {
            // Textに文字列をセットする
            TargetInputField.text = text + "!";
        }
    }

    /// <summary>
    /// キーボードの終了イベント
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="eventArgs"></param>
    private void KeyboardOnClosed(object sender, EventArgs eventArgs)
    {
        // 全てのイベントを解除する
        Keyboard.Instance.OnTextSubmitted -= KeyboardOnTextSubmitted;
        Keyboard.Instance.OnTextUpdated -= KeyboardOnTextUpdated;
        Keyboard.Instance.OnClosed -= KeyboardOnClosed;
    }
}

作成したスクリプトを Panel オブジェクトにアタッチします。
f:id:bluebirdofoz:20190224124019j:plain

キーボード入力に合わせて更新するテキストフィールドを指定します。
TargetInputField に Text オブジェクトを設定します。
f:id:bluebirdofoz:20190224124031j:plain

これで設定完了です。[再生]ボタンを押して、試しに動かしてみます。
Game 画面内で視点を Panel に合わせ、Shift + 左クリックでタップしてみます。
f:id:bluebirdofoz:20190224124039j:plain
Penelの手前にキーボードが表示されれば成功です。

HoloLensでの動作確認

HoloLens(WindowsMR)プロジェクトの作成手順に従って、アプリを HoloLens にインストールします。
同じく Panel をタップしてキーボードを表示します。
f:id:bluebirdofoz:20190224124102j:plain

文字列を入力して、テキストフィールドが更新されることを確認しましょう。
f:id:bluebirdofoz:20190224124112j:plain

参考元ページ

blog.nextscape.net