【第21回 HTML5とか勉強会】 ゲーム開発はHTML5+スマホベースが新潮流：D89クリップ（28）

ゲーム開発でHTML5やCSS3、JavaScriptの使いどころは？

　2011年9月27日、サイバーエージェント セミナールームで、「第21回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会だ。今回のテーマは「HTML5＋ゲーム」。当日の様子をお伝えしよう。

「Smartphone 向け HTML5 ゲームの作り方」

　まず、ディー・エヌ・エーの城戸氏（@sou）からプレゼンがスタートした。城戸氏はDeNAで海外向けWebViewHTML5アプリ開発や、内製タイトルのスマホ対応などを手掛けている。

　mobageでは、さまざまなタイトルがすでにAndroid/iOS対応済みであることを紹介した。具体的にはHTML/CSS3ベース、Canvasベース、SWFベース（ExGame）といった複数の実現方法を使い分けている。

　HTML/CSS3ベースについては、選択→アニメーション→選択を繰り返すようなコマンド選択方式のゲームで採用している。Canvasベースについては、アクション性がある即時反応性の必要なゲームで採用している。

　コマンド選択方式のゲームは、データ管理やセキュリティをどうするかといった問題があり、データをローカルに保存するとチートされてしまうので、mobageではクライアント／サーバ型を採用することで対応しているとのこと。クライアント側は選択されたコマンドを送る、結果を再生するだけにとどめ、サーバー側に実行命令を投げるだけにしている。

　もう1つは、攻撃、必殺技、回復などの複雑なアニメエフェクトをどうするかといった課題がある。例えばゲーム内でボス攻撃を表現する際に、ボス画像がせり出す、キャラクターが揺れる、ダメージ値がアニメーション表示される、ヒットポイントが減るといった複数のアニメーションを動かしていく必要がある。mobageでは、個々のアニメについてはCSS3で作り、それらをタイムライン上に並べ、関数にまとめているとのことだった。

　アニメーション処理はCSS3とJavaScriptの組み合わせで実現しているので、1つ1つのアニメをjsDeferred（jQuery's Deferred Object）のメソッドチェーンでつなぎ合わせている。

　Canvasベースについては、DeNAが開発したArctic.jsというActionScript3風に書けるライブラリを使っており、Arctic.jsについては近日公開予定とのことだった。

　SWF再生実行は、ExGameという仕組みを使っている。SWFをそのまま実行でき、ActionScriptも解釈実行してくれる。JavaScriptを1行追加するだけでiOS上でSWFが動作する。ExGameについてはmobageプラットフォームにて提供している。

「アメーバピグのスマホ化」

　サイバーエージェントの原一成氏 (@herablog)による発表。

　まず、「こんなサイトは嫌だランキング」の紹介から始まった。

　ユーザーが嫌だと思うサイトの例として、突然音が鳴る、ポップアップが開く、トップからオールFlash、画像が多くて、重い、メニューが英語、更新されない、文字が小さいなどの特徴が挙げられるとした上で、今回は軽いサイトを作る方法について、スマートフォン版アメーバピグを例として紹介した。

　スマートフォン版アメーバピグは速さを重視し、その実現のためにHTML5などさまざまな技術をベースに作っている。実際に使っている技術として、HTML 5 Markup、CSS3／Sass（SCSS）、Canvas／Ai→Canvas、hashchange、gzip、YUI Compressor、css sprites、OptiPNG、Custom Data Attribute、Data URI scheme、viewport、Full screen modeなどを挙げた。

アバターを描く

　アメーバピグではパーツの描画にImage、CSS sprite、SVG、Canvasの4つを検討した。

　Imageは作るのは簡単だが、3G回線だと読み込みが遅い。CSS spriteはサイズは小さくなるが、アメーバピグはカラーバリエーションがたくさんあるので焼け石に水。SVGはAndroidでは表示されないといった問題があり、今回は、Canvasを採用することにしたそうだ。

　アバターデータについてはイラストレーターで作成し、それをAI→Canvasというツールでソースコードとして吐き出し、整形して軽量化、さらにJSON化してGzip圧縮を掛けることによって88％のサイズダウンを実現できた。

