#CEDEC2012 JavaScriptベースゲームエンジン徹底比較

HTML5+JSフレームワークを用いたゲームUI開発手法株式会社ユビキタスエンターテインメント秋葉原リサーチセンター伏見遼平

このスライドは以下のサイトからダウンロードできます

タイムテーブル•  15:50 ‒ 16:20 … フレームワークを比べる・使う –  HTML5 とは? –  JavaScript ゲームエンジンの勘所 –  各種ゲームエンジンの紹介•  16:20 ‒ 16:40 … フレームワークを作る –  enchant.js の紹介 –  サンプル・デモ•  16:40 ‒ 16:50 … 質疑応答

自己紹介伏見遼平 (@sidestepism)株式会社ユビキタスエンターテインメント秋葉原リサーチセンター (UEI/ARC)enchant.js 開発プロジェクトリーダ

What is HTML5 ?

What is HTML ?•  Hyper Text Markup Language

What is HTML ?•  Hyper Text Markup Language –  HTML1.0 … 1993年 –  HTML4.0 … 1997年 –  HTML5 … 2012年現在策定中

World Wide Web Consortium (W3C)WWWに関する技術の標準化団体Webブラウザが満たすべき仕様をまとめるブラウザベンダが実装

What is HTML5 ?•  ストレージ •  新しいプロトコル –  App Cache –  WebSocket –  Web Storage –  Server-Sent Events –  Indexed DB API •  マルチメディア –  File API –  Audio, Video 要素•  デバイスコントロール •  グラフィクス –  エフェクト –  位置情報 API –  SVG –  マイク・カメラ –  Canvas要素 –  アドレス帳やカレンダー –  WebGL –  CSS3 3D ＊W3C HTML5 Logo に含まれている仕様

What is HTML5 ?•  ストレージ •  新しいプロトコル –  App Cache –  WebSocket –  Web Storage –  Server-Sent Events 要するに… –  Indexed DB API •  マルチメディア –  File API –  Audio, Video 要素よりネイティブに近い•  デバイスコントロール •  グラフィクスアプリが作れるようになる –  エフェクト –  位置情報 API –  SVG –  マイク・カメラ –  Canvas要素 –  アドレス帳やカレンダー –  WebGL –  CSS3 3D ＊W3C HTML5 Logo に含まれている仕様

HTML5 の良いところ v.s. •  モバイルネイティブ開発に比べて… –  ワンソース、マルチユース –  Web上に情報やライブラリが多い –  シンプルで習得しやすい –  開発環境が簡単 –  無償で利用可能

HTML5 の悪いところ•  ブラウザ実装に依存する –  まだ独自実装を行うベンダもある –  実装を満たせていないブラウザも多い

HTML5 の悪いところ•  ゲーム・アプリ開発に特化している規格ではない•  特に面倒な箇所 –  メインループの管理 (非同期タイマー) –  アセットの管理

HTML5 の悪いところ•  各端末のサポート保証が難しい•  特に注意すべき箇所 –  古いブラウザへの対応 –  サウンドの再生 –  端末やブラウザの解像度 –  Same Origin Policy (AACO) –  DOMに関する扱い

HTML5 の悪いところ•  領域設定があいまい•  HTML5 + JS だけではなく、一緒に使われることも多い JavaScriptベースのゲームエンジン全般も扱います

JavaScript ベースのゲームフレームワーク

JS ゲームエンジンの勘所•  動作方法 –  Webブラウザ or ネイティブ•  描画方法 –  DOM, canvas, WebGL•  クラスツリー –  描画の抽象化の度合•  メインループ管理方法 –  フレーム or 時間ベース

1. 動作方法Webブラウザ or ネイティブ

A. JavaScript + HTML5 ベースのゲームエンジンオープンソースが多い GameQuery arctic.js Impact cocos2d for js enchant.jsB. JavasScript を用いて記述したファイルを、プロプライエタリiOSやAndroidのバイナリに変換するツールが多い Titanium ngCore *「HTML5」ではない

