スターティアラボ 初心者向けWebVR勉強会 part2

前回のおさらい

先日、スターティアラボ主催で初心者向けWebVR勉強会を開催しました。

この記事は、前回同様に勉強会の内容を説明していきます。前回は、A-Frameの説明、実際に動かしてみて、サンプルソースコードの説明まで行いました。今回は、いよいよハンズオンの内容を説明いたします。

前回をご覧になっていない方は、先に「スターティアラボ 初心者向けWebVR勉強会 part1」の記事をご覧ください。

ハンズオン

ブラウザ上で動作する迷路を作成します。

新しいサンプルコードを読み込む

前回同様、glitch.com上にA-FrameのサンプルコードをRemixします。

用意した迷路ロジックの読み込み

迷路ロジックはこちらで用意しています。以下からmaze.jsファイルをダウンロードしてください。

用意した迷路ロジック

ダウンロードしたファイルを先ほどRemixで新たに作成したglitch.comプロジェクトにドラッグ＆ドロップします。

迷路ロジックの取得

追加したmaze.jsファイルをライブラリとして読み込みます。



Javascript起動処理を追加します。



起動処理内に迷路ロジックを取得する処理を記載します。



ロジックが正しく取得できているか確認しましょう。
ブラウザ上でF12を押してデベロッパーツールを起動します。

コンソールタブに迷路ロジックから取得した配列データを表示しています。
迷路データは15x15の２次元配列となっており、値が０の場合に通路、１の場合に壁を表しています。配列[1,1]がスタート、配列[13, 13]がゴールになります。

壁の作成

a-boxを壁に見立て、迷路ロジックで壁が現れる場合にa-boxを作成し、３D空間上に追加していきます。

a-boxを作成するためには「document.createElement('a-box');`」で作成できます。
作成したa-boxの色を変更するには「setAttribute('color', 'cyan')」を利用します。setAttributeはタグの属性を設定するメソッドになります。
a-boxを３D空間に追加するには、事前に取得したa-sceneに対して「appendChild」を実行します。



動作確認しましょう。
インスペクター（<ctrl> + <alt> + i）で確認すると、全ての壁が位置[0,0,0]に配置されています。a-boxの属性のposition設定を行なっていないためです。



setAttributeを使って、属性:positionの値を設定します。



動作確認しましょう。
インスペクター（<ctrl> + <alt> + i）で確認すると、迷路ロジックと同じ配置に壁が配置されています。

壁の場所移動、不要なエンティティ削除

本文を記入してください
迷路としてはこれでも良いのですが、もう少し体裁を整えましょう。
読み込み完了後、前方向に迷路が広がっていて欲しいので、迷路を前に持ってきます。また、既存のオブジェクトは不要ですので削除します。






動作確認しましょう。
迷路が前に移動し、今まであった既存オブジェクトが削除されています。

スタート／ゴールの設定

迷路のスタートゴールが分かるよう、オブジェクトを配置します。
スタートとゴールは、迷路ロジックの以下の場所でした。



スタート、ゴールの位置に応じて球:a-sphereを配置します。



動作確認します。

スマートフォンの対応

最後に、スマートフォンへの対応を行います。画面タッチすることで前に進みます。

勉強会の内容は以上になります。
A-Frameの使い方から始まって、簡単なロジックを３D空間に表現する流れを体験できたのかと思います。

次回勉強会は2020/08/21(金)で、テーマは初心者向けWebARとなります。
募集開始しておりますので興味のある方はご参加ください。
https://startialab.connpass.com/event/184941/

以上です。