DeNAのゲーム開発を支える技術 (クライアントサイド編)

4. Copyright © DeNA Co.,Ltd. All Rights Reserved. ゲーム開発者の要望  ネイティブ並の品質のゲームの開発 ⁃ リッチなグラフィクス (2D or 3D) ⁃ リッチなサウンド (BGM, SEs, and voices) ⁃ スムーズな動作 (30 fps ~ 60 fps) ⁃ 高いデバイス互換性  開発費の削減 ⁃ 資産の購入 (ハードウェアやソフトウェア) ⁃ 実装 ⁃ テスト ⁃ 運用 4 ネイティブ並の品質のゲームを Web ゲーム並の費用で開発したい

6. Copyright © DeNA Co.,Ltd. All Rights Reserved. DeNA がやるべきこと 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% Native Games DeNA Games Web Games コスト 6  ゲーム開発者への高品質なサポート ⁃ ゲームの品質をネイティブ並に向上 ⁃ ゲーム開発コストの削減コスト削減

7. Copyright © DeNA Co.,Ltd. All Rights Reserved. 開発者へのアクション  リッチなクライアント SDK の提供 ⁃ ネイティブゲーム並の機能 • グラフィック (OpenGL ES や Cocoa など) • サウンド (OpenSL ES や OpenAL など) • ネットワーク (sockets) ⁃ ネイティブゲーム並の速度 ⁃ デバイス互換性の向上 • PCs (Chrome, Firefox, IE 10+, and Safari) • スマートフォン (Android, iPhone, and Windows Phone) ⁃ 開発費の削減 • 既存資産の再利用 • テスト工数の削減 7

8. Copyright © DeNA Co.,Ltd. All Rights Reserved. 現在の状況  ShellApp SDK  CreateJS-Lite (仮) ⁃ CreateJS 互換の JavaScript ライブラリ ⁃ ゲーム実行速度の向上 ⁃ スマートフォンへの最適化  CreateJS-Lite (仮) Accelerator ⁃ CreateJS-Lite (仮) ゲーム高速化用ネイティブライブラリ ⁃ Android および iOS デバイスにおけるゲーム速度の向上 ⁃ アプリ開発コストの削減 8

10. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) の目的  CreateJS ゲームの実行速度を 10 倍にする ⁃ 高速な HTML5 API を用いた CreateJS の部分エミュレート • 100% 互換を目指さない • 非実装機能に対しては代替案を提案 ⁃ 描画結果やアニメーション状態のキャッシュ ⁃ 低速な処理のバックグラウンド実行 ⁃ ネットワークリソースのキャッシュ  CreateJS ゲームの移行コストの最小化 ⁃ Flash が生成した CreateJS コードの直接実行 ⁃ ブラウザおよびデバイス依存コードの吸収 10

11. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite の概要 (グラフィック) 11  複数の方法を用いたグラフィック機能 (EaselJS) の実装 ⁃ WebGL ⁃ Canvas 2D ⁃ OpenGL ES (CreateJS-Lite Accelerator 利用時)  ブラウザおよびデバイスに最適な方法を自動選択 ⁃ ゲーム開発者の負荷軽減 CreateJS-Lite EaselJS WebGL Canvas 2D OpenGL ES

12. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite の概要 (サウンド) 12  複数の方法を用いたサウンド機能 (SoundJS) の実装 ⁃ Web Audio + <iframe> workers ⁃ Web Audio ⁃ HTML Audio ⁃ OpenSL ES (CreateJS-Lite Accelerator 利用時)  標準では <iframe> workers を用いてバックグラウンドで再生 CreateJS-Lite SoundJS Web Audio + Worker Web Audio HTML Audio OpenSL ES

13. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite の概要 (リソースロード) 13  複数の方法を用いたロード部分 (PreloadJS) の実装 ⁃ XMLHttpRequest v2 + Indexed Database ⁃ XMLHttpRequest (v1) ⁃ Tag Loader  ロードされたリソースを自動キャッシュ ⁃ Images, Sounds, CSS stylesheets, and JavaScript files. CreateJS-Lite PreloadJS XMLHttpRequest v2 + Indexed DB XMLHttpRequest (v1) Tag Loader