A. HTML5アプリ+モジュールでネイティブ風アプリを生成 PhoneGap AppMobiUIWebView などのHTMLレンダリングモジュールで、アプリ内に埋め込んだファイルを読み込んでいる

A.  HTML5ベース B. バイナリ変換 A. PhoneGap型 (ex. enchant.js) (ex. Titanium) (ex. PhoneGap, AppMobi) ビルドの必要なし JavaScript HTML + JS ビルドビルド HTML + JS HTML + JS ブラウザネイティブアプリネイティブアプリ OS OS OS◯ PC/モバイルブラウザで動く ◯ モバイル向けバイナリ配布可 ◯ PC/モバイルブラウザで動く ◯ モバイル向けバイナリ配布可

2. 画面描画方法

描画方法2D志向 1 .DOM要素を用いる方法簡単 2. Canvas 要素を用いる方法 3. WebGL を用いる方法3D志向複雑 4. ネイティブライブラリを用いる方法 (UIKit, OpenGL, etc)

描画方法1 .DOM要素を用いる方法 GameQuery2. Canvas 要素を用いる方法 cocos2djs3. WebGL enchant.js4. ネイティブライブラリ Titanium

描画方法1 .DOM要素を用いる方法 DOM + CSS (transform) を使う伝統的な方法。ブラウザによるGPUアクセラレーション (iOS, Chrome) 回転・拡大縮小など高レベルAPIのみ提供されている2. Canvas 要素を用いる方法 HTML5 の Canvas要素を使った方法。 lineTo, ﬁll, rect などの低レベルAPIから提供されている。 getImageData などの API を使って画像を読み書きする。

描画方法3. WebGL OpenGL ES 2.0 規格のネイティブバインディングを JavaScript から利用できるAPI。プログラマブルシェーダなどの機能もアクセス可能。4. ネイティブモジュール機能や利用可能な範囲はライブラリに依存する

3. クラスの構造

クラスの構造•  2Dゲーム –  シーン –  スプライト •  スプライトマップ•  共通 –  イベント –  イベントターゲット –  アニメーション管理系

arctic.js•  EventDispatcher –  Game (タイマ管理・シーン) –  Display (表示オブジェクト) •  Sprite •  Shape •  SheetMovieClip •  MovieClip•  Anim (アニメーション管理)

enchant.js•  EventTarget –  Game (メインループ管理) –  Scene (シーン) –  Node •  Entity –  Label (ラベル) –  Sprite (表示オブジェクト) •  Group (グループ)•  TimeLine (アニメーション管理, プラグイン)

4. メインループの管理

メインループの管理•  フレームベース –  手軽に書くことができる –  処理が重い時…アニメーションが遅延する•  時間ベース –  フレームの経過時間に応じた処理を書く必要がある –  処理が重い時…コマ落ちしてスキップされる

フレームベースフレームフレーム処理時間がフレーム間時間をフレーム超えてもコマ落ちせず、アニメーションが遅延するフレームフレームフレームフレームフレーム ex.) Impact, enchant.js

時間ベースフレームフレーム処理時間がフレーム間時間をフレーム超えたときはコマ落ちするフレームフレームフレームフレームフレーム ex. arcDc.js, Unity

GameQuery arctic.jscocos2d for js enchant.js Impact ngCore Titanium

JS + HTML GameQuery開発元: オープンソースプロジェクトライセンス: MIT描画: DOMベースjQuery のプラグイン。JSベースのゲームエンジンとしてはかなり古い

JS + HTML GameQuery jQuery っぽい記法でガリガリ書ける

JS + HTML cocos2d for js開発元: オープンソースプロジェクトライセンス: MIT描画: DOMベースcocos2d (iPhone用2Dゲーム) の JS移植版現在バージョン beta 2 で、1ヶ月に1回程度バージョンアップが行われている。スプライト、タイルマップ、物理シミュレーションなどの機能がっている。

JS + HTML cocos2d for jsすでにiOSゲームの開発で cocos2d の記法に慣れている場合や、iOSゲームを移植する場合は、まず検討すべき選択肢となる。

