スターティアラボ WebAR勉強会 part2
前回のおさらい
先日、スターティアラボ主催で第二回勉強会を開催しました。
https://startialab.connpass.com/event/184941/
この記事は勉強会の内容についてまとめたものになります。
今回はPart2のため、Part1をご覧になってない方は、こちらよりご覧ください。
https://dev.startialab.blog/WebAR/a90
前回までの記事で、AR.jsとRaycasterの実装まで完了しました。
これからモグラ叩きのゲームに関する実装をメインに進めます。
モグラの配置
BOXをモグラと見立てて、3x3の格子状に配置していきます。
実装内容
モグラ配置の準備を行います。
マーカータグを取得し、3x3に配置するための配列を用意しています。
ループをつかって、3x3の格子状にBOXを配置します。
ポイントは、用意した配列を使ったforEachループで取得できるx、zの値をpositionに設定しているところです。
用意した配列を変更することで4x4などにも対応出来ます。
モグラを配置したら、元々あったマーカータグ内のa-boxタグを削除します。
動作確認
3x3の格子状にBOXを配置することができました。
また、◉のカーソルを使ってRaycasterの動作も確認できます。
Animation
Animationの説明と、実装ソースコードを記載します。
Animationとは？
属性やプロパティの値を、一定時間内に滑らかに変更させることで、アニメーション表現することができます。
一つのオブジェクトに複数のAnimationを設定することもできます。__(アンダースコア２つ)をanimationの後につけて、一意に識別します。
例
animation = "property:position; from:..."
animation__2 = "property:rotation; ..."
BOXを少し上にアニメーションさせる例を使って、設定を説明します。
animation="
property: position; //変化させる項目
dur: 1000; //変化させる時間
from: -1 0.5 -3; //スタートの値
to: -1 2 -3; //エンドの値
loop: 1; //変化させる回数
dir: normal; //変化の方向
startEvents: click;" //開始トリガー
詳しい仕様は以下を参照ください。
https://aframe.io/docs/1.0.0/components/animation.html
実装内容
透明度（opacity）を変化させることで、BOXが現れたり消えたりを表現します。
初回起動のため、Animation内に設定した「startEvent」をemitしてAnimation開始しています。
これだけだと、同じタイミングで現れて消えていくアニメーションになってしまいます。
Animationの開始時間をランダムに変更します。
まず、Animation繰り返さずに１回だけとします。
そして、Animation終了(animationcomplete)を検知するListenerを記載します。
Listenerの中には、setTimeoutを使って一定時間待つ処理を実装します。待つ時間は0秒〜10秒の間でランダムに決まります。
一定時間待ったあと、Animation内に設定した「startEvent」をemitしてAnimation開始します。
動作確認
それぞれのBOXがランダムに現れては消えていく動きになりました。
モグラ叩き判定
最後に、モグラ叩いた判定を入れて終わりにします。
実装内容
叩かれたかどうかの判定は、Clickイベント内に記載します。
Clickイベント発生時に、透明度（Opacity）が０ではない（表示されている）かの判定を入れます。
叩かれたと判定された（Clickイベントが発生して かつ 透明度が０ではなく表示されている）場合、
叩かれたことがわかるように、BOXのAnimationを停止し、色を赤に変え、透明度を１にしてくっきり表示します。
raycaster-intersected、raycaster-intersected-clearedのListenerは不要のため削除します。
動作確認
以上で、WebARモグラ叩きの実装が完了です。
ソースの全容は以下に公開していますので、参考にされてください。
https://glitch.com/edit/#!/startialab-webar-mogura-handson?path=index.html
最後に
WebARを使った簡単なゲームを実装できたかと思います。
WebARってそんなに難しいものではないと知ってもらえれば嬉しいです。
9月に第三回勉強会を開催いたします。
次のテーマはWebVR＋AIとなります。
https://startialab.connpass.com/event/188450/
ブラウザで使える推論モデルを使って、簡単なVRの実装をしていきます。
ご興味ある方は是非ご参加お待ちいたします。