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