JS + HTML Impact開発元: Dominic Szablewski (個人)ライセンス: プロプライエタリ ($99)描画: Canvasベース2Dゲームに特化したライブラリ。ブラウザベースの Level Editor も付属している。ブラウザのサウンドサポートがある。利用実績は見つかりにくい。サンプルコードも少ない。

JS + HTML Impact

JS + HTML ImpactPhoneGap より高速に動作する iOS アプリを HTML5 から作成できる独自ツール iOS Impact Framework が付属する。デバッグツールも…?

JS + HTML arctic.js開発元: DeNA + オープンソースライセンス: MIT描画: Canvasベーススマートフォン向け2Dゲームに特化したライブラリ。Canvasのラッパとして機能する。主にDeNAのゲームで利用実績がある。

JS + HTML arctic.js動作実績が多く、安定して確実に動く。特にAndroidの各端末での動作サポートが手厚い。Canvas さえサポートされていればOK。

JS + HTML arctic.js•  EventDispatcher –  Game (タイマ管理・シーン) –  Display (表示オブジェクト) •  Sprite •  Shape •  SheetMovieClip AS3 風味の Movie •  MovieClip•  Anim (アニメーション管理)

JS + HTML enchant.js開発元: UEI + オープンソースライセンス: MIT or GPLv3描画: DOM(デフォルト) / Canvas / WebGL描画エンジンを DOM / Canvas で切り替え可能。3Dゲームには WebGL も利用可能。スマートフォン・PCを共にサポートする。(但し、IEはバージョン8以上)

JS + HTML enchant.js各種プラグインにより拡張可能•  2D物理シミュレーション•  WebGL描画用•  アニメーション管理•  Twitter連携•  タイムライン連携

JS + HTML enchant.js•  クラスツリー (標準添付)•  EventTarget –  Game (メインループ管理) –  Scene (シーン) –  Node •  Entity –  Label (ラベル) –  Sprite (表示オブジェクト) •  Group (グループ)

JS変換 Titanium開発元: Appceleratorライセンス: プロプライエタリオープンソース・有償サポート(Apacheライセンス)簡単なアプリには十分使えるレベル高いフレームレートが必要なアクションゲームなどは難しい

JS変換 ngCore開発元: ngmoco (DeNA)ライセンス: プロプライエタリDeNAプラットフォームで開発することが前提スマホ向けの高速動作するゲームエンジンというより「開発環境」

PhoneGap

PhoneGap開発元: Nitobi → Adobe, Apacheライセンス: オープンソースのゲームをモバイルネイティブアプリに変換できる。 JS + HTML(ex. Android, iOS, Blackberry ..)

PhoneGap

まとめ

用途に合ったフレームワークを! Aタイプ PC/モバイルブラウザビルドネイティブ Bタイプngcore 変換ネイティブ

タイムテーブル•  15:50 ‒ 16:20 … フレームワークを比べる・使う –  HTML5 とは? –  JavaScript ゲームエンジンの勘所 –  各種ゲームエンジンの紹介•  16:20 ‒ 16:45 … フレームワークを作る –  enchant.js の紹介 –  サンプル・デモ•  16:45 ‒ 16:50 … 質疑応答

http://brave-workz.blogspot.jp	344
https://si0.twimg.com	32
http://brave-workz.blogspot.com	24
https://twimg0-a.akamaihd.net	21
https://twitter.com	20
http://tweetedtimes.com	6
http://sc.dotbranch.com	5
http://ss.dotbranch.com	4
http://enchant-web.yier.in	4
http://twitter.com	3
http://favtile.com	3
http://enchant.loc.al	2
http://pinterest.com	2
http://s.deeeki.com	1
http://www.techgig.com	1

#CEDEC2012 JavaScriptベースゲームエンジン徹底比較

by Ryohei Fushimi on Aug 20, 2012

Accessibility

Upload Details

Usage Rights

15 Embeds 472

Statistics

#CEDEC2012 JavaScriptベースゲームエンジン徹底比較 Presentation Transcript