CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作

Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
徹底的にチューンしたハイブリッドアプリ
「D.O.T. Defender of Texel」の制作
2013年8月23日
多久島信隆／小林潤
ソーシャルゲーム開発部
株式会社ディー・エヌ・エー

思えば10年前…
2

タイトル紹介
3

4

5

6

欧米版: 2012年12月に配信開始
日本版: 2013年8月に配信開始
• App Store/Google Playから「ドット」で検索
ファンタジー世界「テクセル」の物語をレトロなドット
絵と音楽で描き、懐かしさと新鮮さが共存したソーシャ
ルゲーム
D.O.T. Defender of Texel
7

何を考えることになったのか
8

事の発端
9
ある日、ボスから数枚の企画書と共に「このタイトルを
年末にアプリで出したい。最適なアーキテクチャを考え
てくれ」とオーダー
クライアント／サーバ共に、極力使い回しからフルスク
ラッチまでなんでもあり

事の発端
「なんでもあり」は楽しいけれど難しい
1年くらいは先を読む必要
判断ひとつで未来は大きく変わる
10

大切なのは効果的な問いを見つけること
判断を積み重ねるとき、ブレない軸になる
答えに説得力が生まれる
11

Tips: 見つけ方
「なぜ」を繰り返す
複数のエキスパートにヒアリング
類似例 ( 問いと答え) を調べる
12

今回、設定した問い
13

効果的な問い
イベントドリブンの売上モデルにおいて最適なアプリ開
発ソリューションは？
• イベントドリブンとは: 1ヶ月に4回、プレイヤーを惹き付け、目標に
向かうモチベーションを誘発するゲームプレイを提供
• 他の売上モデルもあるがソーシャルゲームではごく一般的
14

その問いを選んだ理由
売上という結果に直結した問い
朝に夕にイベント毎に作り変える、運営の実態に即した
問い
• アプリでもPDCAを高速に回したい
• 運営力という自社の強みを活かせる
他も考慮するけれど、この問いを優先する
• 手触り、表現力、実行効率、人的資源、
開発スピード、トレンド
15

イベント＋アプリの難所
16

イベントドリブン＋アプリの難所
イベントとクライアントのリリースを同期させる必要
• 失敗したらイベントを開催できなくなるリスク
• iOSの審査期間考慮した綱渡り的な開発スケジュール
この問題を放置したら…
• 変更に対して臆病になっていった
• 難しいプロジェクトマネジメントがさらに難しくなった
• 人海戦術に頼りチームが肥大化した
17

攻略法は？
18

更新性を高める
OS関係なく更新できる
• イベントとクライアントのリリースサイクルを切り離す
いつでも更新できる
• 起動したままならなお良い
必要な分だけ更新できる
• ダウンロード時間の最小化
開発への強制力がある
• フレームワークとして高い更新性を担保できるとなお良い
19

高い更新性の実現方法
アプリをとにかく汎用的に作る
• とことんデータドリブン
• MMOクライアントに近づく
• あるいはリッチな独自ブラウザと捉えても良い
20

どこまで汎用化するか
究極的にはWebView
• WebViewで作れるシーンも多い
• しかし、表現力、手触りで劣る
劣る部分を一線級に引き上げるという発想
見える部分 (表現、ユーザビリティ) 、見えない部分 (運
用、開発の容易さ) どちらも高いレベルである必要
• ゴールは同じでどう到達するかという話
21

表現力を高める方法？
22

WebViewの描画性能には期待しない :D
OpenGLのレイヤーをWebViewの上に重ねる
• 動きあるモノは全てGLレイヤーで描けば良さそう
• ネイティブアニメーションプレイヤー開発へ
魅せるモノはネイティブで描く
23

ここまでまとめ
24

課題と解決策
イベント＋アプリは同期リリースを攻略する必要
アーキテクチャ設計方針は更新性を重視
WebViewベースでネイティブを積極活用して魅力を上
げるアプローチ
サーバアーキテクチャは今回は重要でない
25

解決策は見えたので…
26

どう実現するか
27

ざっくり構成
28
ハードウェア
iOS
WebView
ゲーム
ネイティブ
キャッシュ
Android
WebView・ネイティブブリッジ
他SDK
ネイティブ
アニメーション
cocos2d-x

