ゲーム作りに使えるJavaScriptライブラリについて調べてみた事とか

今日書こうとしていた記事が途中で論理破綻を起こし、急遽ネタを変えた大熊猫です。
おはようざいます。

社内の勉強会でもゲーム制作のライブラリをテーマに発表したのですが、その際に調べて事を今回の記事にしたいと思います。

描画方法

JavaScriptのゲームエンジンなので当然、ブラウザ上に描画を行う事になります。
その際に用いられる手法をまずはご紹介致します。

DOMベース

DOM（HTMLの要素）+CSS(transform)を利用する手法です。
ブラウザによるGPUアクセラレーション (iOS, Chrome)が回転・拡大縮小などに提供されている。

Canvasベース

HTML5のCanvas要素を使った手法。
スマートフォンでの対応も広まっている事から今後DOMベースのも、こちらに移行する傾向にあるそうです。

WebGL

ウェブブラウザで3Dグラフィックスを表示させるための標準仕様。
HTML5のCanvas要素で利用可能。

有名どころのライブラリー

enchant.js

開発元
UEI + オープンソース
ライセンス
MIT or GPLv3
描画

DOM(デフォルト) / Canvas / WebGL
描画エンジンを DOM / Canvas で切り替え可能。
Canvasについては現在はプラグイン扱いだが、ver0.6からはCanvasベースに完全以降する（らしい）

特徴

3Dゲームには WebGL も利用可能。
スマートフォン・PCを共にサポートする。
(但し、IEはバージョン8以上)

利用実績
「サントリータウン」のスマホ版で採用。
URL
enchantjs

GameQuery

開発元
オープンソースプロジェクト
ライセンス
MIT
描画方法
DOM（JS+HTML）ベース
特徴

jQuery のプラグイン。
ゲームエンジンのJSとしては古い

利用実績
見つからず・・・
URL
GameQuery

Impact

開発元
Dominic Szablewski (個人)
ライセンス

＄99

描画
Canvas
特徴

2Dゲームに特化したライブラリ。
ブラウザベースの Level Editor も付属している。
ブラウザのサウンドサポートがある。

利用実績
見つからず・・・
URL
Impact

Arctic.js

開発元
DeNA + オープンソース
ライセンス
MIT
描画
Canvas
特徴

DeNAのスマホ用ゲームで使われている
Androidの動作サポートが手厚い
Canvasが使えればOK(らしい)
スマートフォン向け2Dゲームに特化。
Canvasがサポートしてれば概ね動く（らしい）

利用実績

「海賊トレジャー」の「海戦」、「サルベージ」、「ボスバトル」などのDeNAのゲームでの利用されている

URL
Arctic.js入門編

まとめ

正直なところ処理の速度がまだまだ遅い為、複雑なゲームの制作は難しいと言うのが感想です。
ですが、日に日にブラウザの処理速度も向上している事を考えると、JavaScriptベースのブラウザゲームは増えて行くと予想できます。

これからはWebアプリと言うフレーズを良く耳にしますが、はじめに一般的になるのは、もしかしたらゲームなのかもしれません。

余談:ネイティブ化する

余談ですが、Webベース(HTML+CSS+JavaScript)で開発しタッチデバイス向けにネィティブ化する環境※を用いれば、ネイティブアプリとしてゲームを作成する事も可能です。

環境については有名どころではTitaniumやPhoneGapが有名ですが、他に幾つか環境が公開されています。

これはゲームに限った話ではありませんが、今後はこういった制作方法も当たり前になるかもしれません。