このページの本文へ

スマホ開発で注目されるライブラリーを一挙紹介

無料で使えるHTML5 JavaScriptゲームエンジンまとめ

2012年07月04日 13時00分更新

松井 健

  • この記事をはてなブックマークに追加
  • 本文印刷

 HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン(ゲーム開発用のフレームワーク)が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。

 本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。

  1. Cocos2D JavaScript (http://cocos2d-javascript.org/)
  2. Crafty (http://craftyjs.com/)
  3. enchant.js (http://enchantjs.com/)
  4. EntityJS (http://entityjs.com/)
  5. gameQuery (http://gamequeryjs.com/)
  6. Gladius (https://mozillalabs.com/en-US/gladius/)
  7. 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とCANVAS2D Webアプリケーション講座

 クリエイティブなコーディングのノウハウを直接学べるワークショップも2012年7月15、16日に開催が予定されている。実践的なノウハウを身に付けたい方はこちらのワークショップにも参加してみよう。

http://swapskills.info/doubbble/06-ws.html

著者:松井 健(まつい けん)

著者近影

デザインとエンジニアリング、フロントエンドとバックエンド、ソフトウェアとハードウェアといったサービス・プロダクト開発の様々な軸の両方向を手掛けるデザインテクノロジスト。iPhone/iPad, Android向けのスマートフォンアプリ開発、JavaScript/Ajax、Flash/Flexを用いたリッチアプリケーションの開発を得意とする。新しいテクノロジーを利用し、大規模な企業向けシステムからソーシャルゲームやインタラクティブな教育アプリなどを開発している。


カテゴリートップへ

ソーシャルランキング
  1. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 164
  2. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  3. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 10
  4. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 5
  5. 【週末まとめ読み】話題沸騰の新ブラウザー「Blisk」ってもう試した? 2
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング