mBaaSお役立ちブログ

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

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

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

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

enchant.js

enchant.js

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

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

CreateJS

CreateJS

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

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

gameQuery

gameQuery

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

gameQuery – a javascript game engine with jQuery

Crafty

Crafty

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

Crafty – JavaScript Game Engine, HTML5 Game Engine

Gamvas

Gamvas

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

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

Arctic.js

Arctic.js

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

Arctic.js | A JavaScript game engine for smartphones

ティラノスクリプト

ティラノスクリプト

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

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

Almight

Almight

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

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

StageXL for Dart

StageXL for Dart

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

StageXL for Dart

jgame.js

jgame.js

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

jgame.js samples

Pulse

Pulse

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

Pulse Canvas Graphics Engine

Phaser

Phaser

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

Phaser – Desktop and Mobile HTML5 game framework

Quintus

Quintus

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

Quintus JavaScript HTML5 Game Engine

Panda.js – Free HTML5 game engine

Panda.js - Free HTML5 game engine

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

Panda.js – Free HTML5 game engine

melonJS

melonJS

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

melonJS – Homepage

Jaws

Jaws

Jaws » HTML5 Javascript game engine / development library

Collie

Collie

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

Collie – High Performance Animation Library for Javascript

FlashJS

FlashJS

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

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

Isogenic Game Engine

Isogenic Game Engine

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

Isogenic Game Engine

Akihabara

Akihabara

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

Akihabara

Canvas Engine

Canvas Engine

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

Canvas Engine : create HTML5 games

GogoMakePlay

GogoMakePlay

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

Home – GogoMakePlay.com

jGen

jGen

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

jgen – Game Engine Build in JavaScript – Google Project Hosting

Game Closure

Game Closure

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

Game Closure – Home

LimeJS HTML5 Game Framework

LimeJS HTML5 Game Framework

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

LimeJS HTML5 Game Framework

Impact – HTML5 Canvas & JavaScript Game Engine

Impact - HTML5 Canvas & JavaScript Game Engine

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

Impact – HTML5 Canvas & JavaScript Game Engine

Kiwi.js

Kiwi.js

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

Open Source HTML5 and Javascript game engine

jsGameSoup

jsGameSoup

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

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

Playcraft

Playcraft

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

Playcraft: HTML5 Canvas & Javascript Game Engine – Tech

GameJs

GameJs

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

GameJs

EaselJS

EaselJS

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

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

Galloman/ss2d

Galloman/ss2d

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

Galloman/ss2d

Pixi.js

Pixi.js

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

Pixi.js – 2D webGL renderer with canvas fallback

RPG JS

RPG JS

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

RPG JS


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

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





ニフティクラウドmobile backend mbaas ご紹介 概要資料