悔恨ドリブンコンテンツへスキップ悔恨ドリブン悔しさをバネに生きるサイドバー切り替え2017年1月23日GGJ2017東京工科大学会場に今年も参加しました今年もGGJ出てました。会場はいつものTUT。Nowhttp://bit.ly/ggjtut_2※音が出ます概要コーラを原動力にして進むロボットがコーラを集めるゲームです。海に囲まれた島々があり、島にはひとつづつコーラが置かれています。ロボットはコーラを振って飛んで移動するのですが、飛び続けるとコーラが減るので回収と使用をうまく使い分けてスコアを稼いでいきます。操作方法スマホ,タブレット...画面をタッチしながら端末を振ります。タッチを離すと向いている方向にロボットが飛んでいきます。矢印キーで操作VRモード操作しているプレイヤーの視点をVRビューで楽しめるVRモードも搭載しています。http://playcanvas.utautattaro.com/ggj17/vr-dev1.6/スマホ(PCでも可)を2台用意して、それぞれのリンクに1台ずつアクセスします。ゲームプレイヤーのキャラ視点がVRビューワーの視点にリアルタイム同期します。ハコスコなどを使うとより立体視できます。※ゲームプレイヤーが複数いる場合、VRビューワーはすべての座標を受け取ろうとするためパタパタします。誰もやってなさそうな時間帯を狙うのがポイントです。実装オールWebGLで、すべてPlayCanvasを使って開発しています。画面のダイナミックなUIはすべてHTML+CSSで実装しています。端末のジャイロセンサーにアクセスして加速度を取得して振りを取っています。Cloudを利用しています。今回のGameJamでわかったこと・PlayCanvasは161万ポリゴン出せるPlayCanvasはWeb上で動作するのでローカルで動作する他のエンジンに比べリソース管理は慎重に行うべき。48時間と限られているゲームジャムにおいてはそんなこと言ってる余裕はありません。今回もモデラ―さんが作ってくれた高品質なモデルをシーンにバンバン配置していってゲームを開発。最終的にプロファイラーでみたら161万ポリゴンでした。5sのブラウザでも40fps程出ていたのが印象に残っています。3年前の端末のスマホブラウザでそこまで描画できるPlayCanvasすごい。・Webデザイナー大活躍すべてWeb上で動作するのでWebで使えるものは大体使えます。このゲームのUIもHTMLとCSSで作られていて、上の時間表示と右側のコーラのバーはどちらも矩形のdivを色付けしてプログレスバーっぽいことしています。チームに普段はWeb関係のことをやっていて趣味でゲームジャムに参加しているWebデベロッパーがおり、そのあたりをやってくれました。右側のバーなんかは、コーラを振ったときのバーとコーラの残量が二つ存在するプログレスバーになっています。アニメーションもCSSで実装されています。WebGLゲームが流行ったとき、WebデザイナーはWebGLゲームのUI開発者というキャリアもありそうですね。VRを見ている人と、見ていない人が協力する必要のあるVRゲームを作る。」があり、挑戦してみようということで挑戦。VRビューワーは見るだけしかできませんが、スマホプレイヤーよりも直感的にあたりを見回せます。声の掛け合いが重要です。実際に作ってみて、ゲームキャラクターと同じ目線にカメラを置いてスマホHMDでクルクル見回すだけで結構おもしろく、自分の予期したタイミングにもう一人のプレイヤーが操作すると没入できるし、予期していないタイミングにやられるとものすごくびっくりしてとても酔います。VR同士のマルチプレイは結構ありますが、このタイプのマルチプレイも結構面白いですね。・そういえばジャム中、「競合」、「コンフリクト」と言う言葉を発してないこれは本当。PlayCanvasの即時同期が強力すぎて、マージやコンフリクトのための時間は1hもなかったです。その分誰かが出しているエラーに引っ張られることもありますけどね。・console.errorはスマホからでも見えるしPlayCanvasでやるとビルドしたら消えるスマホブラウザ向けゲームを作るときにめんどくさいのがconsoleのログが見えないことです。うちのチームではconsole.errorでログ実装することでスマホにエラーとして表示されるのでそれでデバッグしてました。ビルドするとwarning扱いされるので消えるのも便利。物理エンジンをもりもり使ったゲームを作ったのですが、アセットのロードなども含めて起動時のオーバーヘッドがすごいです。それらに引っ張られてすべての処理が止まり最初だけ5fpsくらいまで落ちるので、いきなり画面を見せちゃうとフリーズと思うほどの待ちが生じてます。今回はオーバーヘッド対策のため以下のことをやってみましたシングルシーンで実装あるにはあるのですがPlayCanvasのシーン切り替えは結構実装がめんどくさいうえにロードが遅めなのでユーザーにはフリーズしたかと思わせてしまいます。シーンのロード二中のコールバック等を実装するための手段やアセットも今のところ特になく、従来のゲームエンジンのようにたくさんシーンを作ってぱかぱか切り替えるのは現実的でないです。今回はシーンは1つで、すべてカメラを切り替えることで実装しています。最初のロードですべてを読み込んで、粗が目立つゲーム部分とは別に単純なタイトル部分を最初にカメラでレンダリングし、時間がたったらゲーム部分に切り替わるようにしています。赤丸の部分がゲームの部分で、青丸の部分がタイトルの部分です。このカメラを切り替えることで遷移っぽくしています。時間があったらカメラのlerpとかも実装したかった...・全員の端末で即時実行URL一つでデバッグ実行できるため、全員のスマホが検証機になります。ゲームジャムにおいて特定のプラットフォーム開発でやるときにありがちな、プラットフォーム依存によってチームの一人しかビルドできなくなってしまうような状態はなかったです。その点ハードウェアやブラウザ依存とは深く関わることになり、AndroidとiOSのジャイロセンサの座標系が違うなどの端末依存の現象に悩まされることは結構ありました。実行できる、展開できるため「これこうしたほうがいいね」➡︎「直しました、もう一度読み込んでください」のサイクルがとても速かったです。globalgamejam.orgに組み込めたこれは個人的にやりたかったんですが、完成したゲームをiframeでGGJのページに直接組み込みました。http://globalgamejam.org/2017/games/robocokeいつも思ってたのは、GGJで作ったゲームはそのあと遊ばれないことが多いんですよね...理由としてexeがあるならまだしもsourcefileのみzipでアップロードされているチームが多く、ものすごい重いリソースをダウンロードしてゲームエンジンを通してビルドしなおさないと遊べないという。大体なにかしらの依存関係によるエラーが出て遊べないという。Webプレイヤーリンクが記載されているのも最近見ないです。ゲームジャムで作ったゲームが遊べないのはとても残念。いうことでGGJのサイトに組み込んでみました。これでもう迷わないはず。その分管理のコストも発生しますが、とりあえずは満足です。このスタイルが当たり前になってくれたらうれしいですね。2017年1月22日PlayCanvasによる「RoboCoke」。WebGLでインストール不要のスマホアプリをリアルタイム同時並列開発してVR対応でオリジナリティのあるマルチプレイすごい。白井研3世代コラボなこのチームもすごい。来年も出れたらいいなーと思います。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。WordPress.com.。