• 　MIX Online:Ai to Canvas Plug-In

ページ作成

　ページ遷移を速くするために、全てを1枚のHTMLに書いて、画面遷移でロードが発生しないようにした。パーツはulタグで定義して表示時に持ってくるようにした。また、画像はなるべくData URI Schemeにしてロードが発生しないようにしている。

　CSSはSassを使って記述したので、変数や関数を駆使して記述できた。

　UIについては、スマートフォンの操作特性上、画面の下にボタンを置いている。

高速化

　高速化のために、css sprites、画像最適化、Minify、ファイル結合、gzip圧縮などを使用した。

　ImageOptimによる画像最適化では3％、Minifyでは33％、gzip圧縮では73％、トータルで67％のサイズダウンに成功した。

ポイント

　最後にポイントとして、サーバへのリクエストを最小限にする、画像をできるだけ減らす、できることはやる、という3つを挙げた。

関連URL

• ImageOptim ― all image compression tools in one Mac app
• CSS Spriteを活用しよう | DesignWalker

「HTML5 ゲームと WebUI アーキテクチャ」

　グリーの米川氏（yonekawa）による発表。

　GREEではフィーチャーフォンのゲームをスマホに移植することが多いので、SWFをCanvasに変換して動かすライブラリを用意した。

　また、HTML5で開発する利点として、マルチプラットフォーム、そしてリリースサイクルのコントロール（A/Bテスト、キャンペーン、イベントの実施）を挙げた。

　HTML5でブラウザベースでも十分な表現力を持ったゲームが作れるようになってきたことを指摘し、開発スピードやマルチプラットフォームを考慮すると、ブラウザベースで作るのが効率が良いことをアピールした。

Web UIアーキテクチャ

　Web UIアーキテクチャとは、HTML5による利点はそのままに、HTML5だけではできないことをネイティブアプリで補う方式だ。Web＋ネイティブのハイブリッドアプリである。

　ブラウザゲームをネイティブアプリでラップすることによって、シングルサインオン、スクリーンショット付きひとこと、カメラ、プッシュ通知、アプリ内課金などを実現できる。

実装方法

　WebViewを組み込んだアプリを作成し、JavaScriptでネイティブアプリと通信し、ネイティブの機能を実行してJavaScriptで返すことで実装している。

WebUIアーキテクチャを採用している例

　WebUIアーキテクチャを採用している例として、Facebook、Google+、OpenFeint SDKなどが挙げられた。

tico

　現在ticoというWeb UI Frameworkを開発しているいて、Web、ネイティブ間の通信をハンドリングしてくれている。

まとめ

　HTML5でブラウザベースでも十分な表現力を持ったゲームが作れることをアピールした。また、開発スピードやマルチプラットフォームを考慮するとブラウザベースで作るのが効率が良いことを指摘した。ネイティブの力を借りることでゲームの体験を向上できるが、どこまでをネイティブに任せるかの線引きが重要であるとのことだった。

「JSクイズゲームの作り方（HTML5実力テストの紹介）」

　続いて、面白法人カヤック 吾郷氏（@kyo_ago）の発表があった。HTML5実力テストの紹介をした。HTML5実力テストとは、HTML5の仕様を中心にしたJavaScript、HTML/CSSに関してのテストが受けられるjsdo.it上のイベントである。

　JavaScript 21問、HTML/CSS 16問で、開始1週間の得点は以下の通り。

　この平均点を見ても、難易度の高い問題であることがうかがえる。採点結果の他に全体順位、偏差値、レーダーチャートなどが見られる。

裏HTML5実力テスト

　HTML5実力テストは、もともと4月1日に「世界的なJavaScript協会で開催している試験がjsdo.it上で受けられるようになりました」的なネタで出す予定だった。

　そのとき作っていた問題は、一般的にjsquizと呼ばれるようなJavaScriptに関する問題だった。

ライブラリの中身で使われているテクニック

　この実力テストで出題される内容は、普段業務などで使うことは少ないが、ライブラリの中身などで結構使われている。jQueryの中のコードをベースに作っている問題もある。

• JSクイズゲームの作り方（HTML5実力テストの紹介）

