HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ

9月26日にUnityをテーマにした勉強会を開催します。参加はこちらから！

ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。

ゲームエンジンは多数存在しますが、今回は特に2Dをサポートしたソフトウェアを紹介します。

enchant.js

マルチプラットフォーム、iOS/Androidにも対応したゲームフレームワークです。WebGLにも対応しています。アニメーションエンジンも搭載されています。9leapにてユーザベースでたくさんのゲームが公開されています。

enchant.js - A simple JavaScript framework for creating games and apps.

CreateJS

ゲームエンジンという訳ではありませんがCanvasに対応した表現力あるライブラリです。他にもEaselJS、TweenJS、SoundJS、PreloadJSなどと組み合わせてゲーム開発を行えるようになっています。

CreateJS | A suite of Javascript libraries and tools designed for working with HTML5

gameQuery

jQueryプラグインとして提供されています。もちろんゲーム独自の作り方は入りますが、それでも既存のテクニックが活かせるかも知れません。

gameQuery - a javascript game engine with jQuery

Crafty

軽量でクロスブラウザサポートです。レンダーとしてDOMまたはCanvasが選択できます。キーボード、マウス操作による入力をサポートしています。IE9から利用が可能です。

Crafty - JavaScript Game Engine, HTML5 Game Engine

Gamvas

スプライトとアニメーション、Box2D対応の物理エンジン、リソースマネジメント、ズーム/パンに対応したカメラ、パーティクルエンジンと言った機能があります。

Gamvas - 2D open source canvas game framework - 93-interactive

Arctic.js

DeNAで実際に使われており、オープンソース化されているゲームエンジンです。ハイパフォーマンスなHTML5ゲームが開発できます。

Arctic.js | A JavaScript game engine for smartphones

ティラノスクリプト

スマートフォンにも対応したノベルゲームが開発できます。アプリ化も可能です。YouTubeを再生することもでき、幅広い利用が考えられます。KAG3/吉里吉里にも対応しています。

ティラノスクリプト｜スマホ対応のノベルゲームエンジン、アプリ化にも対応。

Almight

吉里吉里/KAGに対応したノベル&アドベンチャーゲームエンジンです。専用の記述を行うことでプログラミングレスで開発ができます。

スマホ対応HTML5アドベンチャーゲームエンジン - Almight

StageXL for Dart

特徴的なのはDartで記述するという点でしょう。マスク、フィルタ、サウンド、アニメーションなどの機能があります。最適化されたJavaScriptが出力できることもあってパフォーマンスも高いようです。

StageXL for Dart

jgame.js

日本製のオープンソースゲームエンジンです。シューティングゲーム、物理アクションゲーム、アドベンチャー、RPGなど多彩なジャンルのゲームが開発できます。

jgame.js samples

Pulse

2Dパズルや2Dスクロールのアクションゲームが開発できます。ただし若干動作が重いようです。

Pulse Canvas Graphics Engine

Phaser

アクションやパズルゲームなどに向いています。iOS/Androidアプリとしてリリースされているものもたくさんあるようです。クリアごとにアンロックされるゲームを作れるなど、かなり本格的に作り込むことができそうです。

Phaser - Desktop and Mobile HTML5 game framework

Quintus

軽快な動作が可能な2Dアクションゲームエンジンです。モバイルもサポートされています。

Quintus JavaScript HTML5 Game Engine

Panda.js - Free HTML5 game engine

Canvas/Web GLによるレンダリング、パーティクルエンジン、サウンドマネージャ、モバイルサポート、タイマー、加速度センサーサポート、キーボード入力などの機能があります。パズルゲームに向いていそうです。

Panda.js - Free HTML5 game engine

melonJS

軽量なゲームエンジンです。スマートフォンでも十分高速に動作します。Flappy Birdをはじめ、昔懐かしいドット絵系ゲームに向いているようです。

melonJS - Homepage

Jaws

Jaws » HTML5 Javascript game engine / development library

Collie

ハイパフォーマンスなアニメーションによるゲームフレームワークです。iOS/Androidにも対応しています。多数のオブジェクトであっても安定して高FPSでレンダリングが可能です。

Collie - High Performance Animation Library for Javascript

FlashJS

FlashのAPIに似せているためFlashゲームを作る感覚でHTML5ゲームが開発できます。actionscriptというタグを使えるので雰囲気としてはFlash感覚でしょう。

