今日書こうとしていた記事が途中で論理破綻を起こし、急遽ネタを変えた大熊猫です。
おはようざいます。
社内の勉強会でもゲーム制作のライブラリをテーマに発表したのですが、その際に調べて事を今回の記事にしたいと思います。
描画方法
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 (個人)
- ライセンス
- 描画
- Canvas
- 特徴
-
2Dゲームに特化したライブラリ。
ブラウザベースの Level Editor も付属している。
ブラウザのサウンドサポートがある。 - 利用実績
- 見つからず・・・
- URL
- Impact
$99
Arctic.js
- 開発元
- DeNA + オープンソース
- ライセンス
- MIT
- 描画
- Canvas
- 特徴
-
DeNAのスマホ用ゲームで使われている
Androidの動作サポートが手厚い
Canvasが使えればOK(らしい)
スマートフォン向け2Dゲームに特化。
Canvasがサポートしてれば概ね動く(らしい) - 利用実績
-
「海賊トレジャー」の「海戦」、「サルベージ」、「ボスバトル」などのDeNAのゲームでの利用されている
- URL
- Arctic.js入門編
まとめ
正直なところ処理の速度がまだまだ遅い為、複雑なゲームの制作は難しいと言うのが感想です。
ですが、日に日にブラウザの処理速度も向上している事を考えると、JavaScriptベースのブラウザゲームは増えて行くと予想できます。
これからはWebアプリと言うフレーズを良く耳にしますが、はじめに一般的になるのは、もしかしたらゲームなのかもしれません。
余談:ネイティブ化する
余談ですが、Webベース(HTML+CSS+JavaScript)で開発しタッチデバイス向けにネィティブ化する環境※を用いれば、ネイティブアプリとしてゲームを作成する事も可能です。
環境については有名どころではTitaniumやPhoneGapが有名ですが、他に幾つか環境が公開されています。
これはゲームに限った話ではありませんが、今後はこういった制作方法も当たり前になるかもしれません。