ITエンジニアのための勉強会・イベントレポート情報メディア

勉強会に行ってみた!第53回「【ハンズオン】ソーシャルVRアプリをつくろう!」
event

勉強会に行ってみた!
第53回「【ハンズオン】ソーシャルVRアプリをつくろう!」

2017.08.25

 
  • このエントリーをはてなブックマークに追加

たった1時間で複数人参加型のVRアプリを作ろう、という勉強会です。PlayCanvas というプラットフォームを使って開発します。ぼくもハンズオンに参加したんですが、ブラウザ版Unityみたいな感じでよくできていて、ぼくも本当に1時間でできました。すごかったです。

三土たつお

会場は東京・渋谷のセルリアンタワーでした。

エレベーターで11階に上り、GMOクラウドのイベントルームへ。

講師は、PlayCanvas 運営事務局の津田良太郎さんです。

PlayCanvas というのは、Webに特化したクラウド型のゲーム開発プラットフォームとのこと。ゲームの作成や実行、共有などがすべてウェブでできる、オープンソースのシステムです。今回はこれを使ってWebVRアプリを開発するんですが、触ってみたら本当に使いやすくてびっくりしました。

エディターはこんな見た目で、Unity みたいな感じですね。しかし動いてるのはなんとブラウザの上です。

複数人が参加する仕組みについては、Photon というネットワークゲームを作るためのサービスを利用します。今回はこの PlayCanvas と Photon をつかってこんな見た目のアプリを作るとのこと。

オレンジ色のVRゴーグルくんみたいなのが他の参加者で、この空間の中をみんなが自由に動き回ります。スマホでも動くので、これをVRゴーグルにセットして左右分割した画面でみれば、ちゃんとVRになる!

なお、会場ではこんな組み立て式のゴーグルが配られていました。

かわいいでしょう。早くこれを使って自作のVRアプリを見てみたいです。というわけで早速ハンズオンが始まりました。

ハンズオン開始

まずは https://playcanvas.com/ にアクセスしてアカウントを登録します。その後、新規プロジェクトを作成するとこんな画面になります。

プロジェクトのテンプレートが選べるんですが、そこにすでに「VR Starter Kit」というのがあるんです(上から3つめ)!手軽ですね。これを選んで、名前をつけて新規作成。その後、プロジェクト管理画面の「EDITOR」というボタンを押すと、こうなります。

画面の意味は次のとおり。

(ハンズオンのスライド資料より)

ゲーム世界を表す「シーン」に、その中のオブジェクトの一覧を表す「ヒエラルキー」、ファイル一覧を表す「アセット」、それからオブジェクトの詳細を表す「インスペクター」。

Unity ライクなツールに慣れている人なら一発で分かると思います。でもこれブラウザで動いてるんですよね。ほんとすごいです。

いまデフォルトで四角いオブジェクトが三つ浮いています。この状態でとりあえずスマホで実行してみましょう。まず、プロジェクトのURLをスマホに渡します。そして同じようにエディターを起動して実行ボタンを押すと、こんなふうになります。

(スライド資料より抜粋)

なんと簡単!あとはスマホをゴーグルに入れて眺めると、ちゃんとVRです!頭の向きにしたがって画面が変わるし、立体的に見えます。うれしいです。

では、やりたいことを実装していきましょう。

まず、各種ファイルを保存するためのフォルダを、アセットの中に作成します。ここでは「workspace」として、その下にさらに「model」「photon」「src」を作成します。

次に、最初に見たVRゴーグルくん(勝手に名付けました)のモデルを取り込みます。津田さんが作成済みのモデルデータをダウンロードし、アセットの「model」フォルダにドラッグ&ドロップします。

その後、色の調整などをしてできたモデルをシーンにドラッグ&ドロップします。

すると! VRゴーグルくんが確かにシーンに登場しました。

次にソーシャル部分の準備をします。他のプレイヤーと同じ空間を共有したいわけですが、そのために Photon というサービスを利用します。

まず、PlayCanvas 上で Photon を使うためのライブラリーを githubからダウンロードし、アセットに追加します。

つぎに、Photon を扱うためのスクリプトである PhotonController を作成します。そして、空間を共有するためなどに使う AppId や Region の設定を行います。Photon の準備はいったんここまで。

ではいよいよ動きを実装しましょう。スタートするとランダムな位置に出現し、画面内をタッチするとその方向に進むようにします。

自分自身が視点(カメラ)となって動くので、カメラにスクリプト(player.js)を追加します。

動きを制御するスクリプトは javascript で書きます。なんたってウェブですから!しかもエディターもブラウザーで起動します。他のウェブベースのモダンなエディターみたいに、補完が効いたりしてよくできてます。

簡単に中身を見てみると、Player.prototype.initialize で起動時の処理を定義していて、setLocalPosition() に Math.random() を使うことでランダムな位置に出現させています。

Player.prototype.update ではフレーム毎の処理を定義していて、translate() 内で Math.sin(), Math.cos() を使って向いている方向に進ませています。

ソーシャルVRアプリですから、他のプレイヤーもいるわけです。そこで、他のプレイヤーが入室してきた際の処理を入れます。まず、他のプレイヤーたちの位置などを管理するオブジェクトを作ります。ここに、他のプレイヤーの位置情報などを入れる配列や、モデルなどを定義します。

その後、他プレイヤーのオブジェクトを作り、モデルを当てはめます。同じくVRゴーグルくんを使います。そして中心位置などを微調整します。

つぎに、他プレイヤーの入室、退室を制御するスクリプトを書きます。入室や退室があると、Photon からのコールバックがあるので、それが呼ばれた際の動きを定義します。ここでは、部屋にいる人の配列に、新規に入室した人を追加したりしています。

次に、自分の動きを他のプレイヤーに送信し、他のプレイヤーの動きを受信することで、全員の画面内で、他プレイヤーの位置と向きが同期するようにします。

あとは、ゴーグルをかけて実行するだけ!

ゴーグル内ではこんな映像が見えていました。

(実際には左右に二分割されていました)

すぐ近くで一人がこちらを向いていて、遠くで左を向いている人がいます。互いの位置や顔の向きもリアルタイムに変わっていました。

自分が手を動かして作ったものが実際に動くところをみると、やっぱり嬉しいですね。しばらく遊んでしまいました。

PlayCanvasの最新情報については以下からチェックできるそうです。
https://twitter.com/playcanvasjp

まとめ

とにかくすべてがブラウザでてきるという手軽さにびっくりしました。重いエディターを立ち上げて、コンパイルして iOS にインストールして…みたいなめんどくささが一切ありません。WebVR だから処理速度は落ちるのかなあとは思っていたんですが、デモアプリを見る限り、普通にやりたいような範囲のアプリであればサクサク動いているように見えますし、実際に商用で利用している例も増えているようです。PlayCanvas は失礼ながら知らなかったんですが、これは試したほうがいいぞと思いました。

今回行った勉強会:「【ハンズオン】ソーシャルVRアプリをつくろう! ~1時間で複数人参加型のWebVRアプリを開発~」
https://atnd.org/events/87969

原稿: 三土たつお
1976年生まれ。プログラマー、ライター。プログラマーとしてはふだんPHPを書いてます。ライターとしてはニフティのデイリーポータルZとかで書いてます。近著「街角図鑑」(実業之日本社)。
http://mitsuchi.net

勉強会に行ってみた!第53回「【ハンズオン】ソーシャルVRアプリをつくろう!」

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW