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

5,629 views

Published on

CEDEC 2013の講演に使った資料です。

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

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

×