milkcocoaでリアルタイム対戦できるFPSを作った話 #game

リアルタイム対戦のできるFPSですよ。

Milkcocoaはリアルタイム通信可能なバックエンドを提供してくれるサービスです。今回はMilkcocoaでオンライン対戦のできるシューティングゲームを作った話を書きます。

なりゆき

これがわずか3時間20分でできました。

ずいぶん前の話ですが、9月24日にjThreeの開発者に初めてお会いし、一緒に夕飯を食べ、3Dコンテンツの未来についてアツく話し合いました。１２時付近に帰宅、jThreeとmilkcocoaを組み合わせた、いい感じのゲームを作ろうと思い立ち、日をまたいで３時２０分に完成しました。次の日になってから、いつもお世話になっているデザイナーさんが、デザインを調整してくれました。こんな簡単に3Dゲームが作れる、jThreeに感動です！

jThreeとmilkcocoaのすばらしさを少しだけご紹介します。

やったこと

jThreeは光源やカメラの位置をタグで記述することができます。


<goml>
<head>いろいろ</head>
<body>
<scene>
  <obj style="rotateY: 1.57; position: 15 -35 -72;">
    <mesh geo="#sky" mtl="#sky-mtl" />
    <mesh geo="[type='Circle']" mtl="#ground-mtl" style="positionY: -.5; rotateX: -1.57;" />
  </obj>
  <light type="Amb" style="light-color: #f0f0f0;" />
  <light type="Dir" style="light-color: #5a5a5a; position: 1 1 1;" />
  <light type="Dir" style="light-color: #5a5a5a; position: -1 1 1;" />
  <camera style="position: 0 15 40; lookAtY: 15;"/>
</scene>
<body>
</goml>

そしてjQueryのように、簡単に3Dモデルを操れます。


j3("scene").append('<obj id="objid" style="rotateY: 1.57; position: 15 0 0;"><mesh geo="#geoid" mtl="#mtlid" /></obj>');

j3("#objid").css("position", [ 0, 0, 0 ]);

milkcocoaのsend関数で、プレイヤーの位置や弾の発射を同期しています。以下は弾の発射を同期しているイメージです。弾を撃つshoot関数では、send関数を利用してデータの送信を行っています。自分も含めた複数のクライアントが、それを受け取り描画を開始します。send関数でのデータの送信から他のクライアントが受け取るまでの間隔は、平均して20ms〜30msでした。


var ds_bullet = milkcocoa.dataStore("bullet");

ds_bullet.on("send", function(e) {
  draw_shooting(e.value.bullet_id, e.value.pos, e.value.vec);
});

function draw_shooting(id, pos, direction) {
  //弾を描画する処理
}

function shoot() {
  ds_bullet.send({
    bullet_id : "unique id",//id
    pos : {}//位置
    vec : {}//方向
  });
}

Playerの移動はちょっと難しかったです。send関数でPlayerが移動する度に位置を同期すると、１秒間に何十リクエストという通信をしてしまい、結果的に遅延が発生してしまいます。そこで１秒ごとに位置の同期を行い、前の動きから次の動きを予想するようにしています。

ソースコードはこちらです。

ぜひ触ってみてください！

まとめ

こんな簡単にオンラインゲームが作れる点は、感動ものです。

＊追記

こんなのも作りました。
マルチプレイゲームライブラリ：https://github.com/milk-cocoa/multiplay-game-with-milkcocoa