#cedec2012 javascriptベースゲームエンジン徹底比較
Post on 27-Jun-2015
18.603 Views
Preview:
TRANSCRIPT
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 – Web Storage – Indexed DB API – File API
• デバイスコントロール – 位置情報 API – マイク・カメラ – アドレス帳やカレンダー
• 新しいプロトコル – WebSocket – Server-Sent Events
• マルチメディア – Audio, Video 要素
• グラフィクス – エフェクト – SVG – Canvas要素 – WebGL – CSS3 3D
＊W3C HTML5 Logo に含まれている仕様
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 に含まれている仕様
要するに…
よりネイティブに近い アプリが作れるようになる
HTML5 の良いところ
• モバイルネイティブ開発に比べて… – ワンソース、マルチユース – Web上に情報やライブラリが多い – シンプルで習得しやすい – 開発環境が簡単 – 無償で利用可能
v.s.
HTML5 の悪いところ • ブラウザ実装に依存する – まだ独自実装を行うベンダもある – 実装を満たせていないブラウザも多い
HTML5 の悪いところ • ゲーム・アプリ開発に特化している規格ではない • 特に面倒な箇所
– メインループの管理 (非同期タイマー) – アセットの管理
HTML5 の悪いところ • 各端末のサポート保証が難しい • 特に注意すべき箇所
– 古いブラウザへの対応 – サウンドの再生 – 端末やブラウザの解像度 – Same Origin Policy (AACO) – DOMに関する扱い
HTML5 の悪いところ • 領域設定があいまい • HTML5 + JS だけではなく、一緒に使われることも多い
JavaScriptベースのゲームエンジン全般も扱います
JavaScript ベースの ゲームフレームワーク
JavaScript ベースの ゲームフレームワーク
JS ゲームエンジンの勘所
• 動作方法 – Webブラウザ or ネイティブ
• 描画方法 – DOM, canvas, WebGL
• クラスツリー – 描画の抽象化の度合
• メインループ管理方法 – フレーム or 時間ベース
1. 動作方法
Webブラウザ or ネイティブ
A. JavaScript + HTML5 ベースのゲームエンジン
B. JavasScript を用いて記述したファイルを、 iOSやAndroidのバイナリに変換するツール
GameQuery arctic.js
cocos2d for js enchant.js
ngCore Titanium
Impact
オープンソース
プロプライエタリ
が多い
が多い
*「HTML5」 ではない
A'. HTML5アプリ+モジュールでネイティブ風アプリを生成
PhoneGap AppMobi
UIWebView などのHTMLレンダリングモジュールで、 アプリ内に埋め込んだファイルを読み込んでいる
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/モバイルブラウザで動く ◯ モバイル向けバイナリ配布可
2. 画面描画方法
描画方法
1 .DOM要素を用いる方法
2. Canvas 要素を用いる方法
3. WebGL を用いる方法
4. ネイティブライブラリを用いる方法 (UIKit, OpenGL, etc)
2D志向 簡単
3D志向 複雑
描画方法
1 .DOM要素を用いる方法
2. Canvas 要素を用いる方法
3. WebGL
4. ネイティブライブラリ
enchant.js
cocos2djs
GameQuery
Titanium
描画方法
1 .DOM要素を用いる方法
2. Canvas 要素を用いる方法
DOM + CSS (transform) を使う伝統的な方法。 ブラウザによるGPUアクセラレーション (iOS, Chrome) 回転・拡大縮小など高レベルAPIのみ提供されている
HTML5 の Canvas要素を使った方法。 lineTo, fill, 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.js
cocos2d for js enchant.js
ngCore
Titanium
Impact
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
Impact PhoneGap より高速に動作する 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
• MovieClip
• Anim (アニメーション管理)
AS3 風味の Movie
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 + HTML
Titanium 開発元: Appcelerator ライセンス: プロプライエタリ オープンソース・有償サポート (Apacheライセンス) 簡単なアプリには十分使えるレベル 高いフレームレートが必要なアクションゲーム などは難しい
JS変換
ngCore 開発元: ngmoco (DeNA) ライセンス: プロプライエタリ DeNAプラットフォームで開発することが前提 スマホ向けの高速動作する ゲームエンジンというより「開発環境」
JS変換
PhoneGap
PhoneGap 開発元: Nitobi → Adobe, Apache ライセンス: オープンソース のゲームをモバイルネイティブアプリに変換できる。 (ex. Android, iOS, Blackberry ..)
JS + HTML
PhoneGap
まとめ
ngcore
ネイティブ
ネイティブ
PC/モバイルブラウザ
Aタイプ
Bタイプ
変換
ビルド
用途に合ったフレームワークを!
タイムテーブル • 15:50 ‒ 16:20 … フレームワークを比べる・使う
– HTML5 とは? – JavaScript ゲームエンジンの勘所 – 各種ゲームエンジンの紹介
• 16:20 ‒ 16:45 … フレームワークを作る – enchant.js の紹介 – サンプル・デモ
• 16:45 ‒ 16:50 … 質疑応答
top related