Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

ゲームエンジンとツール

HTML5 ゲームエンジン

以下は HTML5 と JavaScript で実装されたゲームエンジンの一例です。

  • Canvace: 2.5D ゲーム作成用のHTML5 ゲームプラットフォーム
  • Crafty: 2D の JavaScriptベースのゲームフレームワーク
  • Cocos2D JS: webでもネイティブでも、いずれも一貫したエクスペリエンス開発を提供する。Cocos2D JS では、"一度コードを書いたら、どこでも動作する" ことが、信じられないほど簡単で自然である。単一の JavaScript コードで、webブラウザと、Mac OS X, Windows, iOS, Androidを含むネイティブプラットフォームで動作できます。他の配信チャンネルと同様に、全てのメジャーなアプリストアに、あなたのゲームを配信できます。
  • Construct 2: 初めて WebGL を使用できるようにした HTML5 ゲームエンジンのひとつ。純粋に HTML5 と JavaScript へ出力します。Canvas のみ使っており、JavaScript プラグインで拡張可能です。
  • Div GO: Div Games Studioをベースとした2D・3Dゲームの開発エンジン。  vanilla HTML5 と canvasを改良した新しい関数や変数があります。Div GO には、コードエディタ付きのIDE機能もあり、プロセスや関数の一覧、グラフィックエディタ、実行プロセス一覧、コンパイラ、ジェネレータ / パックのプロジェクトがあります。
  • EnchantJS: 2D もしくは 3D HTML5 ゲーム作成用のシンプルな JavaScript フレームワーク。優れたドキュメントと分かりやすいチュートリアルが用意されているので取り掛かりやすいでしょう。
  • Game Develop: ネイティブと HTML5 ゲームへの出力機能を備えたゲーム開発ソフトウェア。Pixi.js を使用し、WebGL または Canvas で描画。
  • Isongenic Engine: 今日最も有望なエンジンのひとつ。多人数同時参加型マルチプレーヤーネットワークを備えており、Node.js と MongoDB を使い、Canvas か DOM ベースのグラフィックスを出力します。
  • Impact: エディタとその他ツールを備えた JavaScript ゲームエンジンで、色々な種類の (例 2D と 3D) ゲームを作って、web や Android や iOS に発行できます。
  • melonJS: 軽量な 2D ゲームエンジン。WebGL や地図のタイリングにも対応しています。
  • MightyEngine: Web、Android、iOS プラットフォームに対応している 2D ゲームエンジン。プロジェクト、素材、地図を管理できる組み込みエディタ付き。
  • Phaser: Web、Android、iOS プラットフォームに対応している 2D ゲームエンジン。
  • PlayCanvas: クラウド上でホストされた協調的なゲームエンジン。視覚的なエディタ、ブラウザ内コード編集、ワンクリック公開機能を備えています。
  • Stage.js: 軽量で速い HTML5 2D レンダリングエンジンで、クロスプラットフォームゲーム開発用。
  • WiMi5: HTML5 ゲームの作成、公開、収益化プロセスを容易にするテレビゲームプラットフォーム。ビジュアルエディタを使用してプログラミング不要。ワンクリックでいくつかのWebマーケットプレイスに発行できる。zipでゲームをダウンロードして、好きな場所に発行することもでき、これにはネイティブなですくとやモバイルプラットフォームも含まれる。簡単なアプリ内購入が統合されている。
  • RPG Maker MV: "RPG メーカー" シリーズのこのバージョンでは、JavaScript で作成される。カスタムコードやアドオンを追加できて、Windows, Mac, web アプリケーションとしてプロジェクトをデプロイできる。それに加え、アニメとマンガ風のモデルが含まれていて利用できる。

HTML5 ゲームツール

  • Clay.io: 配布、顧客維持、ソーシャル、収益化のためのツール。ユーザアカウント、ハイスコア、成績、クロスプロモーション、ゲーム内課金、解析などの容易な統合。
  • stat.js: シンプルな JavaScript パフォーマンスモニタ。

