HTML5 CanvasやWebSocketなどの最新技術を駆使して作ったiPhone 4用のブラウザーゲーム「Handy Stadium」。もう遊んでみましたか？
|
|---|
| 最新技術を使って作ったiPhone 4専用レトロゲーム「Handy Stadium」（画像をクリックするとゲームサイトへ移動します） |
- Handy Stadium
- http://bb.mindfree.co.jp/
Handy Stadiumを公開してから1カ月が経ちましたが、もっとたくさんの人に遊んでもらえるようにマインドフリーでは日々改良を続けています。
改良点その1： Chrome ウェブストア対応
iPhone 4専用だったHandy StadiumをGoogle Chromeにも対応させ、Chrome ウェブストアに公開しました（インストールは無料）。 ウェブストアでの公開にあたってChrome向けに最適化したデザインを用意し、サーバーサイドでユーザーエージェントを識別して切り替えています。
- Handy Stadium（Chrome ウェブストア）
- https://chrome.google.com/webstore/detail/kcongnfocbpdhehkkheifejcagogiaeg
Chromeに対応するにはゲーム画面サイズの調整やタッチ操作からクリック操作への変更が必要ですが、今回はJavaScriptとCSSを用意するだけで済みました。デバイスごとに開発言語や技術が変わるネイティブアプリと違い、OSやデバイスが変わっても同じ技術で開発できるのはWebアプリの大きなメリットです。
改良点その2：英語対応
海外のユーザーにも楽しんでもらえるように、ポップアップやヘルプのテキストを英語化しました。ブラウザーの言語設定から日本語と英語を切り替えられます。
改良点その3：Tweet、いいね、友達紹介機能追加
友達と対戦したい方のために、「Tweetボタン」「いいね！ボタン」「Facebookの友達を誘うボタン」を用意しました。友達を誘うボタンを押すと、ユーザーを選択するウィンドウがポップアップで表示され、リクエストを送信できます。
iPhoneの場合はブラウザー上でTwitterやFacebookにログインしていないユーザーも多いので、代わりに「メールで友達を誘うボタン」を追加してあります。
以上、これまでに実施した主な改良点を紹介しました。さまざまな改良によってますます遊びやすくなったHandy Stadium、まだプレイしていない方はぜひ試してみてください。
今回はパフォーマンスチューニングの方法を紹介
さて、ここからが今回の本題です。WebSocketとCanvasを使ってリアルタイム性の高いゲームを作ってみると、PC上のChromeでは快適に動いていても、iPhone 4は動作が遅く、ゲームにならない場合があります。
iOSのモバイルSafariでは、（1）WebSocketのプッシュ通信にタイムラグがある、（2）描画の処理速度が遅い、のが原因です。今回は、これらの問題を解決するためにHandy Stadiumで実施したパフォーマンスチューニングの方法を紹介します。
