GGJ2017東京工科大学会場に今年も参加しました

 

 

 

 

今年もGGJ出てました。会場はいつものTUT。

つくったもの

 

ROBOCOKE

最終発表動画

Play Now

http://bit.ly/ggjtut_2

※音が出ます

概要

コーラを原動力にして進むロボットがコーラを集めるゲームです。
海に囲まれた島々があり、島にはひとつづつコーラが置かれています。ロボットはコーラを振って飛んで移動するのですが、飛び続けるとコーラが減るので回収と使用をうまく使い分けてスコアを稼いでいきます。

操作方法

スマホ,タブレット…画面をタッチしながら端末を振ります。タッチを離すと向いている方向にロボットが飛んでいきます。
PC(オプション)… 矢印キーで操作

VRモード

操作しているプレイヤーの視点をVRビューで楽しめるVRモードも搭載しています。
あそび方
ゲームプレイヤー : http://playcanvas.utautattaro.com/ggj17/vr_new/
VRビューワー    : http://playcanvas.utautattaro.com/ggj17/vr-dev1.6/

スマホ(PCでも可)を2台用意して、それぞれのリンクに1台ずつアクセスします。
ゲームプレイヤーのキャラ視点がVRビューワーの視点にリアルタイム同期します。ハコスコなどを使うとより立体視できます。
※ゲームプレイヤーが複数いる場合、VRビューワーはすべての座標を受け取ろうとするためパタパタします。誰もやってなさそうな時間帯を狙うのがポイントです。

実装

オールWebGLで、すべてPlayCanvasを使って開発しています。
画面のダイナミックなUIはすべてHTML+CSSで実装しています。

端末のジャイロセンサーにアクセスして加速度を取得して振りを取っています。

VRモードのブラウザ間リアルタイム同期にはPhoton Cloudを利用しています。

今回のGameJamでわかったこと

・PlayCanvasは161万ポリゴン出せる

PlayCanvasはWeb上で動作するのでローカルで動作する他のエンジンに比べリソース管理は慎重に行うべき。ですが48時間と限られているゲームジャムにおいてはそんなこと言ってる余裕はありません。今回もモデラ―さんが作ってくれた高品質なモデルをシーンにバンバン配置していってゲームを開発。最終的にプロファイラーでみたら161万ポリゴンでした。オーバーヘッドがありますがiPhone 5sのブラウザでも40fps程出ていたのが印象に残っています。3年前の端末のスマホブラウザでそこまで描画できるPlayCanvasすごい。

・Webデザイナー大活躍

すべてWeb上で動作するのでWebで使えるものは大体使えます。このゲームのUIもHTMLとCSSで作られていて、上の時間表示と右側のコーラのバーはどちらも矩形のdivを色付けしてプログレスバーっぽいことしています。
チームに普段はWeb関係のことをやっていて趣味でゲームジャムに参加しているWebデベロッパーがおり、そのあたりをやってくれました。特に右側のバーなんかは、コーラを振ったときのバーとコーラの残量が二つ存在するプログレスバーになっています。さらにアニメーションもCSSで実装されています。

WebGLゲームが流行ったとき、WebデザイナーはWebGLゲームのUI開発者というキャリアもありそうですね。

・PlayCanvas × PhotonでマルチVRゲーム開発!

今回のゲームジャムの追加課題で「ヴレンド VRを見ている人と、見ていない人が協力する必要のあるVRゲームを作る。」があり、挑戦してみようということで挑戦。
VRビューワーは見るだけしかできませんが、スマホプレイヤーよりも直感的にあたりを見回せます。声の掛け合いが重要です。

実際に作ってみて、
ゲームキャラクターと同じ目線にカメラを置いてスマホHMDでクルクル見回すだけで結構おもしろく、自分の予期したタイミングにもう一人のプレイヤーが操作すると没入できるし、予期していないタイミングにやられるとものすごくびっくりしてとても酔います。VR同士のマルチプレイは結構ありますが、このタイプのマルチプレイも結構面白いですね。

・そういえばジャム中、「競合」、「コンフリクト」と言う言葉を発してない

これは本当。
PlayCanvasの即時同期が強力すぎて、マージやコンフリクトのための時間は1hもなかったです。ヤバい。
その分誰かが出しているエラーに引っ張られることもありますけどね。

・console.errorはスマホからでも見えるしPlayCanvasでやるとビルドしたら消える

スマホブラウザ向けゲームを作るときにめんどくさいのがconsoleのログが見えないことです。うちのチームではconsole.errorでログ実装することでスマホにエラーとして表示されるのでそれでデバッグしてました。ビルドするとwarning扱いされるので消えるのも便利。

・オーバーヘッド対策

物理エンジンをもりもり使ったゲームを作ったのですが、アセットのロードなども含めて起動時のオーバーヘッドがすごいです。
それらに引っ張られてすべての処理が止まり最初だけ5fpsくらいまで落ちるので、いきなり画面を見せちゃうとフリーズと思うほどの待ちが生じてます。
なので今回はオーバーヘッド対策のため以下のことをやってみました
シングルシーンで実装
あるにはあるのですがPlayCanvasのシーン切り替えは結構実装がめんどくさいうえにロードが遅めなのでユーザーにはフリーズしたかと思わせてしまいます。
またシーンのロード二中のコールバック等を実装するための手段やアセットも今のところ特になく、従来のゲームエンジンのようにたくさんシーンを作ってぱかぱか切り替えるのは現実的でないです。

なので今回はシーンは1つで、すべてカメラを切り替えることで実装しています。
最初のロードですべてを読み込んで、粗が目立つゲーム部分とは別に単純なタイトル部分を最初にカメラでレンダリングし、時間がたったらゲーム部分に切り替わるようにしています。

赤丸の部分がゲームの部分で、青丸の部分がタイトルの部分です。
このカメラを切り替えることで遷移っぽくしています。時間があったらカメラのlerpとかも実装したかった…

・全員の端末で即時実行

URL一つでデバッグ実行できるため、全員のスマホが検証機になります。ゲームジャムにおいて特定のプラットフォーム開発でやるときにありがちな、プラットフォーム依存によってチームの一人しかビルドできなくなってしまうような状態はなかったです。
その点ハードウェアやブラウザ依存とは深く関わることになり、AndroidとiOSのジャイロセンサの座標系が違うなどの端末依存の現象に悩まされることは結構ありました。

またすぐ実行できる、展開できるため「これこうしたほうがいいね」➡︎「直しました、もう一度読み込んでください」のサイクルがとても速かったです。さすがWeb。

globalgamejam.orgに組み込めた

これは個人的にやりたかったんですが、完成したゲームをiframeでGGJのページに直接組み込みました。

http://globalgamejam.org/2017/games/robocoke
いつも思ってたのは、GGJで作ったゲームはそのあと遊ばれないことが多いんですよね…

理由としてexeがあるならまだしもsourcefileのみzipでアップロードされているチームが多く、ものすごい重いリソースをダウンロードしてゲームエンジンを通してビルドしなおさないと遊べないという。。。そして大体なにかしらの依存関係によるエラーが出て遊べないという。。。
Webプレイヤーリンクが記載されているのも最近見ないです。ゲームジャムで作ったゲームが遊べないのはとても残念。

ということでGGJのサイトに組み込んでみました。これでもう迷わないはず。その分管理のコストも発生しますが、とりあえずは満足です。このスタイルが当たり前になってくれたらうれしいですね。

twitter

来年も出れたらいいなーと思います。
そのころにはPlayCanvasでの開発が主流になったらうれしいなあ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA