HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン（ゲーム開発用のフレームワーク）が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。
本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。
- Cocos2D JavaScript (http://cocos2d-javascript.org/)
- Crafty (http://craftyjs.com/)
- enchant.js (http://enchantjs.com/)
- EntityJS (http://entityjs.com/)
- gameQuery (http://gamequeryjs.com/)
- Gladius (https://mozillalabs.com/en-US/gladius/)
- Pulse (http://withpulse.com/)
Cocos2D JavaScript
Cocos2Dはもともと、Pythonで開発されたマルチプラットフォームのフレームワーク。iOS向けに移植された「Cocos2D for iPhone」が多くのiPhoneアプリで採用されている有名なゲームエンジンだ。
「Cocos2D JavaScript」は、Cocos2D for iPhoneをベースにHTML5 Canvasで実装したもので、スプライト、タイルマップ、アニメーション、衝突検知、Box2D物理エンジンライブラリーとの連携がサポートされている。
PCに加え、iPhone／iPad、Androidでの動作もサポートされており、マルチプラットフォーム向けのゲーム開発を効率化できる。
Crafty
Craftyは、コアライブラリーのコードがわずか88.4KBと軽量なゲームエンジンだ。コアライブラリーには基本的な機能だけが組み込まれており、個々のゲームで必要なコンポーネントを CraftyComponentsから選んで読み込むことで全体の軽量化を図っている。
コアライブラリーでは、アセット管理、スプライト、衝突検知、柔軟なイベントシステム、オーディオ操作機能を提供。CraftyComponentsには、Box2D連携、経路探索、タイルマップ、WebGLによる3D表示などが用意されている。
enchant.js
enchant.jsは、PC／Mac、iPhone／iPad、Androidで動作するコンパクトなライブラリー。クロスプラットフォームなアプリケーションを開発できるスタンドアロン・ライブラリーで、Webページの他の要素とは独立して動作する。
標準では、ゲームのライフサイクル管理、汎用的なイベントシステム、シーンによる画面遷移制御、アセット管理、スプライト、オーディオ操作機能、衝突検知、タイルマップなどの機能があり、プラグインによって、十字キー、アナログパッドなどの汎用的なUIや、ノベルゲーム向け拡張、WebGLベースの3Dゲーム拡張も追加できる。
日本人によって開発されているので、日本語によるドキュメントが充実している点もうれしい。
EntityJS
EntityJSは、「Entity-Component設計」を設計思想として開発された、コンポーネントベースのゲームエンジンだ。アセットやステージ定義などのゲームデータをJSON/XML/TMX形式のファイルでassetsディレクトリに格納すると、JavaScriptのゲームエンジンから自動的に利用できるようになる。
Rubyで作られたentityjsコマンドを使って、各種テンプレートから新規プロジェクトを作成したり、コンポーネントやテストケースの作成、テストの実施、ビルドによるコードの最適化が容易にできる。
gameQuery
gameQueryは、jQueryのプラグインとして動作するゲームエンジン。jQueryの使用経験がある開発者が、手軽にリッチな2Dゲームを開発できるように設計されている。
マルチレイヤーによるスプライトのアニメーション、スプライトのグルーピング、衝突検知、キーボード状態の検知機能が用意されているほか、タイルマップを作成するツールもあり、編集したマップデータをgameQueryで簡単に読み込める。
Gladius
Gladiusは、Mozilla Labsが開発している3Dゲームエンジンだ。ゲームループ、メッセージング、タスク、タイマーなど、ゲームやシミュレーションに共通する機能を提供する。現時点では、ドキュメントやサンプルが少ないため導入のハードルはやや高いが、今後の成長に期待したいライブラリーだ。
Pulse
Pulseは、Engine／Scene／Layer／Spriteの構成でシンプルに設計されたゲームエンジンだ。ゲーム開発を迅速にするために必要なユーティリティ機能として、アセット管理、スプライトの状態管理とアニメーション、タッチイベントをサポートするイベント管理機能が提供されている。
また、Firebugのようなデバッグツールも提供されており、パフォーマンス状況のグラフ表示、Nodeの状態を確認できるインスペクター、ログレベルごとにメッセージ出力を制御できるコンソールなど、開発時に重宝しそうな機能が満載だ。
◆
本記事では、JavaScriptゲームエンジンの一部を紹介してきた。これらのゲームエンジンを活用すれば開発者が本来力を入れるべきクリエイティブな部分に集中できることになるが、ゲームエンジンがあれば何でもできると考えるべきではない。
ゲームエンジンを本当に使いこなす上で一番大切なことは、ツールなしでも同じものを構築できるスキルだ。そうでなければ、フレームワークやライブラリーに依存してしまい、思い取りのアレンジさえできないだろう。フレームワークやライブラリーはあくまで効率のために利用するものであって、インタラクションの設計やクリエイティブなコーディングの知識などは重要だ。
JavaScriptによるクリエイティブ・コーディングのチュートリアルやワークショップを提供している「Creative JS」の運営者であり、世界的に有名なクリエイティブ・コーダーであるセブ・リー氏が来日し、2012年7月14日のイベント「SwpaSkills Doubbble」に登壇する。難しいと思われがちなことが簡単に実現できるノウハウを学ぶ貴重な機会であり、興味のある方はぜひ参加してみてほしい。
SwapSkills doubbble vol.06
スマホアプリ、ゲームなどにも必須技術！
インタラクションデザインをHTML5,CSS3,JavaScriptで実現！
セブ・リー氏はAngry Birdsの動きをわずか30分でWeb上に再現してしまった人物。エンジンやライブラリーに依存しない真のクリエイティブ・コーディングを習得する方法を紹介する。今だからこそ、JavaScriptの本当の力を身につけよう。
http://swapskills.info/doubbble/06.htmlクリエイティブなJSとCANVAS２D Webアプリケーション講座
クリエイティブなコーディングのノウハウを直接学べるワークショップも2012年7月15、16日に開催が予定されている。実践的なノウハウを身に付けたい方はこちらのワークショップにも参加してみよう。
http://swapskills.info/doubbble/06-ws.html著者：松井 健（まつい けん）
デザインとエンジニアリング、フロントエンドとバックエンド、ソフトウェアとハードウェアといったサービス・プロダクト開発の様々な軸の両方向を手掛けるデザインテクノロジスト。iPhone/iPad, Android向けのスマートフォンアプリ開発、JavaScript/Ajax、Flash/Flexを用いたリッチアプリケーションの開発を得意とする。新しいテクノロジーを利用し、大規模な企業向けシステムからソーシャルゲームやインタラクティブな教育アプリなどを開発している。
