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のゲーム開発を支える技術 (クライアントサイド編)

More Related Content

What's hot

Viewers also liked

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

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