15. Copyright © DeNA Co.,Ltd. All Rights Reserved. WebGL の概要  OpenGL ES 2.0 をベースにした HTML5 API ⁃ (比較的) 低レベルの API ⁃ Canvas 2D と比べて高速  Shader program を用いた GPU でのコード実行 ⁃ GPU の方が CPU より高速 (並列性が高い処理の場合) ⁃ 全ての CPU 処理を置き換えることはできない  (CreateJS が用いている) Canvas 2D と等価ではない ⁃ テキストやベクタ画像の描画 ⁃ 座標系の相違  主要なブラウザで実装済 ⁃ Android browsers (5.0~), Chrome, Firefox, IE (11~), and Safari (8.0~) ⁃ (主に GPU の非互換性のため) disabled の場合有 15

16. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) と WebGL  WebGL を用いて CreateJS の遅い処理を GPU で実行 ⁃ Canvas 2D を用いた画面描画部分 ⁃ 互換性のため一部 Canvas 2D 処理を用いている  JavaScript 処理を追加して CreateJS をエミュレート ⁃ CreateJS オブジェクトから WebGL テクスチャの生成 ⁃ CreateJS オブジェクトのプロパティから WebGL 行例の生成 16 CreateJS-Lite CreateJS Canvas 2D WebGL JavaScript

17. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) と WebGL テクスチャ 1. Text (shape) のサイズを計算 2. 空の <canvas> 要素を作成 3. Text (shape) を <canvas> 要素に描画 4. この <canvas> 要素を WebGL テクスチャに変換 17 Text (shape) 変更時のみ実行

18. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) と WebGL 行列 1. CerateJS オブジェクトのプロパティからアフィン変換行列を計算 2. 先祖オブジェクトのアフィン変換行列との積を計算 3. 座標系変換行列との積を計算 ⁃ HTML 座標系から WebGL 座標系 18 𝑥, 𝑦, 𝑠𝑐𝑎𝑙𝑒 𝑥, 𝑠𝑐𝑎𝑙𝑒 𝑦, 𝑟𝑜𝑡𝑎𝑡𝑖𝑜𝑛, 𝑠𝑘𝑒𝑤𝑥, 𝑠𝑘𝑒𝑤 𝑦, 𝑟𝑒𝑔 𝑥, 𝑟𝑒𝑔 𝑦 𝑇𝑖 = 𝑎𝑖 𝑐𝑖 𝑡𝑥𝑖 𝑏𝑖 𝑑𝑖 𝑡𝑦𝑖 0 0 1 𝑇𝑖 1 𝑖=𝑛 = 𝑎 𝑛 𝑐 𝑛 𝑡𝑥 𝑛 𝑏 𝑛 𝑑 𝑛 𝑡𝑦𝑛 0 0 1 ⋯ 𝑎1 𝑐1 𝑡𝑥1 𝑏1 𝑑1 𝑡𝑦1 0 0 1 2 𝑤𝑖𝑑𝑡ℎ 0 −1 0 −2 ℎ𝑒𝑖𝑔ℎ𝑡 1 0 0 1 ⋅ 𝑇𝑖 𝑛 𝑖=1 プロパティ変更時のみ実行タップ処理も利用

20. Copyright © DeNA Co.,Ltd. All Rights Reserved. Indexed Database の概要  データベース処理用 HTML5 API ⁃ データベースの実装 (SQLite や My SQL など) に非依存  バイナリデータの読み書きが可能 ⁃ 画像やサウンドなどのバイナリファイルの直接読み書き可能  主要なブラウザで実装済 ⁃ Android browsers (4.4+), Chrome, Firefox, IE (10+), and Safari (8.0+) ⁃ データベースサイズの上限有 20

21. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) と Indexed Database  ファイルのキャッシュ ⁃ (ゲーム開始時における) ロード処理の高速化 • ロード済みファイル (画像・サウンド) をリロードしない ⁃ ゲーム中のロード処理の軽減 • ゲームサーバとクライアント間の通信を妨害しない  キャッシュ管理用処理の追加 ⁃ ゲーム更新時にキャッシュを全削除 21 CreateJS-Lite CreateJS XMLHttpRequest Indexed DB JavaScript

22. Copyright © DeNA Co.,Ltd. All Rights Reserved. Game CreateJS-Lite (仮) のファイル読み込み (キャッシュ) 1. プリロード開始 2. キャッシュ読込 ⁃ ファイルデータ受信 3. キャッシュ更新 ⁃ ファイルの更新時刻 (利用されていないファイルの削除に利用) ⁃ バックグラウンド実行 4. CreateJS オブジェクト作成 22 ServerCache CreateJS Lite

