FINAL FANTASY Record Keeper の作り方

Software

denastudy
  • 1. FINAL FANTASYRecord Keeperの作り方株式会社ディー・エヌ・エー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. FFRK というゲームを作ってみた話
  • 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からネイティブの関数を実行WWeebbVViieewwOOppeennGGLL
  • 9. ここはWebView
  • 10. ここはOpenGL
  • 11. WebView上のJS実装• MVCフレームワークの導入– フロントもきちんと構造化して実装• Backbone.js + RequireJS– 利用実績を考慮• Underscore template– JSTにコンパイルして使う
  • 12. バトルの実装• FFのATBを再現するには…– 待機、詠唱、攻撃、などの状態制御• JSでステートマシンを実装– ネイティブアニメ描画とバトルロジックを分離• アニメーションはDeferredチェーン– ネイティブからの描画コールバックを待って次へ• ボス毎にステートマップを作成– 多彩なボスの行動制御
  • 13. FFRKを作ったぞ!よしリリースだ!
  • 14. リリース1ヶ月前の出来事• CBTの結果–重い–熱い• 10fpsを切るもっさりバトル• スクロール出来ないアイテムリスト• 充電しながらプレイしても電池が減る
  • 15. orz
  • 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. FFRK のアーキテクチャの話
  • 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. FFRKの運用周りの小話
  • 33. 高負荷対策• リリース後わりとすぐにTVCM開始– 急増するユーザ(現在:登録者数300万人超)– 荒ぶるWebサーバ• 迅速な負荷対応– シャードDBを追加投入– Webサーバを順次投入– 参照をslaveに逃がせる所は逃がす• サービス停止すること無く乗り切りました
  • 34. マスタ管理• Google Spreadsheet で一括管理• 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. ご静聴ありがとうございました
    Please download to view
  • 38
    All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    Description
    第二回DeNAゲーム開発勉強会のスライドです
    https://atnd.org/events/58433
    Text
    • 1. FINAL FANTASYRecord Keeperの作り方株式会社ディー・エヌ・エー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. FFRK というゲームを作ってみた話
  • 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からネイティブの関数を実行WWeebbVViieewwOOppeennGGLL
  • 9. ここはWebView
  • 10. ここはOpenGL
  • 11. WebView上のJS実装• MVCフレームワークの導入– フロントもきちんと構造化して実装• Backbone.js + RequireJS– 利用実績を考慮• Underscore template– JSTにコンパイルして使う
  • 12. バトルの実装• FFのATBを再現するには…– 待機、詠唱、攻撃、などの状態制御• JSでステートマシンを実装– ネイティブアニメ描画とバトルロジックを分離• アニメーションはDeferredチェーン– ネイティブからの描画コールバックを待って次へ• ボス毎にステートマップを作成– 多彩なボスの行動制御
  • 13. FFRKを作ったぞ!よしリリースだ!
  • 14. リリース1ヶ月前の出来事• CBTの結果–重い–熱い• 10fpsを切るもっさりバトル• スクロール出来ないアイテムリスト• 充電しながらプレイしても電池が減る
  • 15. orz
  • 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. FFRK のアーキテクチャの話
  • 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. FFRKの運用周りの小話
  • 33. 高負荷対策• リリース後わりとすぐにTVCM開始– 急増するユーザ(現在:登録者数300万人超)– 荒ぶるWebサーバ• 迅速な負荷対応– シャードDBを追加投入– Webサーバを順次投入– 参照をslaveに逃がせる所は逃がす• サービス停止すること無く乗り切りました
  • 34. マスタ管理• Google Spreadsheet で一括管理• 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. ご静聴ありがとうございました
  • Comments
    Top