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 … 質疑応答