Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,296 views

Published on

2016/1/29に開催されたDeNATechCon2016の資料です。
会場C-1
https://techcon.dena.com

Published in: Technology
  • Be the first to comment

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

  1. 1. Copyright © DeNA Co.,Ltd. All Rights Reserved. DeNA のゲーム開発を 支える技術 クライアントサイド編 January 29, 2016 Hironori Bono System Management Unit DeNA Co., Ltd.
  2. 2. Copyright © DeNA Co.,Ltd. All Rights Reserved. Games and DeNA Feed the world. Band Aid - Do They Know It's Christmas?
  3. 3. Copyright © DeNA Co.,Ltd. All Rights Reserved. DeNA のミッション  ユーザを楽しませる ⁃ 高品質のゲームの提供  ゲーム開発者のサポート ⁃ 解析ツールの提供 ⁃ Mobage APIs の提供 ⁃ クライアント SDKs の提供 Games APIs 3
  4. 4. Copyright © DeNA Co.,Ltd. All Rights Reserved. ゲーム開発者の要望  ネイティブ並の品質のゲームの開発 ⁃ リッチなグラフィクス (2D or 3D) ⁃ リッチなサウンド (BGM, SEs, and voices) ⁃ スムーズな動作 (30 fps ~ 60 fps) ⁃ 高いデバイス互換性  開発費の削減 ⁃ 資産の購入 (ハードウェアやソフトウェア) ⁃ 実装 ⁃ テスト ⁃ 運用 4 ネイティブ並の品質のゲームを Web ゲーム並の費用で開発したい
  5. 5. 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 品質 5  ゲーム開発者への高品質なサポート ⁃ ゲームの品質をネイティブ並に向上 品質向上
  6. 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. 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. 8. Copyright © DeNA Co.,Ltd. All Rights Reserved. 現在の状況  ShellApp SDK  CreateJS-Lite (仮) ⁃ CreateJS 互換の JavaScript ライブラリ ⁃ ゲーム実行速度の向上 ⁃ スマートフォンへの最適化  CreateJS-Lite (仮) Accelerator ⁃ CreateJS-Lite (仮) ゲーム高速化用ネイティブライブラリ ⁃ Android および iOS デバイスにおけるゲーム速度の向上 ⁃ アプリ開発コストの削減 8
  9. 9. Copyright © DeNA Co.,Ltd. All Rights Reserved. Games and CreateJS-Lite There’s nothing to gain, if I would restrain. Helloween - My God-Given Right
  10. 10. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) の目的  CreateJS ゲームの実行速度を 10 倍にする ⁃ 高速な HTML5 API を用いた CreateJS の部分エミュレート • 100% 互換を目指さない • 非実装機能に対しては代替案を提案 ⁃ 描画結果やアニメーション状態のキャッシュ ⁃ 低速な処理のバックグラウンド実行 ⁃ ネットワークリソースのキャッシュ  CreateJS ゲームの移行コストの最小化 ⁃ Flash が生成した CreateJS コードの直接実行 ⁃ ブラウザおよびデバイス依存コードの吸収 10
  11. 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. 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. 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
  14. 14. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite and WebGL When the children cry, let them know we tried. White Lion - When The Children Cry
  15. 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. 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. 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. 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 プロパティ変更時のみ実行 タップ処理も利用
  19. 19. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite and Indexed Database I can't live with or without you. U2 - With Or Without You
  20. 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. 21. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) と Indexed Database  ファイルのキャッシュ ⁃ (ゲーム開始時における) ロード処理の高速化 • ロード済みファイル (画像・サウンド) をリロードしない ⁃ ゲーム中のロード処理の軽減 • ゲームサーバとクライアント間の通信を妨害しない  キャッシュ管理用処理の追加 ⁃ ゲーム更新時にキャッシュを全削除 21 CreateJS-Lite CreateJS XMLHttpRequest Indexed DB JavaScript
  22. 22. Copyright © DeNA Co.,Ltd. All Rights Reserved. Game CreateJS-Lite (仮) のファイル読み込み (キャッシュ) 1. プリロード開始 2. キャッシュ読込 ⁃ ファイルデータ受信 3. キャッシュ更新 ⁃ ファイルの更新時刻 (利用さ れていないファイルの削除に 利用) ⁃ バックグラウンド実行 4. CreateJS オブジェクト作成 22 ServerCache CreateJS Lite
  23. 23. Copyright © DeNA Co.,Ltd. All Rights Reserved. Game CreateJS-Lite (仮) のファイル読み込み (サーバ) 1. プリロード開始 2. キャッシュ読込 ⁃ ファイルが存在しない 3. サーバからファイル読込 ⁃ XMLHttpRequest v2 を利用 してデータを直接取得 4. キャッシュ書込 ⁃ ファイルデータと更新時刻 ⁃ バックグラウンドで実行 5. CreateJS オブジェクト作成 23 ServerCache CreateJS Lite
  24. 24. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite and Optimization Truth will find its reward. Judas Priest - Sword Of Damocles
  25. 25. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) の制約  CreateJS と 100% 互換ではない ⁃ 未実装な機能 • WebGL や OpenGL で実装困難な機能 • ゲームで利用されていない機能 ⁃ Bugs  (一般的に) CreateJS よりもメモリ使用量が多い ⁃ 描画キャッシュ  ブラウザの制約 ⁃ CPU 負荷の高いブラウザ機能との同時利用 • CreateJS-Lite (仮) が利用可能な CPU リソース減少 25
  26. 26. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) 向け最適化  CreateJS アニメーションの負荷軽減 ⁃ (一般的に) Flash アニメータの作業量と反比例  メモリ利用量の削減 ⁃ 不要な CreateJS オブジェクトの削除 • Text, Shapes は削除時にキャッシュも削除 ⁃ ページ遷移 (unload または hashchange) • すべての CreateJS オブジェクトを削除 ⁃ テクスチャフォーマットの指定 (大きい Bitmap の場合)  CPU 負荷の高いブラウザ機能の削減 ⁃ CSS animations (transforms)  バグ報告およびリクエスト 26
  27. 27. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite and CreateJS-Lite Accelerator We'll get higher and higher. Straight up we’ll climb. Van Halen - Dreams
  28. 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. 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. 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. 31. Copyright © DeNA Co.,Ltd. All Rights Reserved. CreateJS-Lite (仮) Accelerator の画面描画 1. OpenGL テクスチャの作成 ⁃ 画像ロード時に作成 2. 描画コマンドの送信 ⁃ 1フレームを描画するためのコ マンド列を送信 ⁃ Text, Shape の画像も送信 3. 描画コマンドの実行 31 描画コマンド WebView OpenGL view
  32. 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
  33. 33. Copyright © DeNA Co.,Ltd. All Rights Reserved. Laplace Link and CreateJS-Lite gloops は、新しい価値に挑戦する 会社でありたい Tomohiro Ueda
  34. 34. Copyright © DeNA Co.,Ltd. All Rights Reserved. ラプラスリンクと CreateJS-Lite (仮) 事前登録受付中 http://laplacelink.jp/ 34
  35. 35. Copyright © DeNA Co.,Ltd. All Rights Reserved. Thank You! Take me where my future's lyin', St. Elmo's fire. John Parr - St. Elmo's Fire

×