読者です 読者をやめる 読者になる 読者になる

ぽかぽかウンティの自由帳

ぽかぽか動物園から投稿します。

Node.js + express + socket.io + Prototype.js で対戦型シューティングゲームをつくる



前につくって 9leap に上げた Javascript ゲームをオンライン対戦ができるように拡張したくなった。
デュエルシューティング

Webで対戦ゲーをつくるには、やはり Websocket が必須だろうと、以下の技術を選択。
サーバーサイドもクライアントサイドも Javascript で書けるから気持ちいい。

Server: Node
Server Side Framework: Express
Client Side Framework: Prototype
Connection: Socket.IO

クライアントサイドは相変わらず Prototype.js
ソケット通信周りに nowjs は使わなかった。

そして相変わらず body タグを canvas として使っている。
画像は一切使用せず、すべて Dom で生成するポリシーも変わらない。

アプリをデプロイするクラウドは Heroku を選択。

しかし、Websocketに対応しているWebサーバーでないと、
xhr-pollingになってしまうとのことで、HerokuではWebsocketは使えない模様。。

WebSocketを使える主なWebサーバとその実装状況

Herokuでは Apachenginx を使っているようで、今さらCometとかないわー

nginxを挟んでsocket.ioのxhr-pollingを動かすには
これは Heroku では使えないのかな?

でもデプロイが簡単だからWebsocketが使えるクラウドに移す前にHerokuにお世話になることにする。

で、書いた途中のコードは以下。前回つくったレガシーコードを解体するのにすごい時間がかかった。
Duel Shooting Online -github-

以下で動作確認ができる。
Duel Shooting Online -heroku-

やはりアクションの同期周りが非常に難しい。レイテンシとかレイテンシとかレイテンシとか。

hit point の同期とか、各オブジェクトの現在位置の同期とか、ちゃんとやらなきゃいけない。

横移動は今は 10px ずつしか移動できないが、後々スムーズに移動できるように改良しないといけない。

今は先着2名様までしか操作できず、残りは観戦モードだが、ルームとかつくって割り振りできるようにしないといけない。

接続が切れたり、画面リロードされたりしたら早速不整合が発生する状況。

node.js + socket.io + enchant.js でつくる、リアルタイム通信ゲーム
などを参考にもしたが、まったくいい実装が思い浮かばなかった。

グランツーリスモ5 の初期のネット対戦動画で、ネットワーク遅延による面白挙動バグ動画が話題になったが、今となっては非常に笑えない。

Node.js とか Websocket とか、C言語で開発している人たちからすればゆとり仕様の開発環境があるのに、こんなにも苦労している。

同期に重きを置くと操作性が悪くなるし、操作性を追求すると同期が疎かになって整合性がなくなってしまう。

ゲームプログラマーはマジで尊敬する。Webでチャラチャラしてごめんなさい。