Kudan AR SDK で AR Android アプリを作ってみよう〜マーカー上に動画を表示

2018.08.24

こんにちは。エクセルソフトの田淵です。

弊社取り扱いの Kudan AR SDK のエントリーです。

SDK のダウンロードは こちら からお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。

前回の Android のエントリー ではマーカーの上に 3D モデルを表示させるところまでをやりました。

今回は動画を表示してみたいと思います。

現時点でのサンプルコードは ytabuchi の Github にアップしてあります。この後もコミット追加していくのでスナップショットです。

Asset の準備

Finder で waves.mp4 をコピーして、Android Studio の assets フォルダでペーストします。

プロジェクト配下にコピーするか聞かれますので、「OK」をクリックします。

waves.mp4 が 25MB ほどあるので、GitHub にアップする際には注意してください。また、この waves.mp4 が変化が小さくとても見づらいので、ロイヤリティフリーの こんな動画 を使うのも良いかもしれません。

画面（activity_main.xml）の編集

前回同様、動画を表示するボタンを追加します。以下のボタンを ConstraintLayout の最後に追加します。

<Button
    android:id="@+id/showVideoButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="8dp"
    android:onClick="showVideoButtonClicked"
    android:text="Video"
    app:layout_constraintBottom_toTopOf="@+id/clearButton"
    app:layout_constraintLeft_toRightOf="@+id/showModelButton" />

コード（MainActivity.kt）の編集

ボタンクリック時のメソッドで videoNode を操作するので、MainActivity のクラス変数に以下を追加します。

private lateinit var videoNode: ARVideoNode

addModelNode の下に addVideoNode を作り、以下のコードを追加します。

private fun addVideoNode(){

    // ARVideoTexture を mp4 ファイルで初期化
    val videoTexture = ARVideoTexture()
    videoTexture.loadFromAsset("waves.mp4")

    // ARVideoTexture で ARVideoNode をインスタンス化
    videoNode = ARVideoNode(videoTexture)

    // videoNode のサイズを Trackable のサイズに合わせる
    val scale = imageTrackable.width / videoTexture.width
    videoNode.scaleByUniform(scale)

    // videoNode を trackable の world に追加
    imageTrackable.world.addChild(videoNode)

    // 初期状態で非表示
    videoNode.visible = false
}

以下の showVideoButtonClicked のイベントハンドラを追加します。

fun showVideoButtonClicked(view: View){
    hideAll()
    videoNode.videoTexture.reset()
    videoNode.videoTexture.start()
    imageTrackable.world.children[2].visible = true
}

最後まで再生すると動画が止まってしまうので、ボタンクリック時にストップスタートしています。。

最後に setup メソッドの最後に addVideoNode() を追加します。以下のようになります。

override fun setup() {

    addImageTrackable()

    addImageNode()
    addModelNode()
    addVideoNode()
}

これで完了です。ビルドして動かしてみましょう。

サンプルの waves.mp4 が波が地味にザザーンと動くだけなので動いているか良くみてあげてくださいｗ

以下のように表示されれば成功です。

この後は

次は遂にマーカーレスにチャレンジしてみたいと思います。

Kudan AR SDK エントリー一覧

Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ

をご覧ください。

以上です。

タイトルとURLをコピーしました