HTML5+JSフレームワークを  用いたゲームUI開発手法株式会社ユビキタスエンターテインメント    秋葉原リサーチセンター       伏見 遼平
このスライドは以下のサイトからダウンロードできます
タイムテーブル•  15:50 ‒ 16:20 … フレームワークを比べる・使う   –  HTML5 とは?   –  JavaScript ゲームエンジンの勘所   –  各種ゲームエンジンの紹介•  16:20 ‒ 16:40 … フレー...
自己紹介伏見 遼平 (@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            –  ...
What is HTML5 ?•  ストレージ                 •  新しいプロトコル  –  App Cache              –  WebSocket  –  Web Storage            –  ...
HTML5 の良いところ              v.s.	•  モバイルネイティブ開発に比べて… –  ワンソース、マルチユース –  Web上に情報やライブラリが多い –  シンプルで習得しやすい –  開発環境が簡単 –  無償で利用可能
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 ベースのゲームエンジン   オープンソース        が多い	  GameQuery            arctic.js          Impact  cocos2d for js   ...
A. HTML5アプリ+モジュールでネイティブ風アプリを生成  PhoneGap        AppMobiUIWebView などのHTMLレンダリングモジュールで、アプリ内に埋め込んだファイルを読み込んでいる
A.  HTML5ベース	             B.	  バイナリ変換	            A.	  PhoneGap型	  (ex.	  enchant.js)	      (ex.	  Titanium)	       (ex.	 ...
2. 画面描画方法
描画方法2D志向   1 .DOM要素を用いる方法簡単       2. Canvas 要素を用いる方法       3. WebGL を用いる方法3D志向複雑       4. ネイティブライブラリを用いる方法       (UIKit, O...
描画方法1 .DOM要素を用いる方法           GameQuery2. Canvas 要素を用いる方法       cocos2djs3. WebGL             enchant.js4. ネイティブライブラリ      ...
描画方法1 .DOM要素を用いる方法   DOM + CSS (transform) を使う伝統的な方法。   ブラウザによるGPUアクセラレーション (iOS, Chrome)   回転・拡大縮小など高レベルAPIのみ提供されている2. Ca...
描画方法3. WebGL    OpenGL ES 2.0 規格のネイティブバインディングを    JavaScript から利用できるAPI。    プログラマブルシェーダなどの機能もアクセス可能。4. ネイティブモジュール    機能や利用...
3. クラスの構造
クラスの構造•  2Dゲーム –  シーン –  スプライト   •  スプライトマップ•  共通 –  イベント –  イベントターゲット –  アニメーション管理系
arctic.js•  EventDispatcher  –  Game (タイマ管理・シーン)  –  Display (表示オブジェクト)     •  Sprite     •  Shape     •  SheetMovieClip  ...
enchant.js•  EventTarget  –  Game (メインループ管理)  –  Scene (シーン)  –  Node     •  Entity         –  Label (ラベル)         –  Spri...
4. メインループの管理
メインループの管理•  フレームベース  –  手軽に書くことができる  –  処理が重い時…アニメーションが遅延する•  時間ベース  –  フレームの経過時間に応じた処理を書く必要がある  –  処理が重い時…コマ落ちしてスキップされる
フレームベースフレーム       フレーム              処理時間がフレーム間時間をフレーム          超えてもコマ落ちせず、              アニメーションが遅延するフレーム       フレームフレームフレー...
時間ベースフレーム      フレーム             処理時間がフレーム間時間をフレーム         超えたときはコマ落ちするフレーム      フレームフレームフレーム      フレーム                  ex...
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 で、...
JS + HTML             cocos2d for jsすでにiOSゲームの開発で cocos2d の記法に慣れている場合や、iOSゲームを移植する場合は、まず検討すべき選択肢となる。
JS + HTML                      Impact開発元: Dominic Szablewski (個人)ライセンス: プロプライエタリ ($99)描画: Canvasベース2Dゲームに特化したライブラリ。ブラウザベース...
JS + HTML            Impact
JS + HTML                  ImpactPhoneGap より高速に動作する iOS アプリを HTML5 から作成できる独自ツール iOS Impact Framework が付属する。デバッグツールも…?
JS + HTML                arctic.js開発元: DeNA + オープンソースライセンス: MIT描画: Canvasベーススマートフォン向け2Dゲームに特化したライブラリ。Canvasのラッパとして機能する。主にD...
JS + HTML              arctic.js動作実績が多く、安定して確実に動く。特にAndroidの各端末での動作サポートが手厚い。Canvas さえサポートされていればOK。
JS + HTML                             arctic.js•  EventDispatcher   –  Game (タイマ管理・シーン)   –  Display (表示オブジェクト)         • ...
JS + HTML                 enchant.js開発元: UEI + オープンソースライセンス: MIT or GPLv3描画: DOM(デフォルト) / Canvas / WebGL描画エンジンを DOM / Canv...
JS + HTML               enchant.js各種プラグインにより拡張可能•  2D物理シミュレーション•  WebGL描画用•  アニメーション管理•  Twitter連携•  タイムライン連携
JS + HTML                         enchant.js•  クラスツリー (標準添付)•  EventTarget   –  Game (メインループ管理)   –  Scene (シーン)   –  Node...
JS変換                    Titanium開発元: Appceleratorライセンス: プロプライエタリオープンソース・有償サポート(Apacheライセンス)簡単なアプリには十分使えるレベル高いフレームレートが必要なアク...
JS変換                     ngCore開発元: ngmoco (DeNA)ライセンス: プロプライエタリDeNAプラットフォームで開発することが前提スマホ向けの高速動作するゲームエンジンというより「開発環境」
PhoneGap
PhoneGap開発元: Nitobi → Adobe, Apacheライセンス: オープンソース     のゲームをモバイルネイティブアプリに変換できる。 JS + HTML(ex. Android, iOS, Blackberry ..)
PhoneGap
まとめ
用途に合ったフレームワークを!    Aタイプ                        PC/モバイルブラウザ                    ビルド                             ネイティブ    Bタイ...
タイムテーブル•  15:50 ‒ 16:20 … フレームワークを比べる・使う   –  HTML5 とは?   –  JavaScript ゲームエンジンの勘所   –  各種ゲームエンジンの紹介•  16:20 ‒ 16:45 … フレー...
Upcoming SlideShare
Loading in...5
×

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

18,798

Published on

0 Comments
58 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,798
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
127
Comments
0
Likes
58
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×