PlayCanvas + photonでマルチプレイブラウザゲームを作る

PlayCanvasとphotonで手軽にマルチプレイを実装してみた。

follow me!

公式サンプルなんかでは、node.jsをつかったサンプルがあったりしたけど、サーバー用意する必要あるし、サーバーのコードを書く必要もあるし、大変。

そこで今回はphoton cloudをつかって、PlayCanvas上のコードだけでマルチプレイを実装してみた。

百聞は一見に如かず

移動 : WASD , Shot : Enter

フルスクリーンはこちら

機能としては、ルーム作成、ルーム参加、ルーム退室、ランダムマッチメイキング、物理イベントの同期、モバイル対応

Photonは無料の20CCU(同時接続数)のAppIDを使用しているので、20人までマルチプレイ可能。
ブラウザをたくさん開いてやってみたり、スマホとPCとで開いたりしてみてね

導入方法は比較的簡単
photonのSingle platform > JavaScript SDKをダウンロード
その中にあるdemo-loadbalancinサンプルを今回は参考にした。

あいにくjavascriptのサンプルには今回作成したゲームのようなリアルタイム性の高いサンプルはなく、チャットやターンベースゲームが多かったのだけど、その辺は他のnativeのサンプルを参考に実装。

上記のゲームでは、座標情報、回転情報、弾の進行方向情報をイベント駆動で同期
比較的シンプルにまとまってる、はず。

photonのライブラリはサンプルと同様にPhotonフォルダ以下に配置。HTML5/WebGLでの通信プロトコルはwebsocketなので3rdpartyフォルダも同様に配置。
20161209追記・不要

ただ、そのまま持ち込むとhttpsの時にはじかれてしまったので、Photon-Javascript_SDK.js内部のWS :の部分のポートをhttpからhttpsのポートに書き換えて臨時対応。汚いので何とかしたい。
20161209追記・fix済み

実装的にはまだ不完全だけど、とりあえずloadbalancingのオブジェクト(サンプルでは demoloadbalancing)のオブジェクトをもったpc-entityを同期させたいentityのスクリプトから適宜呼び出してraiseEvent, onEventでやりとりしてあげればいいかーとおもってる。

UnityでいうところのPhoton view的なコンポーネントを実装したらもっと早そうなので今度取り組んでみる。

イベント時とかにurl配ってみんなで楽しめる系のコンテンツ作りたいときにこの組み合わせは便利な気がする

project overviewはこちら

P.S.
ポータルサイトを更新したのでぜひ見てね
utautattaro.com

2016.12.09追記

Githubにプラグインとして公開しました

削るところ削ってかなり軽量に。
360KBくらい。
導入方法はREADMEに詳しく記載しているのでどうぞ。
何かわからないこと等ありましたら@utautattaroまで

コメントを残す

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

CAPTCHA