ソーシャルVRこんばんは。腰に課題を感じるエンジニアの皆様におかれましてはぜひ軽めのMacBookを背負ってご活動をお勧めいたします。今回はは複数人で同期しながら遊べるタイプのVRコンテンツ開発を試してみました。内容としては、A-FrameとWebSocketを使ったリアルタイムマルバツゲームの実装です!出来上がりはこんな感じです。リポジトリはこちらgithub.comそして今回出来上がったマルバツゲームへのリンクがこちらです。環境構築アプリケーション実装クライアントサイドの実装マス目を置くプレイヤー(カメラ)を用意クリックできるようにするプレイヤー名表示サーバサイドの実装Socket.IOを使う準備をする別々のプレイヤーとして接続できるようにするマス目のクリックを同期するプレイヤーごとにマルバツを変える画面をタップしなくてもクリックできるようにするインターネット上に公開するまとめアプリの構想まずは今回作るアプリの全体像を作っていきましょう。最初の画像でほぼネタバレしていましたが、いわゆるマルバツゲームを作ります想定するプレイヤーは2人プレイヤーごとにカメラを用意するマス目をクリックすることで、プレイヤー1はバツ、プレイヤー2はマルをつけられるマス目のクリックは視線を利用するお互いのマルバツが相手側に反映されるくらいまでを作ろうかと思っています。今回はWebSocketとA-Frameの連携を試したかっただけなので、ゲーム性の部分は作り込んでいません。環境構築まずは開発環境を作ります。今回はA-Frameのアプリケーション開発なので、A-Frame-Boilerplateを使って開発環境を作りましょう。A-Frameに関しては弊社ブログで何度か登場しているので説明は省きますが、WebVRアプリケーション開発をサポートするフレームワークですね。startするとこのような画面がブラウザに表示されます。アプリケーション実装それではアプリケーションの実装に入っていきます。クライアントサイドの実装ではアプリで利用する下記コンポーネントを用意していきます。今回用意すべきなものはマス目にあたるプレーンプレイヤー1,2用のカメラプレイヤーのクリックを可能にするカーソルプレイヤーの名前を表示するテキストになります。マス目を置くまずはマス目になるプレーンの用意です。index.htmlを次のように修正します。</body></html>こういう感じのマス目が見えると思います。マス目は基本<a-plane>を利用しています。空白、マル、バツの3つのマス画像を用意しており、クリックされたときに画像を変えてマルバツを表現していきます。ちなみに利用している画像はSketchで適当に用意し、Imgurにアップしています。次にプレイヤーに当たるカメラを用意します。今回は2プレイヤー予定ですが、とりあえず1プレイヤー分用意します。プレイヤーを表すオブジェクトはとりあえず<a-box>をおいています。color="#998877"></a-box></a-camera>上記を<a-scene>直下に下記、保存して画面を更新してみましょう。こんなかんじになりました。真ん中の丸っこいのが<a-cursor>です。カーソルをカメラに付けることで、視線の先にあるコンポーネントのクリックを可能にしています。クリックできるようにするここからはJSの実装に入ります。マス目がクリックされるとマルがつくようにしましょう。下記JSを実装してください。});</script>click_squareはそれぞれのマスを表すsquare_idを受け取り、エレメントの属性を書き換え画像をマルにしています。AFRAME.registerComponenを使いcursor-listenerコンポーネントを新規で作成しました。このコンポーネントは、カーソルでクリックされたときにclick_squareメソッドを呼び出し、自身のidを渡す実装になっています。次に、マス目にcursor-listenerコンポーネントを追加します。color="#EEEEEE"></a-plane></a-entity>これでそれぞれのマス目がクリックされたときにマル画像に変更されるようになりました。ついでにPlayer2も用意しましょう。先ほどと同じ要領でカメラとカーソルを用意します。位置はPlayer1の反対側に起き、カメラを反転させておきます。次にプレイヤー名を表示するテキストを追加しましょう。テキスト表示には、A-Frame公式で推奨されている、aframe-bmfont-text-componentを利用していきます。<head>タグに下記を追加します。src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js">次に、カメラのコードを下記のように変更します。black;"></a-camera>テキスト表示用に<a-entity>をカメラの下に追加し、bmfont-textプロパティを追加しました。これでプレイヤー名が表示出来るようになったので確認してみましょう。Player1が見えているので、どうやらPlayer2のカメラが有効になっているようですね。Iでインスペクタを開いてみると、下記のように見えています。これでゲームの挙動は大体実装できました。次にSocket.IOを利用して、リアルタイム同期を実装していきます。サーバサイドの実装Socket.IOを使う準備をするそれではSocket.IOを利用してリアルタイム同期を可能にしていきたいと思います。リポジトリ内でおもむろに下記コマンドを叩きます。socket.ioこれでSocket.IOが使えるようになりました。ラクティンだぜ!別々のプレイヤーとして接続できるようにするここでは、ブラウザ毎に別々のプレイヤーとして接続できるように実装していきます。app.jsという名前で下記サーバ用スクリプトを実装します。});});次にindex.htmlのスクリプトを修正します。});</script>一番最初の接続をPlayer1、次の接続をPlayer2とする用に実装しました。サーバ接続時にconnectedを呼び出す前提とし、そのタイミングでPlayerが存在していなければその接続をプレイヤーとするためにset_playerを呼び出しています。set_playerが呼び出された際に、Player1か2かによって利用するカメラを変えています。それでは早速サーバを立てて試してみましょう。app.jsこの状態で2つのブラウザを開きます。プレイヤー毎に別々のカメラになっていますね!これだけではマス目のクリックが動悸されていないので、次はそちらを実装していきます。マス目のクリックを同期する次はマス目のクリックを同期するためのスクリプトを実装します。index.htmlに下記のスクリプトを追加します。click_square(square_id);})cursor-listener登録時の実装を下記のように修正します。}});次に、app.js側を下記のように修正します。socket.broadcast.emit("click-square",square_id);});サーバを再起動し、ブラウザを更新して試してみましょう。おぉ、ついにマス目へのクリックが同期されるようになりました!プレイヤーごとにマルバツを変えるクライアント側にPlayerのIDを持っているので、それによってマルとバツを変えられるように修正しましょう。player_id);});またサーバを再起動し、ブラウザのウィンドウを2つ立ち上げてlocalhost:3000にアクセスします。この状態でマス目をクリックしてみましょう。プレイヤーごとにマルバツが変わり、あそべるようになりました!画面をタップしなくてもクリックできるようにする今まではPCで動かしていたのであまり気にならなかったけれど、スマホのハコスコなどで動かすと画面をタップするのが結構たいへんです。その場合は、一定時間見つめるだけでクリックイベントを送るような実装をすると良いです。index.htmlの内のカーソル実装を下記の様に変更します。fuse-timeout=1000></a-cursor>fuseをtrueにすると、fuse-timeoutで設定した秒数(ミリ秒)分見つめたオブジェクトにクリックイベントを送信するようになります。今回は1000なので1秒見つめるとクリックイベントが送られます。これで画面をタップしなくてもクリックできるようになりました!インターネット上に公開する今回のアプリはSocial性がウリなので、ローカルで使えるだけだとめっちゃ微妙です。そんなときはみんな大好きheroku先生に助けてもらいましょう。参考にさせていただきましたので、詳細はそちらへ。Procfileの作成Heroku上でのアプリケーション構築HerokuへのデプロイをすればWeb上で動作の確認が出来ます。まとめA-Frame-Boilerplateで簡単にA-Frameのアプリ開発を始められるSocket.IOを使うと簡単にリアルタイム同期が出来る視線を使ったクリックは、fuseを使うと良い以上になります!今回はマルバツをつけた結果のみ共有しましたが、他者を表すアバターの動きを共有出来るとより楽しくなるんだろうなあとは思っているので、今後はそのあたりを試してみたいと思います。この記事を持って今年の更新は最後となります。10月にVR室を立ち上げ、ちょこちょこと勉強してきましたが、Unityを使ったネイティブのVR開発からWebVRまで広く学ぶことが出来た2ヶ月でした。来年はここから更に掘り下げて学んでいこうと思いますので、引き続きよろしくお願いします。3Dコンテンツ用のシェーダーを書く。A-Frameでシェーダーを書く方法についてまとめました。VideoPlayerを使ってWindows向けの全天球動画プレイヤーを実装...こんばんは。...2017-01-30リアルタイム通信が出来るWebVRアプリにWebRTCを利用した音声通話機能を追加してみるあけましておめでとうございます。VRで物理演算を行う方法に...2016-11-02A-Frameで壁に沿って移動する視線カーソルを実装するこんにちは。買って2週間で壊れたBluetoothイヤホンがメーカー...お気軽にお問い合わせ下さい!VRコンテンツ開発を検討している紹介されている機材を使ってみたいその他、VRについての質問があるなど、VR開発や記事の内容についてのご相談は、まずは下記の連絡先までお気軽にお問い合わせください。3Dコンテンツ用のシェーダーを書く。techlogはてなブログをはじめよう!voyagegroup_techさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。