有用な技術

以下は Web 標準に基づくゲームの開発に便利な技術です。

  • Canvas: 2 次元グラフィックス
  • WebGL: 3 次元グラフィックス
  • Audio: HTML5 <audio> 要素、Mozilla の Web Audio API
  • WebSockets: プレーヤーとゲームサーバ間のリアルタイム通信に使用し、マルチプレーヤーゲームを開発できます。
  • Node.js: Node は、マルチプレーヤーゲームサーバとして使用される場合もあり、ロジックを管理し、プレーヤーに対する WebSockets 接続を処理します。プレーヤー認証やデータストレージにも使用可能で、複数のゲームセッションに渡ってゲームプレイを維持できます。これらはすべて、WebSockets 用の Socket.IO、Redis を扱う他のライブラリ、ストレージ用の MongoDB など、優れたサードパーティ製モジュールで比較的簡単に実現できます。
  • DOM Storage はプレーヤーの端末上にローカルにデータを保存するのに向いています。これによってゲームのデータをキャッシュし、プレーヤーが中断したところから再開できるよう実装することも可能です。
  • Full Screen API を使えば、ブラウザ自体が全画面で実行されていない場合でも、任意の HTML 要素をユーザの画面に合わせて拡大できます。この Mozilla の実装は、全画面モードではキーボードを完全に使えないためまだ完璧ではありませんが、最新の Nightly ビルドに実装され、他の点についてはうまく動作します。
  • アプリケーションキャッシュServiceWorker API: 伝統的なWeb アプリとネイティブアプリの主な違いのひとつは、ネイティブアプリはWebアプリと違ってオフラインでも実行できるという点でした。これは変わりました — アプリケーションキャッシュやサービスワーカーのような新技術は、Web サイトや Web アプリが必要なファイルをキャッシュし、オフラインでも実行できるようにします。これには JavaScript ファイル、CSS、画像などが含まれます。 これを localStorage など他の技術とうまく組み合わせることで、インターネット接続が途切れた場合でも動作し続けるゲームを開発できます。その場合、再度接続したときにすべての変更を同期すれば良いのです。
  • Emscripten は、C や C++ で書かれたゲームを JavaScript へ移植できるようにします。Bananabread のデモは Emscripten を使ったものです。
  • Gamepad API は、ゲームパッドでwebベースゲームのコントロールを可能にします。それがついにテレビやゲーム機上での HTML5 ゲームを正当化するものであるかもしれません。ソファに座っているときにキーボードやマウスを使いたいと思う人はいるでしょうか?
  • Pointer Lock API はマウスを入力デバイスのひとつとして改良する取り組みです。マウス座標が回転したり 3 次元空間内を動き回ったりするような、ゲームや 3 次元視覚化といった状況で使われることでしょう。今のところ、例えばゲーム内で何かをクリックしたい場合に問題となるのを避けるため、画面上を動くカーソ ルは残ります。この新しい API を使えば、マウスの位置を固定したり隠したりして、その代わりにマウスの動作をゲーム世界の動きに使う事ができます。

注記: すべてのブラウザが HTML5 のすべての機能に対応しているわけではありません。例えば、Canvas はバージョン 9 以下の Internet Explorer では標準装備されていません。Explorer Canvas を使えば Canvas の機能を再現できます (しかし理想的ではなく、同じようには動作しません)。WebSockets は IE の場合バージョン 10 以降で対応しており、Android の標準ブラウザは対応していません。 ですがここでも、Socket.IO などを使い Flash でソケット通信を再現することは可能です。WebGL への対応も他のブラウザの最新版できサポートされていますが、Internet Explorer については最新版の 11 が必要です。

ゲームテンプレート

Mortar Game Stub テンプレートを使えば HTML5 ゲームの開発を素早く始められます。あるいはこれを使ってベストプラクティスに関するアイデアを得ることもできます。

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3, nshimizu, kohei.yoshino, ethertank
 最終更新者: Uemmra3,