cedec 2013 - 徹底的にチューンしたハイブリッドアプリ「d.o.t. defender of...

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 Modifiedすら通信したくない

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

ImagePackerSpriteAnimationBuilder

ParticleBuilderAnimationBuilder

INTRODUCTION TOOLS


60

INTRODUCTION TOOLS

Texture

ImagePacker SpriteAnimationBuilder

AnimationBuilder

ParticleBuilder

Data flow


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

Strict ly confidential

INTRODUCTION TOOLS


70

INTRODUCTION TOOLS


71

INTRODUCTION TOOLS


72

INTRODUCTION TOOLS


73

INTRODUCTION TOOLS


74

INTRODUCTION TOOLS


質疑応答／連絡先

DeNAでは一緒にゲームを作ってくれる仲間を求めています• 興味持たれた方はお手元のチラシのアドレスから連絡を

講演に関する質問はこちら• 本編について: [email protected]

• アート&ツールについて: [email protected]

75

cedec 2013 - 徹底的にチューンしたハイブリッドアプリ「d.o.t. defender of...

Documents