読者です 読者をやめる 読者になる 読者になる

roman-tech

テクノロジーはロマンだ。

超お手軽VR開発フレームワーク A-FRAME入門:第4回 簡単なゲームを作ってみよう

a-frame vr

前回はVR空間上に配置したジュウシマツの3Dモデルにアニメーションをつけてマサイの踊りをさせてみました。今回はそれを応用して、VRならではの視点を使った簡単なゲームを作ってみたいと思います。

目的

  • 視点を使った簡単なゲームを作成する。

本記事で学べること

  • 視点を使ったUIについて学ぶ
  • 視点を使った場合のイベントハンドリング方法について学ぶ
  • Javascriptと連携して、動的にオブジェクトを作成する

開発編

早速開発にはいりましょう。

視点カーソルの追加

視点の位置を示すために、カーソルを描画しましょう。また、A-FRAMEにおけるカーソルはただの目印という意味だけではなく、カーソルとオブジェクトが重なった場合の衝突判定もしてくれるスグレモノです。VRにおける視点カーソルでの衝突判定はメニュー選択やゲームでの当たり判定などに用いられるため、必須の機能です。是非習得しましょう。
それではカーソルを描画するためにカメラに関する箇所を以下のように修正します。

<a-camera position="0 3 0">
<a-entity id="myCursor" cursor="fuse:true; maxDistance:30; timeout:500;" scale="0.2 0.2 0.2" position="0 0 -5" geometry="primitive: ring" material="color: red; shader: flat; opacity:0.5">
</a-entity>
</a-camera>
各プロパティの意味
  • fuse:本値をtrueにするとカーソルがオブジェクトに当たった場合にクリックイベントを発生させることができます
  • maxDistance:カーソルの最大有効判定距離
  • timeout:カーソルがオブジェクトに当たってからクリックイベントが発生するまでの時間
  • scale:カーソルのサイズ
  • position:カーソルの表示位置
  • geometry:カーソルの形状
  • material:カーソルのマテリアル


上記を設定した結果です。

f:id:roman-tech:20160703205029j:plain:w400

画面中央に赤い円が表紙されていますね!これが視点カーソルです。

イベントの取得

カーソルが表示できたら、今度はカーソルとオブジェクトが衝突した際のイベントの取得を行います。ここからはhtmlだけだと限界があるため、javascriptも使っていきます。まずはhtmlが入っているソース内にjavascriptのファイルを作成しましょう。今回はsub.jsとしました。
そして、htmlの先頭でjavascriptを読み込み、後に作成するjavascriptの関数を呼ぶためにbody onload="init()"を記載します。

[index.html]
<head>
    <meta charset="utf-8">
    <title>sample4</title>
    <script src="../lib/aframe.js"></script>
    <script src="sub.js"></script>
</head>

<body onload="init()">

sub.jsの中身は以下です。

[sub.js]
/* ジュウシマツの数 */
var objnum = 8;

function clickHandler(e) {
    var me = document.getElementById(e.target.id);
    me.parentNode.removeChild(me);
    objnum--;
    if (objnum <= 0) {    
        /* クリア画面を動的に生成する */    
        var scene = document.querySelector('a-scene');
        var img = document.createElement('a-image');
        img.setAttribute('src', '#end_img');
        img.setAttribute('rotation', '0 0 0');
        img.setAttribute('scale', '4 2.5 4');
        img.setAttribute('position', '0 4 -3');
        scene.appendChild(img);
    }
}

function init() {
    /* クリックイベントハンドラの登録 */
    var c = document.getElementsByClassName('obj');
    for (i = 0; i < c.length; i++) {
        document.getElementById('obj' + i).addEventListener('click', clickHandler, false);
    }
}

init関数内ではobjという名前がついたクラスをhtmlからすべて抜き出してそれぞれにクリックされた時のハンドラ(clickHandler)を設定しています。html側ではすべてのジュウシマツのオブジェクトにclass=obj, それぞれのジュウシマツのオブジェクトにobj*(0-7)とユニークなidをつけ各ジュウシマツを区別できるようにしています。こうすることでジュウシマツというカテゴリを一括で扱え、しかも個別にも判断できるようになります。

[index.html]
<a-entity position="0 0 0">
<a-collada-model id="obj0" class="obj" src="#jyushimatsu" rotation="0 -90 0" position="0 3 -10"></a-collada-model>
<a-animation attribute="position" direction="alternate" dur="1000" to="0 5 0" repeat="indefinite"></a-animation>
</a-entity>

ここまで設定すれば、視点カーソルとジュウシマツが重なった時にsub.jsで定義しているclickHandlerが呼ばれるようになります。あとはclickHandlerの中に好きな処理を書けばよいだけです。今回は、ジュウシマツをすべて倒した際にクリア画面を動的に生成する処理を入れました。

ゲームの概要

  • 最初にミッションを示す画像を出す
  • 視点とジュウシマツが重なったらジュウシマツを削除する
  • すべてのジュウシマツが削除できればゲームクリア。クリア画面を表示する

早速遊んでみよう!!

注1)ハコスコのようなVRスコープを使って遊んだほうが100倍楽しいです。というかVRスコープが無いとクリアがかなり困難です。 注2)ジュウシマツを駆逐するにはある程度の時間同じジュウシマツを視線で追う必要があります。気合いで追いかけてください。

進撃のジュウシマツ

あらすじ

遺伝子組み換えにより動物が高度な知能を持った西暦2500年。その動物の頂点に君臨するのがジュウシマツであった。彼らは驚異的な跳躍力を武器に人間に襲いかかってくる。既に地上の人間の99%がジュウシマツの餌食となってしまった。そしてあなたを含む人類とジュウシマツの最後の戦いが始まった。


ワクワク!早速ハコスコを装備!

f:id:roman-tech:20160703212531j:plain:w500
f:id:roman-tech:20160703212056j:plain:w500





。。。とんでもねぇクソゲー なんてもんを作っちまったんだ。とりあえず以下に公開しているので皆さんジュウシマツとバトルを楽しんでみてください。

進撃のジュウシマツ

まとめ

クソゲーとはいえ、わずか100行程度で簡単なVRゲームができてしまいました。恐るべしA-FRAME。非常に手軽に始められる素晴らしいフレームワークですが、やりたいと思うこともちゃんと実装できるのでこれは意外とおもしろいですね!!是非みなさんもお試しあれ〜

以下VR開発にオススメです!

© 2016 Tsukasa Horinouchi