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 𝑡𝑦10 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

CreateJSXMLHttpRequest

Indexed DB

JavaScript


Game

CreateJS-Lite (仮) のファイル読み込み (キャッシュ)

1. プリロード開始

2. キャッシュ読込

⁃ ファイルデータ受信

3. キャッシュ更新

⁃ ファイルの更新時刻 (利用されていないファイルの削除に利用)

⁃ バックグラウンド実行

4. CreateJS オブジェクト作成

22

Server Cache CreateJS

Lite


Game

CreateJS-Lite (仮) のファイル読み込み (サーバ)

1. プリロード開始

2. キャッシュ読込

⁃ ファイルが存在しない

3. サーバからファイル読込

⁃ XMLHttpRequest v2 を利用してデータを直接取得

4. キャッシュ書込

⁃ ファイルデータと更新時刻

⁃ バックグラウンドで実行

5. CreateJS オブジェクト作成

23

Server Cache 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

http://laplacelink.jp/


Thank You!

Take me where my future's lyin', St. Elmo's fire.

John Parr - St. Elmo's Fire

Technology

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