Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

FINAL FANTASY Record Keeper の作り方

152.582 visualizaciones

Publicado el

第二回DeNAゲーム開発勉強会のスライドです
https://atnd.org/events/58433

Publicado en: Software
  • Inicia sesión para ver los comentarios

FINAL FANTASY Record Keeper の作り方

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

×