ざっくり構成
iOS 5以上、Android 2.3以上
描画、サウンドのOS抽象化ミドルウェアにcocos2d-x
• C++ APIのみ利用
• 他ミドルは無駄に層が厚くなること、触れない領域出ること懸念して
避けた
ミドル除くコードボリューム: 5万行
29

更新性の担保①
30

WebView
31
ハードウェア
iOS
WebView
ゲーム
ネイティブ
キャッシュ
Android
他SDK
ネイティブ
cocos2d-x

WebView
ゲーム固有のコード・アセットは全てここに寄せる
• 例外をどれだけ少なくできるか
静的ファイルの読み込みは改良する
• 次に説明するネイティブキャッシュ機構
ユーザから見ればアプリなのでUXはアプリを志向する
• Single Page Application + AJAX + APIデータキャッシュがベスト
• 今回はSPA + PJAX (擬似) 止まり
• アプリらしい遷移できるよう遷移スタックは別に用意
32

少し脱線: ネイティブブリッジについて
誰がやっても無理矢理感漂う実装になる
高レイテンシ前提で使う
• WebViewかネイティブかどちらかに処理を寄せる
ブリッジ実装で遭遇するAndroidの罠
• JavascriptInterfaceはクラッシュ、セキュリティホールといいとこな
い
• console.log()はフックできない端末がある
• alert()はtouchイベントがキャンセルされる
33

更新性の担保②
34

ネイティブキャッシュ機構
35
ハードウェア
iOS
WebView
ゲーム
ネイティブ
キャッシュ
Android
他SDK
ネイティブ
cocos2d-x

ネイティブキャッシュ機構 - 要件
WebViewを使うアプリで、体感速度劣る原因になる読
み込み時間を減らす
• 画像、CSS、JS、Web Font、ネイティブアニメーションデータ
アプリに抱き込むだけではダメでいつでも更新したい
• 画面遷移時に必要な分バージョンチェックして更新
• 強いバージョニング (MD5) でダウンロードは一度きりにしたい
WebView、ネイティブでキャッシュ共有したい
• アセット管理がシンプルに
36

ネイティブキャッシュ機構 - 実装
ブラウザキャッシュ、HTML5 Application Cacheは
使わない
• 容量不足、扱いづらい、304 Not Modiﬁedすら通信したくない
WebViewへどうキャッシュデータを渡すかが問題
• 当初はdata URI、巨大なファイルを扱うようになって今はローカルプ
ロキシ経由
ローカルプロキシ
• ダウンローダを内包した組み込みHTTPd、ほぼ透過プロキシ
• http://localhost:12345/FILE?ver=MD5
37

表現力の向上
38

ネイティブアニメーションプレイヤー
39
ハードウェア
iOS
WebView
ゲーム
ネイティブ
キャッシュ
Android
他SDK
ネイティブ
cocos2d-x

ネイティブアニメーションプレイヤー
内製アニメーションツールのcocos2d-x用ランタイム
• 機能はキーフレームアニメ、パラパラアニメ、パーティクル
• 用途はHUDから背景、キャラクタ、スキルエフェクトなど
• ブリッジ頻度下げるため高機能化、JSからは大粒度で制御する
• 労せず60fpsでぬるぬる動く
更新性落とさぬようデータドリブンを徹底
• 汎用アニメツールなら代用できる
- Spine、SpriteStudio、自作Flash Player
40

透過GLレイヤー on WebViewレイヤー
41

透過GLレイヤー on WebViewレイヤー
ふたつのレイヤーは論理解像度でぴったり一致させる
• WebViewはmeta viewportでスケーリング
• Androidはviewportのスケール値はネイティブで計算
擬似的にレイヤー間でz-indexを統合
• HTMLでポップアップを表示したら、それより下のネイティブアニメ
は消える
エフェクトなどでレイヤーまたぐ加算合成は使えない
• GLレイヤーで背景描くなど工夫
42

43

その他、上手くやるコツ
44

ウェブ開発のツールを殺さない
開発はPC上のChrome
• 最終確認だけiOS Simulator／実機
• ネイティブ機能のエミュレーション、モック
を用意
実機でもリロードすれば即確認でき
る
• 更新性高いことは開発にも有利
• 開発中のアプリ更新不要
45

