CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作
26 likes6,637 views
CEDEC 2013の講演に使った資料です。
CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作
- 1. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 徹底的にチューンしたハイブリッドアプリ 「D.O.T. Defender of Texel」の制作 2013年8月23日 多久島信隆／小林潤 ソーシャルゲーム開発部 株式会社ディー・エヌ・エー
- 2. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 思えば10年前… 2
- 3. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. タイトル紹介 3
- 4. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 4
- 5. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 5
- 6. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 6
- 7. 欧米版: 2012年12月に配信開始 日本版: 2013年8月に配信開始 • App Store/Google Playから「ドット」で検索 ファンタジー世界「テクセル」の物語をレトロなドット 絵と音楽で描き、懐かしさと新鮮さが共存したソーシャ ルゲーム Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. D.O.T. Defender of Texel 7
- 8. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 何を考えることになったのか 8
- 9. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 事の発端 9 ある日、ボスから数枚の企画書と共に「このタイトルを 年末にアプリで出したい。最適なアーキテクチャを考え てくれ」とオーダー クライアント／サーバ共に、極力使い回しからフルスク ラッチまでなんでもあり
- 10. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 事の発端 「なんでもあり」は楽しいけれど難しい 1年くらいは先を読む必要 判断ひとつで未来は大きく変わる 10
- 11. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 大切なのは効果的な問いを見つけること 判断を積み重ねるとき、ブレない軸になる 答えに説得力が生まれる 11
- 12. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Tips: 見つけ方 「なぜ」を繰り返す 複数のエキスパートにヒアリング 類似例 ( 問いと答え) を調べる 12
- 13. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 今回、設定した問い 13
- 14. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 効果的な問い イベントドリブンの売上モデルにおいて最適なアプリ開 発ソリューションは？ • イベントドリブンとは: 1ヶ月に4回、プレイヤーを惹き付け、目標に 向かうモチベーションを誘発するゲームプレイを提供 • 他の売上モデルもあるがソーシャルゲームではごく一般的 14
- 15. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. その問いを選んだ理由 売上という結果に直結した問い 朝に夕にイベント毎に作り変える、運営の実態に即した 問い • アプリでもPDCAを高速に回したい • 運営力という自社の強みを活かせる 他も考慮するけれど、この問いを優先する • 手触り、表現力、実行効率、人的資源、 開発スピード、トレンド 15
- 16. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. イベント＋アプリの難所 16
- 17. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. イベントドリブン＋アプリの難所 イベントとクライアントのリリースを同期させる必要 • 失敗したらイベントを開催できなくなるリスク • iOSの審査期間考慮した綱渡り的な開発スケジュール この問題を放置したら… • 変更に対して臆病になっていった • 難しいプロジェクトマネジメントがさらに難しくなった • 人海戦術に頼りチームが肥大化した 17
- 18. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 攻略法は？ 18
- 19. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 更新性を高める OS関係なく更新できる • イベントとクライアントのリリースサイクルを切り離す いつでも更新できる • 起動したままならなお良い 必要な分だけ更新できる • ダウンロード時間の最小化 開発への強制力がある • フレームワークとして高い更新性を担保できるとなお良い 19
- 20. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 高い更新性の実現方法 アプリをとにかく汎用的に作る • とことんデータドリブン • MMOクライアントに近づく • あるいはリッチな独自ブラウザと捉えても良い 20
- 21. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. どこまで汎用化するか 究極的にはWebView • WebViewで作れるシーンも多い • しかし、表現力、手触りで劣る 劣る部分を一線級に引き上げるという発想 見える部分 (表現、ユーザビリティ) 、見えない部分 (運 用、開発の容易さ) どちらも高いレベルである必要 • ゴールは同じでどう到達するかという話 21
- 22. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 表現力を高める方法？ 22
- 23. WebViewの描画性能には期待しない :D OpenGLのレイヤーをWebViewの上に重ねる • 動きあるモノは全てGLレイヤーで描けば良さそう • ネイティブアニメーションプレイヤー開発へ Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 魅せるモノはネイティブで描く 23
- 24. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ここまでまとめ 24
- 25. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 課題と解決策 イベント＋アプリは同期リリースを攻略する必要 アーキテクチャ設計方針は更新性を重視 WebViewベースでネイティブを積極活用して魅力を上 げるアプローチ サーバアーキテクチャは今回は重要でない 25
- 26. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 解決策は見えたので… 26
- 27. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. どう実現するか 27
- 28. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ざっくり構成 28 ハードウェア iOS WebView ゲーム ネイティブ キャッシュ Android WebView・ネイティブブリッジ 他SDK ネイティブ アニメーション cocos2d-x
- 29. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ざっくり構成 iOS 5以上、Android 2.3以上 描画、サウンドのOS抽象化ミドルウェアにcocos2d-x • C++ APIのみ利用 • 他ミドルは無駄に層が厚くなること、触れない領域出ること懸念して 避けた ミドル除くコードボリューム: 5万行 29
- 30. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 更新性の担保① 30
- 31. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. WebView 31 ハードウェア iOS WebView ゲーム ネイティブ キャッシュ Android WebView・ネイティブブリッジ 他SDK ネイティブ アニメーション cocos2d-x
- 32. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. WebView ゲーム固有のコード・アセットは全てここに寄せる • 例外をどれだけ少なくできるか 静的ファイルの読み込みは改良する • 次に説明するネイティブキャッシュ機構 ユーザから見ればアプリなのでUXはアプリを志向する • Single Page Application + AJAX + APIデータキャッシュがベスト • 今回はSPA + PJAX (擬似) 止まり • アプリらしい遷移できるよう遷移スタックは別に用意 32
- 33. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 少し脱線: ネイティブブリッジについて 誰がやっても無理矢理感漂う実装になる 高レイテンシ前提で使う • WebViewかネイティブかどちらかに処理を寄せる ブリッジ実装で遭遇するAndroidの罠 • JavascriptInterfaceはクラッシュ、セキュリティホールといいとこな い • console.log()はフックできない端末がある • alert()はtouchイベントがキャンセルされる 33
- 34. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 更新性の担保② 34
- 35. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ネイティブキャッシュ機構 35 ハードウェア iOS WebView ゲーム ネイティブ キャッシュ Android WebView・ネイティブブリッジ 他SDK ネイティブ アニメーション cocos2d-x
- 36. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ネイティブキャッシュ機構 - 要件 WebViewを使うアプリで、体感速度劣る原因になる読 み込み時間を減らす • 画像、CSS、JS、Web Font、ネイティブアニメーションデータ アプリに抱き込むだけではダメでいつでも更新したい • 画面遷移時に必要な分バージョンチェックして更新 • 強いバージョニング (MD5) でダウンロードは一度きりにしたい WebView、ネイティブでキャッシュ共有したい • アセット管理がシンプルに 36
- 37. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ネイティブキャッシュ機構 - 実装 ブラウザキャッシュ、HTML5 Application Cacheは 使わない • 容量不足、扱いづらい、304 Not Modifiedすら通信したくない WebViewへどうキャッシュデータを渡すかが問題 • 当初はdata URI、巨大なファイルを扱うようになって今はローカルプ ロキシ経由 ローカルプロキシ • ダウンローダを内包した組み込みHTTPd、ほぼ透過プロキシ • http://localhost:12345/FILE?ver=MD5 37
- 38. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 表現力の向上 38
- 39. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ネイティブアニメーションプレイヤー 39 ハードウェア iOS WebView ゲーム ネイティブ キャッシュ Android WebView・ネイティブブリッジ 他SDK ネイティブ アニメーション cocos2d-x
- 40. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ネイティブアニメーションプレイヤー 内製アニメーションツールのcocos2d-x用ランタイム • 機能はキーフレームアニメ、パラパラアニメ、パーティクル • 用途はHUDから背景、キャラクタ、スキルエフェクトなど • ブリッジ頻度下げるため高機能化、JSからは大粒度で制御する • 労せず60fpsでぬるぬる動く 更新性落とさぬようデータドリブンを徹底 • 汎用アニメツールなら代用できる - Spine、SpriteStudio、自作Flash Player 40
- 41. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ネイティブアニメーションプレイヤー 内製アニメーションツールのcocos2d-x用ランタイム • 機能はキーフレームアニメ、パラパラアニメ、パーティクル • 用途はHUDから背景、キャラクタ、スキルエフェクトなど • ブリッジ頻度下げるため高機能化、JSからは大粒度で制御する • 労せず60fpsでぬるぬる動く 更新性落とさぬようデータドリブンを徹底 • 汎用アニメツールなら代用できる - Spine、SpriteStudio、自作Flash Player 40
- 42. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 透過GLレイヤー on WebViewレイヤー 41
- 43. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 透過GLレイヤー on WebViewレイヤー ふたつのレイヤーは論理解像度でぴったり一致させる • WebViewはmeta viewportでスケーリング • Androidはviewportのスケール値はネイティブで計算 擬似的にレイヤー間でz-indexを統合 • HTMLでポップアップを表示したら、それより下のネイティブアニメ は消える エフェクトなどでレイヤーまたぐ加算合成は使えない • GLレイヤーで背景描くなど工夫 42
- 44. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 43
- 45. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. その他、上手くやるコツ 44
- 46. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ウェブ開発のツールを殺さない 開発はPC上のChrome • 最終確認だけiOS Simulator／実機 • ネイティブ機能のエミュレーション、モック を用意 実機でもリロードすれば即確認でき る • 更新性高いことは開発にも有利 • 開発中のアプリ更新不要 45
- 47. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. リリースエンジニアリングはしっかりと 同期リリースが不要になっても、リリースサイクルがご く短期なことには変わりない 品質を保つために毎日統合、常時テスト • Jenkinsでなんでもワンクリック化 • クライアント配付もTestFlight的なものでワンクリック化 46
- 48. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Androidの罠対策 WebViewで無茶しない • An 2.3は機能縮退を考慮しておく マイナーな機能を使う時はよくググる • 特定バージョン／デバイスに致命的な問題が残っていて使えないこと がある 多くのデバイスでテストするために外部サービスを利用 • 数百デバイスを自動テストできるデバイスファームを使う • Crittercismなどのクラッシュレポートサービスを使う 47
- 49. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Calabash＋デバイスファーム 48
- 50. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. まとめ 49
- 51. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 課題と解決策 イベント＋アプリは同期リリースを攻略する必要 • リリースサイクルを切り離すにはアプリの更新性を高くする • WebViewベースなら簡単 WebViewベースでもネイティブを活用して魅力を上げ られる • ネイティブアニメーション、ネイティブキャッシュ • ハイブリッドアプリのひとつの形 50
- 52. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 結果は概ね狙い通り 気楽に更新できるし、表現の幅も広がった • 突然の仕様変更にもスピード感ある対応 ＋αとして得意領域のバラつきもチームの力に • フロントエンドエンジニアは変わらず戦力 • アプリエンジニアは挑戦的な仕事に活き活き 51
- 53. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 最後にアーキテクトという仕事の面白さ ここを引いてここは攻める、という駆け引き • 技術、市場、人、状況を捉えて信念を持って判断していく 製品のみならず開発スタイル、将来をもデザインする • 当時cocos2d-xの採用はちょっとした冒険だったが今となっては正解 52
- 54. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ありがとうございました 53 もうちょっとだけ続きます
- 55. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 補遺: アートアセット設計とツールデモ 2013年8月23日 小林潤 ソーシャルゲーム開発部 株式会社ディー・エヌ・エー
- 56. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 55 あるべき姿 INTRODUCTION TOOLS
- 57. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 56 データの変更・追加が簡単で 何度も試行錯誤できる INTRODUCTION TOOLS
- 58. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 57 デザイナーだけで クォリティアップ可能 INTRODUCTION TOOLS
- 59. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 58 実現する為に 4つのツールを開発 INTRODUCTION TOOLS
- 60. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 59 ImagePacker SpriteAnimationBuilder ParticleBuilder AnimationBuilder INTRODUCTION TOOLS
- 61. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 60 INTRODUCTION TOOLS Texture ImagePacker SpriteAnimationBuilder AnimationBuilder ParticleBuilder Data flow
- 62. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 60 INTRODUCTION TOOLS Texture ImagePacker SpriteAnimationBuilder AnimationBuilder ParticleBuilder Data flow
- 63. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 60 INTRODUCTION TOOLS Texture ImagePacker SpriteAnimationBuilder AnimationBuilder ParticleBuilder Data flow
- 64. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 60 INTRODUCTION TOOLS Texture ImagePacker SpriteAnimationBuilder AnimationBuilder ParticleBuilder Data flow
- 65. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 60 INTRODUCTION TOOLS Texture ImagePacker SpriteAnimationBuilder AnimationBuilder ParticleBuilder Data flow
- 66. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 61 INTRODUCTION TOOLS D.O.T.の人員構成
- 67. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 62 INTRODUCTION TOOLS D.O.T. では… アートD データ設計 データ作成 UI 外注への発注作業 必要素材の作成 データの確認 全画面レイアウト 必要素材の作成（フォトショップ作業） データ構造の設計 演出等の作成 キャラクター、スキル等のデータ化 AB,PB,SAB デザイナーの構成 AB,PB,SAB 大事！
- 68. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 63 INTRODUCTION TOOLS ほぼ4人
- 69. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 64 INTRODUCTION TOOLS イベント毎の作業量
- 70. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 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
- 71. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 66 INTRODUCTION TOOLS データ構造の仕様切る際に、 量産体制組めるか イベントのペース維持できるか 注意する
- 72. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 67 INTRODUCTION TOOLS 未来の要求も考慮して 自由度を高く保つ データ構造にする
- 73. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 68 INTRODUCTION TOOLS デモ
- 74. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 69 Strictly confidential INTRODUCTION TOOLS
- 75. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 70 INTRODUCTION TOOLS
- 76. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 71 INTRODUCTION TOOLS
- 77. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 72 INTRODUCTION TOOLS
- 78. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 73 INTRODUCTION TOOLS
- 79. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 74 INTRODUCTION TOOLS
- 80. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 質疑応答／連絡先 DeNAでは一緒にゲームを作ってくれる仲間を求めてい ます • 興味持たれた方はお手元のチラシのアドレスから連絡を 講演に関する質問はこちら • 本編について: nobutaka.takushima@dena.com • アート&ツールについて: jun.kobayashi@dena.com 75