23. Copyright © DeNA Co.,Ltd. All Rights Reserved. Game CreateJS-Lite (仮) のファイル読み込み (サーバ) 1. プリロード開始 2. キャッシュ読込 ⁃ ファイルが存在しない 3. サーバからファイル読込 ⁃ XMLHttpRequest v2 を利用してデータを直接取得 4. キャッシュ書込 ⁃ ファイルデータと更新時刻 ⁃ バックグラウンドで実行 5. CreateJS オブジェクト作成 23 ServerCache CreateJS Lite

25. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) の制約  CreateJS と 100% 互換ではない ⁃ 未実装な機能 • WebGL や OpenGL で実装困難な機能 • ゲームで利用されていない機能 ⁃ Bugs  (一般的に) CreateJS よりもメモリ使用量が多い ⁃ 描画キャッシュ  ブラウザの制約 ⁃ CPU 負荷の高いブラウザ機能との同時利用 • CreateJS-Lite (仮) が利用可能な CPU リソース減少 25

26. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) 向け最適化  CreateJS アニメーションの負荷軽減 ⁃ (一般的に) Flash アニメータの作業量と反比例  メモリ利用量の削減 ⁃ 不要な CreateJS オブジェクトの削除 • Text, Shapes は削除時にキャッシュも削除 ⁃ ページ遷移 (unload または hashchange) • すべての CreateJS オブジェクトを削除 ⁃ テクスチャフォーマットの指定 (大きい Bitmap の場合)  CPU 負荷の高いブラウザ機能の削減 ⁃ CSS animations (transforms)  バグ報告およびリクエスト 26

28. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) Accelerator 開発の背景  HTML5 API を提供していないデバイス (OS) ⁃ Android 4.3 以前 ⁃ iOS 7 以前  ネイティブゲームより遅い ⁃ ブラウザのオーバーヘッド • WebGL テクスチャを OpenGL テクスチャ (<canvas>) に描画後その OpenGL テクスチャを画面に描画  HTML5 API 利用の制約 ⁃ サウンドの再生にユーザアクション (タップ等) が必要  HTML5 API のデバイス間 (ブラウザ間) 互換性 28 CreateJS-Lite (仮) ゲームアプリをネイティブアプリと同等にしたい

29. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) Accelerator の概要  ネイティブアプリと同等の品質を実現 ⁃ ネイティブ API の直接利用 • OpenGL ES 2.0 • OpenSL ES ⁃ ブラウザが提供していない機能の提供 • ファイルシステム • ネットワーク (開発中) ⁃ CPU 向け最適化 (Android) • NEON, SSE2 の利用 (画像デコード) • メモリ最適化  ブラウザゲームからの移行コストの最小化 ⁃ CreateJS-Lite (仮) は自動的に利用 • タップ処理も利用可 29

30. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) Accelerator の構造 2 個の view で構成  WebView (UIWebView) ⁃ ゲームの実行 ⁃ DOM オブジェクトの表示  CreateJS View ⁃ CreateJS オブジェクトの表示 • OpenGL ES を利用 ⁃ SoundJS サウンドの再生 (Android) • OpenSL ES で再生 30 WebView CreateJS view

31. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) Accelerator の画面描画 1. OpenGL テクスチャの作成 ⁃ 画像ロード時に作成 2. 描画コマンドの送信 ⁃ 1フレームを描画するためのコマンド列を送信 ⁃ Text, Shape の画像も送信 3. 描画コマンドの実行 31 描画コマンド WebView OpenGL view

32. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) Accelerator の制約  対応 OS ⁃ Android 4.0 以降 (要 OpenGL ES 2.0 対応) ⁃ iOS 7.0 以降  画像形式 ⁃ PNG Baseline, JPEG Baseline のみ (Android)  複数の stage の描画 ⁃ 1 個の OpenGL View にまとめて描画  Stage の <canvas> 要素 (およびその親要素) の背景 ⁃ OpenGL View を下に表示するため transparent にする 32

DeNAのゲーム開発を支える技術 (クライアントサイド編)

denatech2016

DeNAのゲーム開発を支える技術 (クライアントサイド編)

A particular slide catching your eye?