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

Copyright © DeNA Co.,Ltd. All Rights Reserved.
DeNA のゲーム開発を
支える技術
クライアントサイド編
January 29, 2016
Hironori Bono
System Management Unit
DeNA Co., Ltd.

Games and DeNA
Feed the world.
Band Aid - Do They Know It's Christmas?

DeNA のミッション
 ユーザを楽しませる
⁃ 高品質のゲームの提供
 ゲーム開発者のサポート
⁃ 解析ツールの提供
⁃ Mobage APIs の提供
⁃ クライアント SDKs の提供
Games
APIs
3

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

DeNA がやるべきこと
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
Native Games
DeNA Games
Web Games
品質
5
 ゲーム開発者への高品質なサポート
⁃ ゲームの品質をネイティブ並に向上
品質向上

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

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

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

Games and CreateJS-Lite
There’s nothing to gain,
if I would restrain.
Helloween - My God-Given Right

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

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

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

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

CreateJS-Lite and WebGL
When the children cry,
let them know we tried.
White Lion - When The Children Cry

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

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

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

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
プロパティ変更時のみ実行
タップ処理も利用

CreateJS-Lite and
Indexed Database
I can't live with or without you.
U2 - With Or Without You

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

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

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

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

CreateJS-Lite and Optimization
Truth will find its reward.
Judas Priest - Sword Of Damocles

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

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

CreateJS-Lite and
CreateJS-Lite Accelerator
We'll get higher and higher.
Straight up we’ll climb.
Van Halen - Dreams

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

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

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

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

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

Laplace Link and CreateJS-Lite
gloops は、新しい価値に挑戦する
会社でありたい
Tomohiro Ueda

ラプラスリンクと CreateJS-Lite (仮)
事前登録受付中
http://laplacelink.jp/
34

Thank You!
Take me where my future's lyin',
St. Elmo's fire.
John Parr - St. Elmo's Fire

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

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

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

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