「あなたを“魅了する”開発環境 enchant.js/PRO」

　ユビキタスエンターテインメント 伏見氏（@sidestepism）による発表。

伏見氏は、UEI秋葉原リサーチセンター所属で、“9leap”プロジェクトリーダー、enchant.js 開発チーム所属。

　enchant.js はHTML5 + JavaSriptのゲームエンジンで、2011年4月にリリースし、オープンソース（MIT & GPL Dual License）で提供されているとのこと。元々は昔のBASICみたいなものがほしい」というアイデアから始まった。国産なので、日本語の情報も多いのがメリットだ。

　9leapという投稿型JavaScriptゲームサイトでは、そのほとんどがenchant.jsを用いたゲームだという。

• 9leap : トップページ - どこでも遊べる、投稿型ゲームサイト

enchant.jsの特徴

　早くて軽くて気持ちいいのがenchant.jsの特徴。

　コードが短く書けて、ループやpreload、互換性などの面倒な部分はライブラリで吸収してくれる。このため、ゲームの本質的な部分に集中でき、ライブラリ自体のコードも短く、何をしているのか把握しやすい。

　9leapに投稿されている2Dレースゲームでは、ソースコードは300行、10KBに収まっている。

拡張性や通信もバッチリ

　enchant.jsではJavaScriptそのものの拡張性を生かしているので、プラグインも簡単に書ける。物理エンジンもリリース予定だ。

　また、通信もサポートしやすい作りになっており、Twitter連携もでき、node.js + WebSocketを使えば、JavaScriptだけでネットゲームが作れる。

イベントも多数実施

　UEI主催の「9leap Game Programming Camp」というイベントは東京、仙台、札幌で開催し、6時間でenchant.jsを学びながら、ミニゲームを1本作るという内容で実施された。

　IGDA Japan&UEI主催の「福島 Game Jam」というイベントでは、被災地をゲーム作りで応援するということで、即席チームで協力し、30時間でゲームを作るという内容で実施され、6チームがenchant.jsを採用した。

　また、UEIの社内Hackathonでは「14時間でネットゲームを3本作ろう」「8時間でTwitter連携ゲームを10本作ろう」などのお題が設定されているということで、enchant.js の効率の良さや、気持ち良さがアピールされた。

ライブコーディング

　ここで伏見氏によるライブコーディングが行われた。ものの数分でクマのキャラクターがブラウザ上で動くようになり、enchant.jsの効率の良さをアピールした。

enchant PRO

　しかしJavaScriptはあくまでSandbox内での実行なので、カメラへのアクセス、ファイルシステムへのアクセス、写真撮影や画像認識、OpenGL、ソースコードの隠蔽など、できないこともたくさんある。それを打破するためにenchant PROを作った。

　enchant PROはAndroid向け開発環境で、WebViewの中でJavaScriptを実行できる。必要に応じてAndroidのAPIをたたくことができ、UIはHTML5＋CSSで書ける。ネイティブアプリにコンパイルされないので動的な更新が可能だ。

• 「enchant.js & PRO」第21回 html5とか勉強会 ショートセッション

関連URL

• enchant.js - HTML5 + JavaScript Game Engine

まとめ

　この勉強会は、各社が実際のサービスでどのようにHTML5やCSS3、JavaScriptなどを活用しているのかが具体的に分かる、非常に内容の濃い勉強会であったように感じられる。

　スマートフォンの高性能化に伴い、スマートフォン向けHTML5対応サービスも、今後増えていくことが予想される。

　この勉強会はある程度定期的に開催しているようなので、HTML5に興味のある方は、ぜひ参加してみてほしい。

筆者紹介

拡張現実ライフ

akio0911（ブロガー・iPhoneアプリ開発者）

AR(拡張現実)・iOSアプリ開発・書評・グルメがメインのブログ「拡張現実ライフ」の中の人。cocos2d for iPhoneレッスンノートを執筆（共著）。 世田谷ものづくり学校の自由大学にてアプリクリエイター道場の講師を担当。アプリクリエイターにメイキングストーリーをインタビューしていく番組「ハイパーアプリクリエイターズ」も手掛ける