実録！HTML5でモバイルWebアプリ開発 ― 第1回

WebSocketでスマホ用対戦ゲームを作ってみた

2011年06月20日 10時00分更新

ハン☆スタ制作委員会／マインドフリー株式会社

ツイートする

ゲーム開発に必要な技術と問題点の洗い出し

　Handy Stadiumは、「攻」「守」に分かれ、2人（2台のiPhone）で対戦するゲームです。前に挙げたiPhone 4で使える技術を見ると、WebSocketを使えば2つの画面で（ほぼ）リアルタイムで状況を反映できそうですし、Canvasを使えばゲーム画面の描画もできます。WebSocketのプッシュ通信で同期したステータスをCanvasに反映すれば対戦もうまくいきそうです。

　一方で以下のような問題点を想定できます。

WebSocketを利用したときのタイムラグ
Canvasへの反映のラグ
アニメーションの演出を何に任せるのか
3G回線がプッシュ通信の速度に耐えられるか

　特に最後の「3G回線がプッシュ通信の速度に耐えられるか」は、コードの最適化だけでは解決できないので、タイムラグがあってもなるべく気にならないような実装方法で進めることにしました（結果的にはやはりそれなりのラグが生まれてしまったので、無線LAN環境での利用がおすすめですが……）。

　他の問題点については、モバイルSafariのパフォーマンス最適化によってある程度解決できます。このあたりの工夫については、連載を進めていくなかで実際の対応方法を解説したいと思います。

Handy Stadiumの仕組み

　Handy Stadiumの仕組みは以下の図のようになっています。


ゲーム進行イメージの図（手書きです……）

　なんとなく流れはつかめたでしょうか。まとめると、

アプリケーションにアクセスするとWebSocketに接続する
用意されたスタジアムに2人のプレーヤーが接続するとゲームを開始する
ページを遷移するとWebSocketの接続が切断されるので、ページを遷移せずに表示要素を切り替えゲーム画面に移動する
WebSocketのプッシュ通信でステータスを同期しながらゲームを進行する

といった処理をしています。

　2人のプレーヤーの画面はWebSocketを使って同期させ、ほとんどの処理はWebSocketのmessageイベントによって発火させています。


WebSocketのmessageイベントを利用した処理の発火（手書きです……）

　今回は連載初回ということもあり、あまり突っ込んだ説明はしませんが、ソースコードがないままだと興味を持てないかもしれません。最後に少しだけ、WebSocketのイベント処理部分のソースコード（抜粋）を紹介しておきましょう。


// WebSocketにイベントbind
qws.bind({
  "message": function(e) {
    var data = JSON.parse(e.data),
      type = data.type;
    switch ( type ) {
    // ログアウト
    case "exitRoom":
      // 自分が入っている番号のスタジアム以外はログアウトしない
      if ( parseInt(data.roomId) === parseInt(enteredRoomId) ) {
        MBBM.init.selection();
        b.addKlass("selection");
      }
      break;
    // プレイボール
    case "game.playBall":
      field.css("display", "block");
      MBBM.inning.init(data.inningCount);
      MBBM.status.message("playball");
      break;
    // ステータス：ファウル
    case "game.foul":
      MBBM.status.message("foul");
      if ( !data.strikeCount &#38;&#38; data.strikeCount !== 0 ) return false;
      // ファウルのときはスリーストライク目がない
      //if ( data.strikeCount === 2 ) break;
      MBBM.status.strike("foul");
      break;
    // 投げる
    case "game.throw":
      if ( !field.containsKlass("throwing") ) {
        field.addKlass("throwing");
        setTimeout(function() {
          field.removeKlass("throwing");
        }, 400);
      }
      break;
    // ランナー
    case "game.moveRunner":
      MBBM.status.strike(true);
      MBBM.status.ball(true);
      MBBM.go(parseInt(data.uniformNo)-1, data.from, data.to);
      break;
    // 以下省略
    }
  }
});

　WebSocketのプッシュで処理の内容を送信し、messageイベントで捕捉します。WebSocketで送信できるデータは現状、文字列だけです。messageイベントに引数eで捕捉したデータにdataというプロパティがあり、渡される文字列が入っています。文字列は任意の形式で送受信できますが、JSONオブジェクトとしてパースして扱うと手軽できます。

◆

　今回は簡単な紹介だけになりましたが、次回以降モバイルWebアプリを制作するポイント、パフォーマンスに重点をおいて解説していきます。

著者：ハン☆スタ制作委員会／マインドフリー株式会社

日々切磋琢磨する大阪のイノベーター集団マインドフリー。先端Techとフリーなマインドを武器に「Fun!」なものづくりを目指してます。今回も新しい技術や開発言語が大好き！なSuperフレッシュエンジニア“やんぎー”（Facebookアプリ「Profile Photo Mosaic」を開発）が「世界を驚かせる!?計画」のひとつとして、Webアプリ開発の極みに迫るため「ハン☆スタ」をつくってみました。Let's play baseball♪
フロントエンドエンジニア 5509のnori も技術協力しています。

■関連サイト

前へ 1 2 次へ

カテゴリートップへ