#CEDEC2012 JavaScriptベースゲームエンジン徹底比較
-
Upload
ryohei-fushimi -
Category
Documents
-
view
18.603 -
download
0
Transcript of #CEDEC2012 JavaScriptベースゲームエンジン徹底比較
![Page 1: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/1.jpg)
HTML5+JSフレームワークを 用いたゲームUI開発手法
株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター
伏見 遼平
![Page 2: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/2.jpg)
このスライドは以下のサイトからダウンロードできます
![Page 3: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/3.jpg)
タイムテーブル • 15:50 ‒ 16:20 … フレームワークを比べる・使う
– HTML5 とは? – JavaScript ゲームエンジンの勘所 – 各種ゲームエンジンの紹介
• 16:20 ‒ 16:40 … フレームワークを作る – enchant.js の紹介 – サンプル・デモ
• 16:40 ‒ 16:50 … 質疑応答
![Page 4: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/4.jpg)
自己紹介
伏見 遼平 (@sidestepism)
株式会社ユビキタスエンターテインメント
秋葉原リサーチセンター (UEI/ARC)
enchant.js 開発プロジェクトリーダ
![Page 5: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/5.jpg)
What is HTML5 ?
![Page 6: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/6.jpg)
What is HTML ? • Hyper Text Markup Language
![Page 7: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/7.jpg)
What is HTML ? • Hyper Text Markup Language – HTML1.0 … 1993年 – HTML4.0 … 1997年 – HTML5 … 2012年現在策定中
![Page 8: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/8.jpg)
World Wide Web Consortium (W3C) WWWに関する技術の標準化団体
Webブラウザが満たすべき仕様をまとめる
ブラウザベンダが実装
![Page 9: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/9.jpg)
What is HTML5 ? • ストレージ
– App Cache – Web Storage – Indexed DB API – File API
• デバイスコントロール – 位置情報 API – マイク・カメラ – アドレス帳やカレンダー
• 新しいプロトコル – WebSocket – Server-Sent Events
• マルチメディア – Audio, Video 要素
• グラフィクス – エフェクト – SVG – Canvas要素 – WebGL – CSS3 3D
*W3C HTML5 Logo に含まれている仕様
![Page 10: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/10.jpg)
What is HTML5 ? • ストレージ
– App Cache – Web Storage – Indexed DB API – File API
• デバイスコントロール – 位置情報 API – マイク・カメラ – アドレス帳やカレンダー
• 新しいプロトコル – WebSocket – Server-Sent Events
• マルチメディア – Audio, Video 要素
• グラフィクス – エフェクト – SVG – Canvas要素 – WebGL – CSS3 3D
*W3C HTML5 Logo に含まれている仕様
要するに…
よりネイティブに近い アプリが作れるようになる
![Page 11: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/11.jpg)
HTML5 の良いところ
• モバイルネイティブ開発に比べて… – ワンソース、マルチユース – Web上に情報やライブラリが多い – シンプルで習得しやすい – 開発環境が簡単 – 無償で利用可能
v.s.
![Page 12: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/12.jpg)
HTML5 の悪いところ • ブラウザ実装に依存する – まだ独自実装を行うベンダもある – 実装を満たせていないブラウザも多い
![Page 13: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/13.jpg)
HTML5 の悪いところ • ゲーム・アプリ開発に特化している規格ではない • 特に面倒な箇所
– メインループの管理 (非同期タイマー) – アセットの管理
![Page 14: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/14.jpg)
HTML5 の悪いところ • 各端末のサポート保証が難しい • 特に注意すべき箇所
– 古いブラウザへの対応 – サウンドの再生 – 端末やブラウザの解像度 – Same Origin Policy (AACO) – DOMに関する扱い
![Page 15: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/15.jpg)
HTML5 の悪いところ • 領域設定があいまい • HTML5 + JS だけではなく、一緒に使われることも多い
JavaScriptベースのゲームエンジン全般も扱います
![Page 16: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/16.jpg)
JavaScript ベースの ゲームフレームワーク
![Page 17: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/17.jpg)
JavaScript ベースの ゲームフレームワーク
![Page 18: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/18.jpg)
JS ゲームエンジンの勘所
• 動作方法 – Webブラウザ or ネイティブ
• 描画方法 – DOM, canvas, WebGL
• クラスツリー – 描画の抽象化の度合
• メインループ管理方法 – フレーム or 時間ベース
![Page 19: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/19.jpg)
1. 動作方法
Webブラウザ or ネイティブ
![Page 20: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/20.jpg)
A. JavaScript + HTML5 ベースのゲームエンジン
B. JavasScript を用いて記述したファイルを、 iOSやAndroidのバイナリに変換するツール
GameQuery arctic.js
cocos2d for js enchant.js
ngCore Titanium
Impact
オープンソース
プロプライエタリ
が多い
が多い
*「HTML5」 ではない
![Page 21: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/21.jpg)
A'. HTML5アプリ+モジュールでネイティブ風アプリを生成
PhoneGap AppMobi
UIWebView などのHTMLレンダリングモジュールで、 アプリ内に埋め込んだファイルを読み込んでいる
![Page 22: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/22.jpg)
OS
ブラウザ
HTML + JS
OS
ネイティブアプリ
OS
ネイティブアプリ
HTML + JS
A. HTML5ベース (ex. enchant.js)
B. バイナリ変換 (ex. Titanium)
A'. PhoneGap型 (ex. PhoneGap, AppMobi)
JavaScript HTML + JS
ビルド ビルド
ビルドの必要なし
◯ PC/モバイルブラウザで動く ◯ モバイル向けバイナリ配布可 ◯ PC/モバイルブラウザで動く ◯ モバイル向けバイナリ配布可
![Page 23: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/23.jpg)
2. 画面描画方法
![Page 24: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/24.jpg)
描画方法
1 .DOM要素を用いる方法
2. Canvas 要素を用いる方法
3. WebGL を用いる方法
4. ネイティブライブラリを用いる方法 (UIKit, OpenGL, etc)
2D志向 簡単
3D志向 複雑
![Page 25: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/25.jpg)
描画方法
1 .DOM要素を用いる方法
2. Canvas 要素を用いる方法
3. WebGL
4. ネイティブライブラリ
enchant.js
cocos2djs
GameQuery
Titanium
![Page 26: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/26.jpg)
描画方法
1 .DOM要素を用いる方法
2. Canvas 要素を用いる方法
DOM + CSS (transform) を使う伝統的な方法。 ブラウザによるGPUアクセラレーション (iOS, Chrome) 回転・拡大縮小など高レベルAPIのみ提供されている
HTML5 の Canvas要素を使った方法。 lineTo, fill, rect などの低レベルAPIから提供されている。 getImageData などの API を使って画像を読み書きする。
![Page 27: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/27.jpg)
描画方法 3. WebGL
OpenGL ES 2.0 規格のネイティブバインディングを JavaScript から利用できるAPI。 プログラマブルシェーダなどの機能もアクセス可能。
4. ネイティブモジュール
機能や利用可能な範囲はライブラリに依存する
![Page 28: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/28.jpg)
3. クラスの構造
![Page 29: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/29.jpg)
クラスの構造 • 2Dゲーム – シーン – スプライト
• スプライトマップ • 共通 – イベント – イベントターゲット – アニメーション管理系
![Page 30: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/30.jpg)
arctic.js • EventDispatcher – Game (タイマ管理・シーン)
– Display (表示オブジェクト)
• Sprite
• Shape
• SheetMovieClip
• MovieClip
• Anim (アニメーション管理)
![Page 31: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/31.jpg)
enchant.js • EventTarget – Game (メインループ管理)
– Scene (シーン) – Node
• Entity – Label (ラベル) – Sprite (表示オブジェクト)
• Group (グループ)
• TimeLine (アニメーション管理, プラグイン)
![Page 32: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/32.jpg)
4. メインループの管理
![Page 33: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/33.jpg)
メインループの管理 • フレームベース
– 手軽に書くことができる – 処理が重い時…アニメーションが遅延する
• 時間ベース – フレームの経過時間に応じた処理を書く必要がある – 処理が重い時…コマ落ちしてスキップされる
![Page 34: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/34.jpg)
フレームベース
フレーム
フレーム
フレーム
フレーム
フレーム
フレーム
フレーム フレーム
ex.) Impact, enchant.js
処理時間がフレーム間時間を 超えてもコマ落ちせず、 アニメーションが遅延する
![Page 35: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/35.jpg)
時間ベース
フレーム
フレーム
フレーム
フレーム
フレーム
フレーム
フレーム フレーム
ex. arcDc.js, Unity
処理時間がフレーム間時間を 超えたときはコマ落ちする
![Page 36: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/36.jpg)
GameQuery arctic.js
cocos2d for js enchant.js
ngCore
Titanium
Impact
![Page 37: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/37.jpg)
GameQuery 開発元: オープンソースプロジェクト ライセンス: MIT 描画: DOMベース jQuery のプラグイン。 JSベースのゲームエンジンとしてはかなり古い
JS + HTML
![Page 38: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/38.jpg)
GameQuery
jQuery っぽい記法でガリガリ書ける
JS + HTML
![Page 39: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/39.jpg)
cocos2d for js 開発元: オープンソースプロジェクト ライセンス: MIT 描画: DOMベース cocos2d (iPhone用2Dゲーム) の JS移植版 現在バージョン beta 2 で、1ヶ月に1回程度 バージョンアップが行われている。 スプライト、タイルマップ、物理シミュレー ションなどの機能が揃っている。
JS + HTML
![Page 40: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/40.jpg)
cocos2d for js すでにiOSゲームの開発で cocos2d の記法に慣れている場合や、 iOSゲームを移植する場合は、まず検討すべき選択肢となる。
JS + HTML
![Page 41: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/41.jpg)
Impact 開発元: Dominic Szablewski (個人) ライセンス: プロプライエタリ ($99) 描画: Canvasベース 2Dゲームに特化したライブラリ。 ブラウザベースの Level Editor も付属している。 ブラウザのサウンドサポートがある。 利用実績は見つかりにくい。サンプルコードも少ない。
JS + HTML
![Page 42: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/42.jpg)
Impact JS + HTML
![Page 43: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/43.jpg)
Impact PhoneGap より高速に動作する iOS アプリを HTML5 から作成できる 独自ツール iOS Impact Framework が付属する。 デバッグツールも…?
JS + HTML
![Page 44: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/44.jpg)
arctic.js 開発元: DeNA + オープンソース ライセンス: MIT 描画: Canvasベース スマートフォン向け2Dゲームに特化したライブラリ。 Canvasのラッパとして機能する。 主にDeNAのゲームで利用実績がある。
JS + HTML
![Page 45: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/45.jpg)
arctic.js 動作実績が多く、安定して確実に動く。 特にAndroidの各端末での動作サポートが手厚い。 Canvas さえサポートされていればOK。
JS + HTML
![Page 46: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/46.jpg)
arctic.js • EventDispatcher – Game (タイマ管理・シーン)
– Display (表示オブジェクト)
• Sprite
• Shape
• SheetMovieClip
• MovieClip
• Anim (アニメーション管理)
AS3 風味の Movie
JS + HTML
![Page 47: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/47.jpg)
enchant.js 開発元: UEI + オープンソース ライセンス: MIT or GPLv3 描画: DOM(デフォルト) / Canvas / WebGL 描画エンジンを DOM / Canvas で切り替え可能。 3Dゲームには WebGL も利用可能。 スマートフォン・PCを共にサポートする。 (但し、IEはバージョン8以上)
JS + HTML
![Page 48: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/48.jpg)
enchant.js 各種プラグインにより拡張可能 • 2D物理シミュレーション • WebGL描画用 • アニメーション管理 • Twitter連携 • タイムライン連携
JS + HTML
![Page 49: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/49.jpg)
enchant.js • クラスツリー (標準添付) • EventTarget
– Game (メインループ管理)
– Scene (シーン) – Node
• Entity – Label (ラベル) – Sprite (表示オブジェクト)
• Group (グループ)
JS + HTML
![Page 50: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/50.jpg)
Titanium 開発元: Appcelerator ライセンス: プロプライエタリ オープンソース・有償サポート (Apacheライセンス) 簡単なアプリには十分使えるレベル 高いフレームレートが必要なアクションゲーム などは難しい
JS変換
![Page 51: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/51.jpg)
ngCore 開発元: ngmoco (DeNA) ライセンス: プロプライエタリ DeNAプラットフォームで開発することが前提 スマホ向けの高速動作する ゲームエンジンというより「開発環境」
JS変換
![Page 52: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/52.jpg)
PhoneGap
![Page 53: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/53.jpg)
PhoneGap 開発元: Nitobi → Adobe, Apache ライセンス: オープンソース のゲームをモバイルネイティブアプリに変換できる。 (ex. Android, iOS, Blackberry ..)
JS + HTML
![Page 54: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/54.jpg)
PhoneGap
![Page 55: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/55.jpg)
まとめ
![Page 56: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/56.jpg)
ngcore
ネイティブ
ネイティブ
PC/モバイルブラウザ
Aタイプ
Bタイプ
変換
ビルド
用途に合ったフレームワークを!
![Page 57: #CEDEC2012 JavaScriptベースゲームエンジン徹底比較](https://reader036.fdocuments.net/reader036/viewer/2022082309/558e223a1a28aba3398b478a/html5/thumbnails/57.jpg)
タイムテーブル • 15:50 ‒ 16:20 … フレームワークを比べる・使う
– HTML5 とは? – JavaScript ゲームエンジンの勘所 – 各種ゲームエンジンの紹介
• 16:20 ‒ 16:45 … フレームワークを作る – enchant.js の紹介 – サンプル・デモ
• 16:45 ‒ 16:50 … 質疑応答