スポンサー リンク
スポンサー リンク
「SATCHのSMLを使ってみる」では、サンプルを使用していましたが、ここでは自作のコンテンツでやってみます。

SMLプレイヤとARシナリオとのAPIを試してみるため、コンテンツの作成はコールバック関数を書き出してくれるSATCH STUDIO Liteを使います。

Webベースでシナリオとインターラクティブにやる場合、コールバック関数の使用は必須です。

サンプルでは、3Dオブジェクトの制御をLua側でやってみました。

ユーザー定義のコールバック関数の使い方もちょっとだけ。

New
サンプルの動画バージョンをアップ。ページの下の方を参照。

tts(Text To Speech)を使ってみました。



コンテンツの作成

SATCH Studio Liteの使い方は以下のページを参照してください。

SATCH StudioのLiteバージョンを使ってみる

で、SATCH VIEWERを使う上で注意が必要なのはApplication IDです。

設定を以下のようにしてください。

アプリIDは、「com.kddi.ar.satch.satchviewer」です。





今回使用したトラッキング用の画像

後は通常通りコンテンツを作成。


Luaコードを追加するために、SATCH STUDIOのフルバージョンでコンテンツを読み込みます。

ちなみに、トラッキングに関わるコードは、main.luaに記述されています。

また、コールバック関数などは、callbacks.luaに記述されています。

で、シナリオをエクスポートします。

署名を取得します。これをしておかないとライセンスエラーになってしまいます。

署名を得るため、SATCH Developer siteのマイページに移動。

SATCH VIEWERサービス一覧で、SATCH VIEWERサービス追加を行います。

ここでは、アプリケーションIDを聞いてきません。

後はコンテンツ追加を行って、登録後、署名ファイルを上でエクスポートされたシナリオ内のdfkファイルに上書きします。



最後にこのシナリオをzip圧縮しておきます。

以上です。



TOP

Webページの作成

まずは、ベースになるHTMLコードです。

こんな感じ。

project.zipは、先に作っておいたシナリオの圧縮ファイルです。


<html lang="ja">
<head>
<title>Mars Landing</title>
<meta charset="utf-8" />
</head>
<body>

<object id="satchViewer" type="application/x-satch" data="http://example.com/project.zip">
    <param name="viewtype" value="vision">
    
    
</object>

</body>
</html>


ボタンやテキストボックスを配置する場合

<html lang="ja">
<head>
<title>Mars Landing</title>
<meta charset="utf-8" />
</head>
<body>

<object id="satchViewer" type="application/x-satch" data="http://example.com/project.zip">
    <param name="viewtype" value="vision">
    
    <div style="top:400px;position:absolute;">
        <table>
            <th><input type="button" value="ボタン" onclick=""></th>
            <th><input type="text" value="" ></th>
            
        </table>
    </div>
    
</object>

</body>
</html>



開発ガイド には、
「HTMLレイヤとARレイヤの連携や、HTMLレイヤとSMLプレイヤの連携は、Javascriptを使ったAPIを通じて行う....」とあります。

APIを使いやすくするためのラッパーライブラリ「satch.js」が公開されていますんで、ダウンロードして読み込んでおきます。

<script type="text/javascript" src="satch.js"></script>


初期化処理をしておきます。これはwindow.onloadのタイミングで実行します。

<body onLoad="ini()">


機能しているかどうか、Toastでメッセージを表示してみます。

<script>
    function ini(){
        satch.init();
        
        satch.toast({"message":"OK!", "mode":"short"});
        
    }
    
</script>


satch.jsはデフォルトの状態では、HTMLレイヤのタッチ透過領域がスクリーン全面になっています。

このままだと、例えば画面上にボタンやテキストボックスを配置しても反応しません。

画面の下の方に配置する場合は、タッチ透過領域を以下のように制限します。

satch.setSvArea({"id":0, "left":0,"top":0, "right":item.width, "bottom":item.height - 200});

また、satch.jsはデフォルトの状態では、id="satchViewer"のオブジェクトタグは非表示(hidden)になっています。

ボタンやテキストボックスを表示する場合は、visibleに設定してください。

SATCH Studio Liteを使った場合、コールバック関数は既に用意されているので、ここでは受け側のJavaScriptを用意しておきます。

例えば、シナリオ内で何かのオブジェクトを表示しそれがタッチされた場合。

開発ガイドやsatch.jsを見ると、このイベントは「onSvTouch」にアサインされています。

そこで、window.onload時にこのイベントをキャプチャするようにしておきます。

例えばタッチ時に、使用されているViewerLuaAPIのバージョン情報を表示し、トラッキングに成功したらsatchViewerを表示し、ロストしたら非表示にしてみる場合はこんな感じ。

function ini(){
        
    satch.init();
    
    satch.toast({"message":"ok!", "mode":"short"});
    
    
    
    window.onSvTouch = function(item){
        
        alert(item.ver);
        
    };
    
    
    
    window.onSvFocus = function(item){
        //SUCCESS
        document.getElementById("satchViewer").style.visibility = "visible";
    };
    
    window.onSvUnFocus = function(item){
        //LOST
        document.getElementById("satchViewer").style.visibility = "hidden";
    };
}




JavaScriptでARシナリオへコマンドを送る場合

satch.enqueueCommand({"reqCode":0, "command":"xxx"});

ARシナリオ側でコマンドを受ける場合

repeatループの中で以下のような感じ。

isCommand, command = componentInterface:pullCommand()
if isCommand then
    local commandName = command["CommandName"]
    local requestCode = command["arg0"]
    
    if commandName == "xxx" then
        --ToDo
    end
    
end


ARシナリオ側からJavaScriptへ通知する場合

イベントコードはダミーです。messageのところは適当になんか入れてください。

eventCallback(0, "EVENT",DEBUG_START, "message", "")

JavaScript側

window.onSvUserEvent = function(item){
    //
    if(item.tag == "EVENT"){
        if(item.message == "message"){
            //ToDo
        }
    }
};




TOP

サンプル

火星の画像をトラックして、着陸船を表示。
コマンドを発行して、着陸船を動かしてみましょう。

SATCH VIEWERを使う場合

このアイコンをタップ








QRリーダーを起動して、下のコードを読み取ります。




QRコード・リーダーのアプリを使う場合


QRコード・リーダーを起動して、下のコードを読み取ります。





トラッキング用画像



PDFが開きますが、サイズ的には50%くらいが一番認識しやすいかもしれません。

初期画面。





トラッキングに成功すると、火星着陸船の3Dオブジェクトが表示されます。





左の「Ready」ボタンをタップすると、火星着陸船の3Dオブジェクトが回転して着陸姿勢になります。











右の「Go!」ボタンをタップすると、火星着陸船の3Dオブジェクトが火星に向かって着陸します。








着陸が完了すると、若干柳腰の火星人がお出迎えしてくれます。







TOP

サンプル2(動画版)

動画と鳴り物入りのバージョンです。

動画の表示には、YouTube JavaScript Playerを使っています。

SATCH VIEWERのQRリーダーを起動して、下のコードを読み取ります。




ボタンとテキストエリアは最初から出しています。

トラッキングに成功していない場合は、ボタンをタップしても反応しません。





後の使い方は、上と同じ。























文言によって火星人さんの表情の印象が変わったり....しません?





で、ここをタップすると「Welcome to mars」としゃべります。





Googleのtranslate_ttsを使ってみました(非公式APIらしいので、使えなくなることもあるようです)。

TOP



スポンサー リンク




トップページ| サイトマップ|