Monacaで Pokémon GO風 VRアプリを作ってみた

こんにちは、中村です。

前回に引き続き、MonacaでVRアプリを作ってみたいと思います。

※前回の記事:コーディングわずか3行!? A-FRAME × MonacaでVRアプリ作ってみた

今流行りの、PokemonGO風のVRアプリを作ってみたいと思います。

今回はボールを投げるアニメーション部分の実装をします。

まずは、背景を実装します。
前回の記事で撮影した公園の360°写真を使用します。

<a-scene>
    <a-sky src="image/sky.jpg"></a-sky>
<a-scene>
スクリーンショット 2016-07-29 9.36.11

次にモンスターを配置します。
お好きな画像を用意してa-skyタグの下に下記を追加して下さい。

<a-image src="image/ant.png" position="0 2 -5" height="5" width="5"></a-image>
スクリーンショット 2016-08-04 8.26.51

次に、モンスターボールを配置します。
これはまさに球体ですね。a-imageタグの下に下記を追加して下さい。

<a-sphere id="ball" position="0 1 2.5" color="#FF0000" radius="0.3"></a-sphere>
スクリーンショット 2016-08-04 8.21.00

これで今回使用する要素は配置出来ました。

それでは、ボールを投げる動作を実装して行きます。

今回はボールが飛んで行くアニメーションを実装したいと思います。
下記をbodyの閉じタグの直前に追加して下さい。

<script>
    var ball = document.querySelector('#ball');
    var timer;
    function throwAnimation() {
        var ms = 0;
        var y = 0;
        var z = 2.5;
        timer = setInterval(function() { 
            ball.setAttribute('position', '0 ' + (Math.sin(y*2)+1) + ' ' + z);
            y += 0.005;
            z -= 0.01;
            if (ms > 300) {
                timer = clearInterval(timer);
            }
            ms++;
        }, 1);
    }
    throwAnimation();
</script>

いかがでしょうか、ボールが放物線を描いて飛んでいくようになったかと思います。

次回は、モンスターに当たったときの判定を加えて行きたいと思います。

ではまた!

Monaca x VRアプリについてのお問い合わせ

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。