Yes Second Life

セカンドライフ向けWebサービスを作ってました。このブログではVR・メタバースのことを書いていきます

HighFidelityのTablet UI Frameworkを使う

この記事は、セカンドライフ技術系アドベントカレンダー2017向けの記事です。

adventar.org

前回ちょろっと触れましたが、HightFidelityでHUDみたいなUIを作るには、Tablet UI Frameworkというのを使います。今回はこのフレームワークで出来ることを見ていきます。

Webページを表示する

Tabletオブジェクトの、gotoWebScreen関数を使うと、指定したWebページを表示できます。

(function() {

    // クリックイベント
    this.clickDownOnEntity = function(entityID, mouseEvent) {

        // Tabletオブジェクトを取得
        var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
    
        // このブログを表示
        tablet.gotoWebScreen("http://sabro.hatenablog.com/");
    };
})

モバイル用のページが表示されるみたいです。

f:id:sabro:20171203232010p:plain

上のスクリプトではTabletオブジェクトを唐突に取得しています。このオブジェクトの定義がないかHighFidelityのインストールディレクトリのJSファイルを色々検索して調べてみたのですが、定義されてる箇所が見つかりませんでした。とりあえず、Tablet UI Frameworkを使用するときのおまじないみたいなものと思っておくことにします。

f:id:sabro:20171203235114p:plain

なお、Webページ以外にもQt向けの宣言型UI言語、QMLの表示にも対応しているみたいですが、今回はそこまで試せませんでした( ̄□  ̄ ||

デフォルトのメニューを拡張する

HighFidelityの世界にログインすると、デフォルトでこんなメニューが表示されます。これは公式で用意されているメニューなわけですが、Tablet UI Frameworkを使えばここに自分の機能を追加することが出来ます。

f:id:sabro:20171204000946p:plain

具体的にはTabletオブジェクトのaddButton関数でメニューUIにボタンを追加し、そのボタンのクリックイベントを定義してやればOKです。スクリプト終了時にはボタンを削除する処理も忘れずに入れておきます。ここでは、ボタンを押すとGoogle検索を呼び出すだけのGoogleボタンを作ってみます。

(function() {
    
    // Tabletオブジェクトを取得
    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");

    // デフォルトのメニューにボタンを追加、ボタンの文言はGoogleを指定
    // iconプロパティを設定すれば独自のアイコンの表示も可能だがここでは省略
    var button = tablet.addButton({
        text: "Google"
    });

    // メニューのボタンを押した際に呼び出す関数、ここではGoogle検索を表示
    function onClicked() {
        tablet.gotoWebScreen("https://www.google.co.jp/");
    }

    // メニューボタンクリックイベントと関数を接続する
    button.clicked.connect(onClicked);

    // スクリプト終了時に呼び出す関数
    function cleanup() {
        tablet.removeButton(button);
    }

    // スクリプト終了イベントと関数を接続する
    Script.scriptEnding.connect(cleanup);
}()); 

作ったスクリプトはインターフェーススクリプトとして読み込みます。メニューの拡張みたいにクライアントから接続している間だけ有効にしたい機能はインターフェーススクリプトとして使用するのがベストです。作ったスクリプトtablet-test.jsと名前をつけてディスクから読み込みます。

f:id:sabro:20171209201332p:plain

メニューにGoogleボタンが追加されました。

f:id:sabro:20171209201404p:plain

押すとGoogle検索画面が表示されます。

f:id:sabro:20171209205401p:plain

終了処理を仕込んであるのでスクリプトを✕ボタンで停止するとボタンもメニューから消えます。

f:id:sabro:20171209215213p:plain

一通り見てきましたが、公式のメニューを自分で拡張できるのが面白いですね。この拡張性の高さがHighFidelityの魅力でもあります( ̄∇  ̄ )