Downloaded 406 times
More Related Content
![[ICLR2017読み会 @ DeNA] ICLR2017紹介](https://cdn.slidesharecdn.com/ss_thumbnails/iclr2017denaiclr2017-170616173153-thumbnail.jpg?width=640&height=640&fit=bounds)
FINAL FANTASY Record Keeper の作り方
- 1. FINAL FANTASY RecordKeeper の作り方 株式会社ディー・エヌ・エー Japan リージョン ゲーム事業本部 新井 英資 eisuke.arai@dena.com ©2014 SQUARE ENIX CO.,LTD / DeNA Co.,Ltd. All Rights Reserved.
- 2. 自己紹介 • 新井英資 • FINAL FANTASY Record Keeper (FFRK) リードエンジニア • 2011年入社 4年目 • 以前はアルバイトでiOSアプリを作ったり • インフラやミドルウェアとチームを繋ぐ人 • 出来ないことを出来るようにします
- 3. 今日お話すること • FFRKというゲームを作ってみた話 • FFRKのアーキテクチャの話 • FFRKの運用周りの小話
- 4.
- 5. FFRKについて • iOS/Android™向けにリリース（2014/09/25） • 株式会社スクウェア・エニックスとの共同開発タイトル • 全FFシリーズのバトルをドット絵で再現 • 懐かしくて新しいFINAL FANTASY • システム開発はDeNA • おかげ様でとても好評
- 6.
- 7. 開発当初の要件 • アプリで作りたい – リッチなアニメーションを再生 • コンテンツ更新をコントロールしたい – アプリ更新無しでのイベントリリース • これまでの既存リソースを使いたい – Kickmotor（D.O.T.、三国志ロワイヤル） – ブラウザゲー用の内製フレームワーク
- 8. ハイブリッドアプリ • WebViewレイヤとOpenGLレイヤの2層構造 – リッチな表現はOpenGLで描画 • WebViewBridge – WebView上のJSからネイティブの関数を実行 WWeebbVViieeww OOppeennGGLL
- 9.
- 10.
- 11. WebView上のJS実装 • MVCフレームワークの導入 – フロントもきちんと構造化して実装 • Backbone.js + RequireJS – 利用実績を考慮 • Underscore template – JSTにコンパイルして使う
- 12. バトルの実装 • FFのATBを再現するには… – 待機、詠唱、攻撃、などの状態制御 • JSでステートマシンを実装 – ネイティブアニメ描画とバトルロジックを分離 • アニメーションはDeferredチェーン – ネイティブからの描画コールバックを待って次へ • ボス毎にステートマップを作成 – 多彩なボスの行動制御
- 13.
- 14. リリース1ヶ月前の出来事 • CBTの結果 –重い –熱い • 10fpsを切るもっさりバトル • スクロール出来ないアイテムリスト • 充電しながらプレイしても電池が減る
- 15.
- 16. パフォチュー祭り WebView編 •Chromeでのプロファイリング –無駄な処理を徹底的に洗い出す –レイアウト構造からの見直し • ネイティブと同等のレベルへ
- 17.
- 18.
- 19.
- 20.
- 21. パフォチュー祭り ネイティブ編 •各OpenGL描画APIのコールスタックを精査 • 無駄な描画APIコールを減らす – 頂点数0での描画 – 無駄に広い描画領域 • 同じテクスチャを参照する描画をまとめる • Android2.X系でも30fps出るように – ドローコールは4分の1まで削減
- 22.
- 23.
- 24. ハイブリッドで作るメリット • イベントドリブンなゲーム運用が出来る – クライアント申請期間に左右されない – 究極的にはJSを変えれば全く別のゲームを作れる • ChromeやSafariでデバッグ出来る – ビルドをし直す必要が無くて便利
- 25. とはいえ • アクション性の高い要素は難しい – WebViewBridgeでのレイテンシ • 所詮はWebView – HTMLテンプレート読み込み途中で止まったり – ひっそりと再読み込みボタンを置く悲しみ • OSバージョンによる挙動の違い – 主にAndroid™ – 主にAndroid™
- 26.
- 27.
- 28.
- 29. ネイティブアニメーション • アニメーションプレイヤー – 内製ツールで作成したアニメデータを Cocos2d-xで再生する • 細かなアニメ制御 – データでの制御 – マスタでの制御 – JSでの制御
- 30. ネイティブキャッシュ（図解） キキャャッッシシュュ機機構構 デディィレレククトトリリ hhttttppdd ダダウウンンロローーダダ WebView 持っていないアセットのみ をサーバからとってくる
- 31. ネイティブキャッシュ • WebViewからもネイティブからも透過的にアクセス – Mongoose を使いアプリ内部でプロキシサーバを立てる – http://127.0.0.1:12345/hoge?url=file&ver=abcde – キャッシュが無ければサーバから取得（cURL） • キャッシュさせるもの – 大体何でも • cssについては少し工夫 – 保存時に画像URLを置換してキャッシュサーバを向ける • ビルドに抱き込むアセットも同様にアクセス可能
- 32.
- 33. 高負荷対策 • リリース後わりとすぐにTVCM開始 – 急増するユーザ（現在：登録者数300万人超） – 荒ぶるWebサーバ • 迅速な負荷対応 – シャードDBを追加投入 – Webサーバを順次投入 – 参照をslaveに逃がせる所は逃がす • サービス停止すること無く乗り切りました
- 34. マスタ管理 • GoogleSpreadsheet で一括管理 • Google Apps Script – マスタ間での値のマッピング – csvでの吐き出し • マスタ作成フロー – 開発環境でロード – マスタのテスト – Jenkins経由でgithub:EにPull-Request
- 35. ChatOps • IRC+ Jenkins + Hubot – Jenkinsが失敗していると全員怒られる • Hubotが管理するもの – Jenkinsでのビルド状況 – 検証環境の状態 – その他余計な機能多数
- 36. まとめ • FFRKはハイブリッドアプリ – WebViewとネイティブの両レイヤで最適化 • FFRKの特徴的機構 – アニメーションプレイヤー – ネイティブキャッシュ • FFRKの運用は終わりなき改善の旅 – 高負荷対応 – マスタ管理 – ChatOps
- 37. 突然の謝辞 • たくさんのエンジニアにご協力頂きました – インフラチームの皆さん – ミドルウェアチームの皆さん – パフォーマンスチューナーの皆さん – 開発チームの皆さん • ありがとうございました！！
- 38.