FlashJS - opensource HTML5 game engine with API similar to Flash one

Isogenic Game Engine

パズルゲームやWebSocketを使ったマルチプレイヤーゲームの開発ができます。CasinoRPGというかなり大型のWebアプリケーションも開発されています。

Isogenic Game Engine

Akihabara

まるでファミコンを彷彿とさせるようなグラフィックスのゲームエンジンです。ゲームパッドに対応しています。キーボードの場合はAはZキーになります。スマートフォンではゲームパッドが表示されて遊べるようになっています。

Akihabara

Canvas Engine

マルチプレイヤーゲームに対応しています（要サーバサイド）。アニメーション、キーボード、ゲームパッド、サウンド、マルチタッチ、スプライト、衝突検出、データセーブ、タイルマップエディタといった機能があります。

Canvas Engine : create HTML5 games

GogoMakePlay

昔懐かしい感じのするグラフィックスのゲームエンジンです。サウンドAPIは提供していません。マウス、キーボードの入力を使ったゲーム開発ができます。

Home - GogoMakePlay.com

jGen

マップエディタも提供されているゲームエンジンです。ゲームとしてはちょっと昔のドット絵調のゲームを開発できるようになっています。

jgen - Game Engine Build in JavaScript - Google Project Hosting

Game Closure

ラッピングすることでiOS/Androidのアプリストアでの公開も可能なフレームワークです。実際、幾つかのアプリが開発されてアプリストアにあります。

Game Closure - Home

LimeJS HTML5 Game Framework

タッチ操作に対応したゲームフレームワークです。主にパズルゲームが多いようです。ネイティブレベルのハイパフォーマンスなゲームを開発できるのを目指しています。

LimeJS HTML5 Game Framework

Impact - HTML5 Canvas & JavaScript Game Engine

ハイパフォーマンスな2Dゲームを開発するのによく知られているゲームエンジンです。この手のライブラリにしては珍しく有償のソフトウェア（99ドル）になります。スマートフォンにも対応しており、ゲームパッドが表示される仕組みになっています。

Impact - HTML5 Canvas & JavaScript Game Engine

Kiwi.js

パズルゲームからシューティング、アクションゲームまで幅広く実装できます。マルチタッチサポート、スプライト、オブジェクトのグループ化などの機能があります。ゲームエンジンのWordPressを目指すという意欲的なプロジェクトです。

Open Source HTML5 and Javascript game engine

jsGameSoup

Android/iOSもサポートしています。ExplorerCanvasを使うことでIE6でも動作可能とのことです。キーボードやマウスによる入力も感知でいるようになっています。

jsGameSoup: A Free Software framework for making games using Javascript and open web technologies.

Playcraft

こだわればグラフィックスに凝ったゲームも作成できますが、その反面動作がデスクトップであっても重たくなってしまいます。モバイル、タブレットで遊ぶのはちょっと難しいかも知れません。

Playcraft: HTML5 Canvas & Javascript Game Engine - Tech

GameJs

シューティングやレースゲームなど幅広いジャンルで活用できるゲームエンジンです。Github Game 2012でも使われており、実績も数多いです。

GameJs

EaselJS

FlashのAPIに似た作りになっています。Canvas上での変形、オブジェクトキャッシュ（高速描画）、D&D、フィルタ、マウスでの描画、アルファマスク、ベクターマスクなどの機能があります。

EaselJS | A Javascript library that makes working with the HTML5 Canvas element easy.

Galloman/ss2d

オブジェクトの衝突検出、アニメーション、WebGL、オーディオ、物理エンジン、パーティクルなどに対応しています。

Galloman/ss2d

Pixi.js

WebGLを使い、Canvas上に2Dオブジェクトを描きます。マルチプラットフォーム、高速さが売りです。WebGLを使ったフィルタリング、スプライトなどに対応しています。

Pixi.js - 2D webGL renderer with canvas fallback

RPG JS

その名の通りRPGゲームを作るのに適したJavaScriptライブラリです。ベースには前述のCanvasEngineを使っています。

RPG JS

さいごに

日本語で情報発信しているソフトウェアもありますので、HTML5×JavaScriptによるゲーム開発をぜひ行ってみましょう！ジャンルは求める機能によってエンジンを選択してください！

そして結果をサーバサイドに保存する、ランキング機能をつけるといった時にはぜひニフクラ mobile backendを使ってください！