リリースエンジニアリングはしっかりと
同期リリースが不要になっても、リリースサイクルがご
く短期なことには変わりない
品質を保つために毎日統合、常時テスト
• Jenkinsでなんでもワンクリック化
• クライアント配付もTestFlight的なものでワンクリック化
46

Androidの罠対策
WebViewで無茶しない
• An 2.3は機能縮退を考慮しておく
マイナーな機能を使う時はよくググる
• 特定バージョン／デバイスに致命的な問題が残っていて使えないこと
がある
多くのデバイスでテストするために外部サービスを利用
• 数百デバイスを自動テストできるデバイスファームを使う
• Crittercismなどのクラッシュレポートサービスを使う
47

Calabash＋デバイスファーム
48

まとめ
49

課題と解決策
イベント＋アプリは同期リリースを攻略する必要
• リリースサイクルを切り離すにはアプリの更新性を高くする
• WebViewベースなら簡単
WebViewベースでもネイティブを活用して魅力を上げ
られる
• ネイティブアニメーション、ネイティブキャッシュ
• ハイブリッドアプリのひとつの形
50

結果は概ね狙い通り
気楽に更新できるし、表現の幅も広がった
• 突然の仕様変更にもスピード感ある対応
＋αとして得意領域のバラつきもチームの力に
• フロントエンドエンジニアは変わらず戦力
• アプリエンジニアは挑戦的な仕事に活き活き
51

最後にアーキテクトという仕事の面白さ
ここを引いてここは攻める、という駆け引き
• 技術、市場、人、状況を捉えて信念を持って判断していく
製品のみならず開発スタイル、将来をもデザインする
• 当時cocos2d-xの採用はちょっとした冒険だったが今となっては正解
52

ありがとうございました
53
もうちょっとだけ続きます

補遺: アートアセット設計とツールデモ
2013年8月23日
小林潤
ソーシャルゲーム開発部
株式会社ディー・エヌ・エー

55
あるべき姿
INTRODUCTION TOOLS

56
データの変更・追加が簡単で
何度も試行錯誤できる
INTRODUCTION TOOLS

57
デザイナーだけで
クォリティアップ可能
INTRODUCTION TOOLS

58
実現する為に
4つのツールを開発
INTRODUCTION TOOLS

59
ImagePacker
SpriteAnimationBuilder
ParticleBuilder
AnimationBuilder
INTRODUCTION TOOLS

60
INTRODUCTION TOOLS
Texture
ImagePacker SpriteAnimationBuilder
AnimationBuilder
ParticleBuilder
Data ﬂow

61
INTRODUCTION TOOLS
D.O.T.の人員構成

62
INTRODUCTION TOOLS
D.O.T. では…
アートD データ設計
データ作成
UI
外注への発注作業
必要素材の作成
データの確認
全画面レイアウト
必要素材の作成（フォトショップ作業）
データ構造の設計
演出等の作成
キャラクター、スキル等のデータ化
AB,PB,SAB
デザイナーの構成
AB,PB,SAB
大事！

63
INTRODUCTION TOOLS
ほぼ4人

64
INTRODUCTION TOOLS
イベント毎の作業量

65
INTRODUCTION TOOLS
D.O.T. では…
イベント時の必要素材数（毎月4回のイベント実施）
SDx2 SRB PVP
キャラクター 6 6 4
ミッション 6 3 0
スキル 0~1 4~5 1
ワールドマップ 2 1 0
プロモページ 0~1 1 0~1

66
INTRODUCTION TOOLS
データ構造の仕様切る際に、
量産体制組めるか
イベントのペース維持できるか
注意する

67
INTRODUCTION TOOLS
未来の要求も考慮して
自由度を高く保つ
データ構造にする

68
INTRODUCTION TOOLS
デモ

69
Strictly confidential
INTRODUCTION TOOLS

70
INTRODUCTION TOOLS

71
INTRODUCTION TOOLS

72
INTRODUCTION TOOLS

73
INTRODUCTION TOOLS

74
INTRODUCTION TOOLS

質疑応答／連絡先
DeNAでは一緒にゲームを作ってくれる仲間を求めてい
ます
• 興味持たれた方はお手元のチラシのアドレスから連絡を
講演に関する質問はこちら
• 本編について: nobutaka.takushima@dena.com
• アート&ツールについて: jun.kobayashi@dena.com
75

CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作

Similar to CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作 (20)

CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作