Successfully reported this slideshow.

Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた

29

Share

#ue4fest#ue4fest
Nintendo Switch
『OCTOPATH TRAVELER』
はこうして作られた

YouTube videos are no longer supported on SlideShare

View original on YouTube

#ue4fest#ue4fest
ハード:Nintendo Switch
体験版1 2017/09
体験版2 2018/06
製品版 2018/07/13
日/英/伊/仏/独/西の6ヶ国語対応
世界同時発売
使用しているUE4 バージョン 4....

YouTube videos are no longer supported on SlideShare

View original on YouTube

1 of 155
1 of 155

Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた

29

Share

Download to read offline

Description

講演動画:https://www.youtube.com/watch?v=UPzeHX3VaHY

2018年10月14日に行われた「UNREAL FEST EAST 2018」における株式会社アクワイア様の講演で使用されたスライドです。

●公式サイト
https://unrealengine.jp/unrealfest/
===
2018年7月13日に発売されたNintendo Switch用ソフト『OCTOPATH TRAVELER』の開発会社であるアクワイアからアート編、プログラマ編の2つの視点から、UE4による開発事例をご紹介致します。

Transcript

  1. 1. #ue4fest#ue4fest Nintendo Switch 『OCTOPATH TRAVELER』 はこうして作られた
  2. 2. #ue4fest#ue4fest ハード:Nintendo Switch 体験版1 2017/09 体験版2 2018/06 製品版 2018/07/13 日/英/伊/仏/独/西の6ヶ国語対応 世界同時発売 使用しているUE4 バージョン 4.18.1 オクトパストラベラーとは
  3. 3. #ue4fest#ue4fest 【アート編】 Nintendo Switch 『OCTOPATH TRAVELER』 はこうして作られた
  4. 4. #ue4fest#ue4fest 株式会社アクワイア アーティスト / テクニカルアーティスト 飯塚 三華 印刷・Web業界を経て2005年にアクワイア入社。 今作『OCTOPATH TRAVELER』ではリードアーティストとして、 各種アセットの制作からテクニカルな部分まで幅広く担当。 自己紹介 主な開発タイトル 2006『神業』(UI) 2006『忍道 焔』(パッケージイラスト) 2008『侍道3』(キャラクター) 2008『天誅4』(UI) 2008『勇者のくせになまいきだor2』(モーション) 2011『侍道4』(キャラクター・チーフ) 2011『忍道 散華』(エフェクト) 2014『ロード・トゥ・ドラゴン』(テクニカル) 2016『AKIBA'S BEAT』(Live2D) など
  5. 5. #ue4fest#ue4fest 「 H D - 2 D 」 が 出 来 る ま で • HD-2Dとは • HD-2Dが出来るまで U E 4 を 使 っ た 絵 作 り • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 アジェンダ【アート編】
  6. 6. #ue4fest#ue4fest アート編 「 H D - 2 D 」 が 出 来 る ま で
  7. 7. #ue4fest#ue4fest ドット絵の進化系 昔ながらの“ドット絵”に“3DCG”の画面効果を加えた、幻想的な世界 HD-2Dとは
  8. 8. #ue4fest#ue4fest • プロジェクト初期はSwitch発表前 • ミドルウェアも決まっていない HD-2Dが出来るまで Mayaでビジュアルの試作
  9. 9. #ue4fest#ue4fest
  10. 10. #ue4fest#ue4fest この段階から • ドット絵にリッチなマテリアルを適応させよう • 動的でリッチなライティングをしよう • ポストエフェクトでミニチュアっぽい見せ方をしよう という方針
  11. 11. #ue4fest#ue4fest • ミドルウェアがUE4に決定 HD-2Dが出来るまで ビジュアル作りをMayaからUE4へ
  12. 12. #ue4fest#ue4fest
  13. 13. #ue4fest#ue4fest
  14. 14. #ue4fest#ue4fest スケール感が違う
  15. 15. #ue4fest#ue4fest スケールの違和感 1. 広い画角 2. 人物と同じスケールの家 3. 高低差が乏しいレベルデザイン
  16. 16. #ue4fest#ue4fest スケール感の調整は大事。 また、調整には時間がかかった。
  17. 17. #ue4fest#ue4fest プロトタイプの制作へ • 1~2時間遊べる • 2タウン、3フィールド、3ダンジョン HD-2Dが出来るまで
  18. 18. #ue4fest#ue4fest
  19. 19. #ue4fest#ue4fest ドットが見えるような調整 • 海、バトル などのエフェクトもドット • 暗いところもテクスチャが見えるライティング • 被写界深度深め(近くも遠くもくっきりしたドット)
  20. 20. #ue4fest#ue4fest なんか旧世代的
  21. 21. #ue4fest#ue4fest 求められたのは「思い出補正」 された次世代グラフィック
  22. 22. #ue4fest#ue4fest UE4 の力を使うしかない!!
  23. 23. #ue4fest#ue4fest プロトタイプ 製品版
  24. 24. #ue4fest#ue4fest 「HD-2D 」が出来るまで ダンジョン試作 タウン試作 プロトタイプ 製品版 • リッチなライティング、マテリアル、ポストエフェクト • 画面の密度・スケール感 • 思い出を壊さない次世代感のバランス
  25. 25. #ue4fest#ue4fest アート編 U E 4 を 使 っ た 絵 作 り
  26. 26. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  27. 27. #ue4fest#ue4fest • キャラクターはUE4のPaperFlipBookを使用 • 量産にはPhotoshopのパペットワープ機能を使用 • メモリ問題が起きたので、カスタム化 → プログラム編にて • ボーンにスプライトを張る形式のアニメーションも検討した が不採用となった UE4を使った絵作り【 キ ャ ラ ク タ ー 】
  28. 28. #ue4fest#ue4fest キャラクターをパーツ毎に分解 キャラクターモーションの量産 パペットワープであらかじめ 作成したモーションポーズ 差し替え モーションポーズのパーツを 任意のキャラクターに差し替え
  29. 29. #ue4fest#ue4fest キャラクターモーションの量産 ドット崩れは人の手で直した
  30. 30. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  31. 31. #ue4fest#ue4fest • 3Dアセットのマテリアルはほぼ1つのマスターマテリアルか ら作成されている • 機能別にスイッチを切り替えた子マテリアル、実際のパラメ ータやテクスチャを設定した孫マテリアルの構成 https://www.slideshare.net/EpicGamesJapan/byking-ue4dd • マテリアルはほぼアーティストが作成した UE4を使った絵作り【 マ テ リ ア ル 】
  32. 32. #ue4fest#ue4fest • オブジェクトは回転したいが、ドットのテ クスチャは回転したくない • 特に地面は目立つ • WorldPositionOffsetを使ってZ方向からプロ ジェクションで張り付けたようなUVになる ように調整 ワールドUV
  33. 33. #ue4fest#ue4fest ワールドUV
  34. 34. #ue4fest#ue4fest ワールドUV
  35. 35. #ue4fest#ue4fest • キャラクターより手前にあるオブジェクト に対して、ScreenPositionで円形のアルフ ァがかかるようになっている • マップチェンジ付近でズレないように、UV オフセット出来るようなパラメーターを準 備し、PGにコントロールしてもらっている アルファ処理
  36. 36. #ue4fest#ue4fest アルファ処理 PGにコントロールしてもらっているパラメーター カメラがロックされても、キャラクターのオフセットをかけることが出来る
  37. 37. #ue4fest#ue4fest アルファ処理
  38. 38. #ue4fest#ue4fest • オブジェクトの上面(Z+)方向に対して、任 意のテクスチャを適応することが出来る • PixelNormalWSを使用 ベクター処理
  39. 39. #ue4fest#ue4fest ベクター処理
  40. 40. #ue4fest#ue4fest ベクター処理
  41. 41. #ue4fest#ue4fest • 揺れはWorldPositionOffsetで作成 • 頂点カラーで色を付けた部分にのみ揺れが 適応される • 揺れは3種あり、RGBの頂点カラーによっ て使い分けたり、ブレンドしたりしている 揺れもの
  42. 42. #ue4fest#ue4fest • パターンのテクスチャだけだと単調になり がちなオブジェクト(家など)にグラデー ションを適応 • ActorPosition を使い、アクター単位でグラ デーションをかけることができる グラデーション
  43. 43. #ue4fest#ue4fest • マスクテクスチャの部分にエミッシブが掛 けられるようになっている • エミッシブは強さを変えたり、任意の長さ で明滅させることが出来る エミッシブと明滅
  44. 44. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  45. 45. #ue4fest#ue4fest • すべてUE4のPostProcessVolumeにあるものを使用 • 一部ゲーム内のオプションでパラメーターを変えられるよう にしている • マップによって値の調整が入っている項目もある UE4を使った絵作り【 ポ ス ト エ フ ェ ク ト 】
  46. 46. #ue4fest#ue4fest ColorGrading ColorGradingなし ColorGradingあり
  47. 47. #ue4fest#ue4fest Bloom Bloomなし Bloomあり
  48. 48. #ue4fest#ue4fest Depth of Field(Bokeh) ↑玉ボケ 画像はUDKより引用
  49. 49. #ue4fest#ue4fest Lens Flares
  50. 50. #ue4fest#ue4fest Ambient Cubemap AmbientCubemapなし AmbientCubemapあり
  51. 51. #ue4fest#ue4fest Vignette 画面四隅の暗さデフォルト 画面四隅の暗さ少なめ
  52. 52. #ue4fest#ue4fest BaseColorのみ +ライティング +ポストエフェクト ポストエフェクトがヴィジュアルの大きなキー UE4を使った絵作り【 ポ ス ト エ フ ェ ク ト 】
  53. 53. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  54. 54. #ue4fest#ue4fest • 一部の重要なマップはグレーモデルにレタッチしてもらった 物をベースに作成 • 地形の作成には自社開発したマップエディターを使用 • ランドスケープやランドスケープスプライン、Foliageなどの UE4の機能を多く使用している UE4を使った絵作り【 地 形 の 作 成 】
  55. 55. #ue4fest#ue4fest グレーモデルからのレタッチ
  56. 56. #ue4fest#ue4fest グレーモデルからのレタッチ
  57. 57. #ue4fest#ue4fest グレーモデルからのレタッチ
  58. 58. #ue4fest#ue4fest グレーモデル レタッチ 製品版 グレーモデルからのレタッチ
  59. 59. #ue4fest#ue4fest • 1マス100x100の単位でブロックを生成できる • 斜め面の作成、立体交差作成も可能 • マテリアルブレンドを使った道の作成も可能 マップエディター
  60. 60. #ue4fest#ue4fest
  61. 61. #ue4fest#ue4fest 道になる部分はマップエディターで作成 デメリット • 地形がブロック的になりやすい • データが重い • 手間がかかる マップエディター マップエディター素材で作成された モジュラーアセットを配置
  62. 62. #ue4fest#ue4fest ランドスケープによる地形
  63. 63. #ue4fest#ue4fest スプラインによる川
  64. 64. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り【 室 内 表 現 】
  65. 65. #ue4fest#ue4fest
  66. 66. #ue4fest#ue4fest 室内表現 室内はスケール1/2になっている
  67. 67. #ue4fest#ue4fest • 室内と室外はシームレスに切り替えている • ドア部分のトリガーで以下を切り替えている • ライト • ポストエフェクト • 表示非表示オブジェクト • カメラ距離 • キャラクターサイズ 室内表現
  68. 68. #ue4fest#ue4fest
  69. 69. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り【 バ ト ル 演 出 】
  70. 70. #ue4fest#ue4fest
  71. 71. #ue4fest#ue4fest • 通常時は真正面ではなく、少し斜めにしたカメラが常時少し ゆらゆらしている • ブースト+アビリティで、カメラ演出が入る • カメラの場所や回転、スピードはアートで調整できるように なっている バトル演出【カメラ】
  72. 72. #ue4fest#ue4fest • ブーストすると、キャラクター足元のライトが発光 • ライト演出が入る際は、マップに配置されている太陽光源が オフになる→負荷対策でもある • 動的な影の変化を表現するため、バトル専用ポイントライト をレベルに配置 バトル演出【ライト】
  73. 73. #ue4fest#ue4fest • カメラ演出に合わせてDOFも動的に変化している • BREAK時はさらにChromaticAberrationを使っており、 アートでパラメーター調整が可能になっている バトル演出【ポストエフェクト】
  74. 74. #ue4fest#ue4fest
  75. 75. #ue4fest#ue4fest
  76. 76. #ue4fest#ue4fest アジェンダ【アート編】 アート編おしまい 「 H D - 2 D 」 が 出 来 る ま で • HD-2Dとは • HD-2Dが出来るまで U E 4 を 使 っ た 絵 作 り • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出
  77. 77. #ue4fest#ue4fest 【プログラム編】 Nintendo Switch 『OCTOPATH TRAVELER』 はこうして作られた
  78. 78. #ue4fest#ue4fest 主な開発タイトル 2008『勇者のくせになまいきだwww』(全般) 2009『100万トンのバラバラ』 ( AIなど) 2011『侍道4』(夜這い、拷問など) 2011『忍道 散華』(オブジェクトなど) 2012『rain』(リード、キャラなど) 2014『絶対迎撃ウォーズ』 (リード) 2016『ロード・トゥ・ドラゴン』 自己紹介 株式会社アクワイア プログラマ 渡邊 裕 2008年 アクワイア入社。 『侍道4』『rain』『絶対迎撃ウォーズ』などコンシューマを中心に開発に携わる。 『OCTOPATH TRAVELER』ではリードプログラマを担当。
  79. 79. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  80. 80. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  81. 81. #ue4fest#ue4fest プロジェクト的なオーダー
  82. 82. #ue4fest#ue4fest • ゲーム起動後、暗転状態からすぐにローディングアイコンが 出てほしい。(約5秒以内ぐらい) • ローディングアイコンが消えた後、 タイトル画面が出るまではロード待ちしたくない。 • タイトルを抜け、ゲーム開始する際はロード待ちしても良い (長すぎるのはNG) プロジェクト的なオーダー
  83. 83. #ue4fest#ue4fest ロード待ち5秒以内 すぐに入力を受け付ける ゴールイメージ
  84. 84. #ue4fest#ue4fest • 体験版1 2017/09 • 体験版2 2018/06 • 製品版 2018/07/13
  85. 85. #ue4fest#ue4fest 【課題】 ゲーム起動するまでが とにかく遅い
  86. 86. #ue4fest#ue4fest 体験版1 改善前 30秒 5秒 ここの時間を短くしなければならない
  87. 87. #ue4fest#ue4fest • GameModeのBeginPlayが呼ばれるまで30秒近くかかっていた • 起動直後にローディングUIを出したいが、呼び出すことができない 体験版1 改善前
  88. 88. #ue4fest#ue4fest 体験版1 問題点 • GameMode、GameInstance、PlayerControllerからの参照が多い • Assetを直接参照しているものが大量にあった
  89. 89. #ue4fest#ue4fest GameModeのリファレンスビューアー
  90. 90. #ue4fest#ue4fest PlayerControllerのリファレンスビューアー
  91. 91. #ue4fest#ue4fest 参照関係がめちゃくちゃ
  92. 92. #ue4fest#ue4fest 参照を整理する
  93. 93. #ue4fest#ue4fest DataTableにアサインされている アセットをソフト参照に変更して 読み込みフローの整備を行いまし た。 Assetをハード参照からソフト参照へ変更 Assetをハード参照から ソフト参照へ変更
  94. 94. #ue4fest#ue4fest 入力系などの根っこの方は参照が肥大化しがち。 インターフェースを継承したActorComponentをメンバとして保持。 インターフェース関数を呼び出して、実際の実装は継承先で行う。 BPのインターフェース経由でアクセス Interface関数呼び出し Interface継承して実装
  95. 95. #ue4fest#ue4fest C++化する BPを廃止 極力C++からの呼び出しに変更
  96. 96. #ue4fest#ue4fest GameMode GameInstance PlayerController などエンジン起動に 必要なオブジェクトの参照減らす 参照整理後のGameMode
  97. 97. #ue4fest#ue4fest 参照を整理する GameMode、GameInstance、PlayerController などエンジン起動に必要なオブジェクトの参照を外す。 Assetをハード参照からソフト参照へ変更 Interfaceを一枚噛ませて、実装はInterface継承先に記述 ブループリントのC++化
  98. 98. #ue4fest#ue4fest 体験版1 起動ロード改善後 3秒 20秒
  99. 99. #ue4fest#ue4fest 体験版1 起動ロード改善後 3秒 20秒 30秒 5秒改善前 改善後
  100. 100. #ue4fest#ue4fest 体験版2と製品版では Persistentレベル ResidentBaseレベル GameMode,GameInstance, PlayerController +ローディングUIのみ作成 タイトル画面起動に必要な 最低限の管理クラス生成 テキスト、UI管理など ResidentGameレベル ロゴシーケンス その他のクラス生成 Titleレベル ロゴシーケンス その他タイトル画面処理 ゲーム開始前にResidentGameで走らせた常 駐物のロード待ち のManager生成
  101. 101. #ue4fest#ue4fest 最終的なロード時間 10秒 5秒 タイトル画面起動に必要な最低限の 管理クラス生成(テキスト、UI管理など) その他の管理クラス生成。初期化 終了待ち
  102. 102. #ue4fest#ue4fest なんとかなった!
  103. 103. #ue4fest#ue4fest • 初期段階からの設計が重要 • いつ、どこで、どのクラスが必要なのかを明確化 • 何でもかんでも参照をしないようにする • 定期的にReferenceViewerで確認 ロード時間についてまとめると
  104. 104. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  105. 105. #ue4fest#ue4fest オクトパストラベラーではPaperFlipbookで キャラを表示している Flipbookの最適化について
  106. 106. #ue4fest#ue4fest UPaperFlipbook ・フリップブックアニメーション1つ分の情報。 ・ キーフレームレーム配列 FPaperFlipbookKeyFrame アニメーションのキーフレーム1つ分の情報。 UPaperSpriteのポインタと表示フレーム数を持つ。 PaperFlipbook
  107. 107. #ue4fest#ue4fest UPaperSprite ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 (AlternateMaterialSplitIndex, BakedRenderData) (頂点6つ分) FSpriteDrawCallRecord UPaperSpriteから BakedRenderData を貰って描画に渡している。 PaperFlipbook
  108. 108. #ue4fest#ue4fest 1キャラの1ジョブ分のSpriteデータ
  109. 109. #ue4fest#ue4fest FPaperFlipbookKeyFrame UPaperSprite UPaperFlipbook FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 問題点
  110. 110. #ue4fest#ue4fest FPaperFlipbookKeyFrame UPaperSprite UPaperFlipbook FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 問題点 PaperSpriteが大量にロードされ メモリがかなり断片化していた
  111. 111. #ue4fest#ue4fest 【課題】 Spriteのロードに手を入れ メモリの断片化を防ぐ
  112. 112. #ue4fest#ue4fest キャラごとのFlipbookデータ配列 キャラに必要なFlipbookをテーブル化
  113. 113. #ue4fest#ue4fest Flipbookに含まれる再生レート(fps) キーフレーム毎のフレーム数 スプライトラベル名の配列をまとめたものを あらかじめデータテーブルとして出力しておく Flipbook内のデータをテーブル化
  114. 114. #ue4fest#ue4fest PaperSpriteのアセット名をキー値 各種テクスチャ スプライト描画用の頂点情報まとめたテーブル スプライトのデータテーブル
  115. 115. #ue4fest#ue4fest キーフレーム分作成 Ucustom PaperSprite UCustom PaperFlipbook 改善後 Ucustom PaperSprite Ucustom PaperSprite テクスチャ キーフレーム情報 データテーブル
  116. 116. #ue4fest#ue4fest 断片化対策前 断片化対策後
  117. 117. #ue4fest#ue4fest • Flipbookをロードすることで引っ張られるSpriteを自前管理 ⇒ 断片化の防止のため • キーフレームやSprite情報など、アニメーションに必要なもの をテーブル化しておく。 • 描画の部分は元のFlipbookに任せる Flipbook まとめ
  118. 118. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  119. 119. #ue4fest#ue4fest 長時間プレイしているとメモリがどんどん増えていく・・・
  120. 120. #ue4fest#ue4fest 調査
  121. 121. #ue4fest#ue4fest Obj List
  122. 122. #ue4fest#ue4fest UMGのアニメーションをさせるたびにメモリが増えているのが分かった Class Count NumKB MaxKB アニメーション前 UMGSequencePlayer 61 115.33 115.33 アニメーション後 UMGSequencePlayer 81 153.14 53.14
  123. 123. #ue4fest#ue4fest Obj List Class=UMGSequencePlayer 指定したクラスのみのオブジェクトリストが コンソールに出力される
  124. 124. #ue4fest#ue4fest なぜオブジェクトが解放されない? UUserWidgetがアニメーション再生タイミングでUMGSequencePlayerを NewObjectしたあとにAddしているが、再生終了時にはRemoveしているだ けだった GabergeCollection呼ばないといけない
  125. 125. #ue4fest#ue4fest ・自動で定期的にGCを呼び出してもらう ・自前で呼び出す UE4でのGCの呼び出し
  126. 126. #ue4fest#ue4fest • タイトル画面通過後、ゲームにおけるアセットはほぼ常駐になってい るため、読み捨てを行うことがあまりなかった。 • GCを呼び出す際、ヒッチがひどかったので、 体験版1ではマップチェンジの際やバトル終了後など ゲームのシーケンス内で自前でGCを呼び出していた。 オクトパス体験版1では
  127. 127. #ue4fest#ue4fest マップチェンジ時 バトル終了時 オクトパス体験版1では 暗転中、カクツキが気にならないタイミングでGC
  128. 128. #ue4fest#ue4fest • 長時間プレイしているとメモリが足りない • UMGのアニメーション再生しているだけでメモリが増えている • やはりGCを定期的に呼ばなければならない • GCを呼ぶにはヒッチをなんとかしなければならない ここまでの話
  129. 129. #ue4fest#ue4fest GCのヒッチ対策
  130. 130. #ue4fest#ue4fest https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  131. 131. #ue4fest#ue4fest UE4のGCはUobjectを一次元配列で管理している GCについて GCの際、この一次元配列からオブジェクトを検索し、不要になったものを削除 GCのコスト = 検索コスト + 削除コスト UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  132. 132. #ue4fest#ue4fest 削除コスト = 依存関係の切断 + 実際のオブジェクトの削除 GCについて 削除コストについて フレーム分散可能 UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  133. 133. #ue4fest#ue4fest GCのコストを調べる
  134. 134. #ue4fest#ue4fest ヒッチ時のCPU負荷がログとして出力される t.HitchThreshold 0.075 と指定することで閾値を変更することができる stat dumphitches LogStats: ------------------Thread Hitch 1, Frame 6209 97.0ms --------------- LogStats: ------------------ Game Thread 95.52ms LogStats: 95.517ms ( 4) - Thread_1db0_0 - GameThread - STATGROUP_Threads - STATCAT_Advanced LogStats: 95.497ms ( 2) - FrameTime - STAT_FrameTime - STATGROUP_Engine - STATCAT_Advanced LogStats: 85.568ms ( 1) - Pump Messages - STAT_PumpMessages - STATGROUP_Threading - LogStats: 85.090ms ( 1) - ProcessKeyUp - STAT_ProcessKeyUp - STATGROUP_Slate - LogStats: 77.635ms ( 1) - CollectGarbageInternal - STAT_CollectGarbageInternal -
  135. 135. #ue4fest#ue4fest GCの時に以下ログが出る log LogGarbage log LogGarbage: Collecting garbage LogGarbage: 71.938257 ms for GC LogGarbage: 1.394206 ms for unhashing unreachable objects. Clusters removed: 0. Items 0 Cluster Items 0 LogGarbage: GC purged 0 objects (432826 -> 432826) 検索コスト 削除コスト GCで削除後のオブジェクト数
  136. 136. #ue4fest#ue4fest コマンドでもGCが呼べます
  137. 137. #ue4fest#ue4fest デバッグメニュー LogGarbage: 237.232555 ms for GC LogGarbage: 6.752085 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (518055 -> 518004) デバッグメニュー 有 LogGarbage: 159.892604 ms for GC LogGarbage: 5.186930 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349664 -> 349613) デバッグメニュー 無 検索コスト 約78ms オブジェクト数 17万 削減
  138. 138. #ue4fest#ue4fest Testビルド LogGarbage: 97.840209 ms for GC LogGarbage: 2.903227 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349571 -> 349520) Developmentビルド LogGarbage: 159.892604 ms for GC LogGarbage: 5.186930 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349664 -> 349613) Testビルド 検索コスト 約62ms 削減
  139. 139. #ue4fest#ue4fest さらに検索コストを減らす
  140. 140. #ue4fest#ue4fest UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  141. 141. #ue4fest#ue4fest UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  142. 142. #ue4fest#ue4fest UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  143. 143. #ue4fest#ue4fest DisregardGCObjectで計測 LogUObjectArray: 35412 objects as part of root set at end of initial load. LogUObjectAllocator: 5887376 out of 0 bytes used by permanent object pool. [/Script/Engine.GarbageCollectionSettings] gc.MaxObjectsNotConsideredByGC=1
  144. 144. #ue4fest#ue4fest DisregardGCObjectで計測 LogGarbage: 97.840209 ms for GC LogGarbage: 2.903227 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349571 -> 349520) DisregardGCObject なし DisregardGCObject あり LogGarbage: 79.324480 ms for GC LogGarbage: 2.894010 ms for unhashing unreachable objects. Clusters removed: 1. Items 21 Cluster Items 30 LogGarbage: GC purged 51 objects (314159 -> 314108) 検索コスト 約18ms オブジェクト数 3万5000 削減
  145. 145. #ue4fest#ue4fest Clustering • Actor Clustering • BluepringClustering
  146. 146. #ue4fest#ue4fest Clustering 結果 LogGarbage: 78.352761 ms for GC LogGarbage: 2.659634 ms for unhashing unreachable objects. Clusters removed: 1. Items 21 Cluster Items 30 LogGarbage: GC purged 51 objects (314160 -> 314109) ActorClustering LogGarbage: 35.832137 ms for GC LogGarbage: 2.722394 ms for unhashing unreachable objects. Clusters removed: 1. Items 21 Cluster Items 30 LogGarbage: GC purged 51 objects (314160 -> 314109) BPCluster 検索コスト 約44ms 削減
  147. 147. #ue4fest#ue4fest 対応前と対応後 検索 コスト (ms) 削除 コスト(ms) オブジェクト数 対応前 237.232555 6.752085 518004 対応後 36.404271 3.052086 326776 検索コスト 約200 ms オブジェクト数 19万 削減
  148. 148. #ue4fest#ue4fest 結局ヒッチが30数ミリと完全に抑えることができなかった。 UI操作中、バトル中、イベント中などはほぼ気にならなくなっ たがカメラが動くフィールド中は少し気になるレベル。 オクトパスでは
  149. 149. #ue4fest#ue4fest 自前でタイマー更新を行うようにした オクトパスでは 動的生成 オブジェクト数 カクつき GC間隔 タイトル画面 普通 少なめ 気にならない 5分 フィールド時 少なめ 普通 気になる 10分 メインメニュー 多め 多め 気にならない 1分 バトル 普通 普通 気にならない 3分
  150. 150. #ue4fest#ue4fest • Uproperty削減 • Obj listでボトルネックを探す • Blueprint Stats Plugin で探す オブジェクトの数は少ない方が良い
  151. 151. #ue4fest#ue4fest https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  152. 152. #ue4fest#ue4fest 設計、検証はプロジェクト初期から行っていく必要がある パフォーマンス、メモリなどの計測は定期的に行う UE4はデバッグ機能、ツールが豊富なので活用する まとめ
  153. 153. #ue4fest#ue4fest ご清聴ありがとうございました

Description

講演動画:https://www.youtube.com/watch?v=UPzeHX3VaHY

2018年10月14日に行われた「UNREAL FEST EAST 2018」における株式会社アクワイア様の講演で使用されたスライドです。

●公式サイト
https://unrealengine.jp/unrealfest/
===
2018年7月13日に発売されたNintendo Switch用ソフト『OCTOPATH TRAVELER』の開発会社であるアクワイアからアート編、プログラマ編の2つの視点から、UE4による開発事例をご紹介致します。

Transcript

  1. 1. #ue4fest#ue4fest Nintendo Switch 『OCTOPATH TRAVELER』 はこうして作られた
  2. 2. #ue4fest#ue4fest ハード:Nintendo Switch 体験版1 2017/09 体験版2 2018/06 製品版 2018/07/13 日/英/伊/仏/独/西の6ヶ国語対応 世界同時発売 使用しているUE4 バージョン 4.18.1 オクトパストラベラーとは
  3. 3. #ue4fest#ue4fest 【アート編】 Nintendo Switch 『OCTOPATH TRAVELER』 はこうして作られた
  4. 4. #ue4fest#ue4fest 株式会社アクワイア アーティスト / テクニカルアーティスト 飯塚 三華 印刷・Web業界を経て2005年にアクワイア入社。 今作『OCTOPATH TRAVELER』ではリードアーティストとして、 各種アセットの制作からテクニカルな部分まで幅広く担当。 自己紹介 主な開発タイトル 2006『神業』(UI) 2006『忍道 焔』(パッケージイラスト) 2008『侍道3』(キャラクター) 2008『天誅4』(UI) 2008『勇者のくせになまいきだor2』(モーション) 2011『侍道4』(キャラクター・チーフ) 2011『忍道 散華』(エフェクト) 2014『ロード・トゥ・ドラゴン』(テクニカル) 2016『AKIBA'S BEAT』(Live2D) など
  5. 5. #ue4fest#ue4fest 「 H D - 2 D 」 が 出 来 る ま で • HD-2Dとは • HD-2Dが出来るまで U E 4 を 使 っ た 絵 作 り • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 アジェンダ【アート編】
  6. 6. #ue4fest#ue4fest アート編 「 H D - 2 D 」 が 出 来 る ま で
  7. 7. #ue4fest#ue4fest ドット絵の進化系 昔ながらの“ドット絵”に“3DCG”の画面効果を加えた、幻想的な世界 HD-2Dとは
  8. 8. #ue4fest#ue4fest • プロジェクト初期はSwitch発表前 • ミドルウェアも決まっていない HD-2Dが出来るまで Mayaでビジュアルの試作
  9. 9. #ue4fest#ue4fest
  10. 10. #ue4fest#ue4fest この段階から • ドット絵にリッチなマテリアルを適応させよう • 動的でリッチなライティングをしよう • ポストエフェクトでミニチュアっぽい見せ方をしよう という方針
  11. 11. #ue4fest#ue4fest • ミドルウェアがUE4に決定 HD-2Dが出来るまで ビジュアル作りをMayaからUE4へ
  12. 12. #ue4fest#ue4fest
  13. 13. #ue4fest#ue4fest
  14. 14. #ue4fest#ue4fest スケール感が違う
  15. 15. #ue4fest#ue4fest スケールの違和感 1. 広い画角 2. 人物と同じスケールの家 3. 高低差が乏しいレベルデザイン
  16. 16. #ue4fest#ue4fest スケール感の調整は大事。 また、調整には時間がかかった。
  17. 17. #ue4fest#ue4fest プロトタイプの制作へ • 1~2時間遊べる • 2タウン、3フィールド、3ダンジョン HD-2Dが出来るまで
  18. 18. #ue4fest#ue4fest
  19. 19. #ue4fest#ue4fest ドットが見えるような調整 • 海、バトル などのエフェクトもドット • 暗いところもテクスチャが見えるライティング • 被写界深度深め(近くも遠くもくっきりしたドット)
  20. 20. #ue4fest#ue4fest なんか旧世代的
  21. 21. #ue4fest#ue4fest 求められたのは「思い出補正」 された次世代グラフィック
  22. 22. #ue4fest#ue4fest UE4 の力を使うしかない!!
  23. 23. #ue4fest#ue4fest プロトタイプ 製品版
  24. 24. #ue4fest#ue4fest 「HD-2D 」が出来るまで ダンジョン試作 タウン試作 プロトタイプ 製品版 • リッチなライティング、マテリアル、ポストエフェクト • 画面の密度・スケール感 • 思い出を壊さない次世代感のバランス
  25. 25. #ue4fest#ue4fest アート編 U E 4 を 使 っ た 絵 作 り
  26. 26. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  27. 27. #ue4fest#ue4fest • キャラクターはUE4のPaperFlipBookを使用 • 量産にはPhotoshopのパペットワープ機能を使用 • メモリ問題が起きたので、カスタム化 → プログラム編にて • ボーンにスプライトを張る形式のアニメーションも検討した が不採用となった UE4を使った絵作り【 キ ャ ラ ク タ ー 】
  28. 28. #ue4fest#ue4fest キャラクターをパーツ毎に分解 キャラクターモーションの量産 パペットワープであらかじめ 作成したモーションポーズ 差し替え モーションポーズのパーツを 任意のキャラクターに差し替え
  29. 29. #ue4fest#ue4fest キャラクターモーションの量産 ドット崩れは人の手で直した
  30. 30. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  31. 31. #ue4fest#ue4fest • 3Dアセットのマテリアルはほぼ1つのマスターマテリアルか ら作成されている • 機能別にスイッチを切り替えた子マテリアル、実際のパラメ ータやテクスチャを設定した孫マテリアルの構成 https://www.slideshare.net/EpicGamesJapan/byking-ue4dd • マテリアルはほぼアーティストが作成した UE4を使った絵作り【 マ テ リ ア ル 】
  32. 32. #ue4fest#ue4fest • オブジェクトは回転したいが、ドットのテ クスチャは回転したくない • 特に地面は目立つ • WorldPositionOffsetを使ってZ方向からプロ ジェクションで張り付けたようなUVになる ように調整 ワールドUV
  33. 33. #ue4fest#ue4fest ワールドUV
  34. 34. #ue4fest#ue4fest ワールドUV
  35. 35. #ue4fest#ue4fest • キャラクターより手前にあるオブジェクト に対して、ScreenPositionで円形のアルフ ァがかかるようになっている • マップチェンジ付近でズレないように、UV オフセット出来るようなパラメーターを準 備し、PGにコントロールしてもらっている アルファ処理
  36. 36. #ue4fest#ue4fest アルファ処理 PGにコントロールしてもらっているパラメーター カメラがロックされても、キャラクターのオフセットをかけることが出来る
  37. 37. #ue4fest#ue4fest アルファ処理
  38. 38. #ue4fest#ue4fest • オブジェクトの上面(Z+)方向に対して、任 意のテクスチャを適応することが出来る • PixelNormalWSを使用 ベクター処理
  39. 39. #ue4fest#ue4fest ベクター処理
  40. 40. #ue4fest#ue4fest ベクター処理
  41. 41. #ue4fest#ue4fest • 揺れはWorldPositionOffsetで作成 • 頂点カラーで色を付けた部分にのみ揺れが 適応される • 揺れは3種あり、RGBの頂点カラーによっ て使い分けたり、ブレンドしたりしている 揺れもの
  42. 42. #ue4fest#ue4fest • パターンのテクスチャだけだと単調になり がちなオブジェクト(家など)にグラデー ションを適応 • ActorPosition を使い、アクター単位でグラ デーションをかけることができる グラデーション
  43. 43. #ue4fest#ue4fest • マスクテクスチャの部分にエミッシブが掛 けられるようになっている • エミッシブは強さを変えたり、任意の長さ で明滅させることが出来る エミッシブと明滅
  44. 44. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  45. 45. #ue4fest#ue4fest • すべてUE4のPostProcessVolumeにあるものを使用 • 一部ゲーム内のオプションでパラメーターを変えられるよう にしている • マップによって値の調整が入っている項目もある UE4を使った絵作り【 ポ ス ト エ フ ェ ク ト 】
  46. 46. #ue4fest#ue4fest ColorGrading ColorGradingなし ColorGradingあり
  47. 47. #ue4fest#ue4fest Bloom Bloomなし Bloomあり
  48. 48. #ue4fest#ue4fest Depth of Field(Bokeh) ↑玉ボケ 画像はUDKより引用
  49. 49. #ue4fest#ue4fest Lens Flares
  50. 50. #ue4fest#ue4fest Ambient Cubemap AmbientCubemapなし AmbientCubemapあり
  51. 51. #ue4fest#ue4fest Vignette 画面四隅の暗さデフォルト 画面四隅の暗さ少なめ
  52. 52. #ue4fest#ue4fest BaseColorのみ +ライティング +ポストエフェクト ポストエフェクトがヴィジュアルの大きなキー UE4を使った絵作り【 ポ ス ト エ フ ェ ク ト 】
  53. 53. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
  54. 54. #ue4fest#ue4fest • 一部の重要なマップはグレーモデルにレタッチしてもらった 物をベースに作成 • 地形の作成には自社開発したマップエディターを使用 • ランドスケープやランドスケープスプライン、Foliageなどの UE4の機能を多く使用している UE4を使った絵作り【 地 形 の 作 成 】
  55. 55. #ue4fest#ue4fest グレーモデルからのレタッチ
  56. 56. #ue4fest#ue4fest グレーモデルからのレタッチ
  57. 57. #ue4fest#ue4fest グレーモデルからのレタッチ
  58. 58. #ue4fest#ue4fest グレーモデル レタッチ 製品版 グレーモデルからのレタッチ
  59. 59. #ue4fest#ue4fest • 1マス100x100の単位でブロックを生成できる • 斜め面の作成、立体交差作成も可能 • マテリアルブレンドを使った道の作成も可能 マップエディター
  60. 60. #ue4fest#ue4fest
  61. 61. #ue4fest#ue4fest 道になる部分はマップエディターで作成 デメリット • 地形がブロック的になりやすい • データが重い • 手間がかかる マップエディター マップエディター素材で作成された モジュラーアセットを配置
  62. 62. #ue4fest#ue4fest ランドスケープによる地形
  63. 63. #ue4fest#ue4fest スプラインによる川
  64. 64. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り【 室 内 表 現 】
  65. 65. #ue4fest#ue4fest
  66. 66. #ue4fest#ue4fest 室内表現 室内はスケール1/2になっている
  67. 67. #ue4fest#ue4fest • 室内と室外はシームレスに切り替えている • ドア部分のトリガーで以下を切り替えている • ライト • ポストエフェクト • 表示非表示オブジェクト • カメラ距離 • キャラクターサイズ 室内表現
  68. 68. #ue4fest#ue4fest
  69. 69. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り【 バ ト ル 演 出 】
  70. 70. #ue4fest#ue4fest
  71. 71. #ue4fest#ue4fest • 通常時は真正面ではなく、少し斜めにしたカメラが常時少し ゆらゆらしている • ブースト+アビリティで、カメラ演出が入る • カメラの場所や回転、スピードはアートで調整できるように なっている バトル演出【カメラ】
  72. 72. #ue4fest#ue4fest • ブーストすると、キャラクター足元のライトが発光 • ライト演出が入る際は、マップに配置されている太陽光源が オフになる→負荷対策でもある • 動的な影の変化を表現するため、バトル専用ポイントライト をレベルに配置 バトル演出【ライト】
  73. 73. #ue4fest#ue4fest • カメラ演出に合わせてDOFも動的に変化している • BREAK時はさらにChromaticAberrationを使っており、 アートでパラメーター調整が可能になっている バトル演出【ポストエフェクト】
  74. 74. #ue4fest#ue4fest
  75. 75. #ue4fest#ue4fest
  76. 76. #ue4fest#ue4fest アジェンダ【アート編】 アート編おしまい 「 H D - 2 D 」 が 出 来 る ま で • HD-2Dとは • HD-2Dが出来るまで U E 4 を 使 っ た 絵 作 り • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出
  77. 77. #ue4fest#ue4fest 【プログラム編】 Nintendo Switch 『OCTOPATH TRAVELER』 はこうして作られた
  78. 78. #ue4fest#ue4fest 主な開発タイトル 2008『勇者のくせになまいきだwww』(全般) 2009『100万トンのバラバラ』 ( AIなど) 2011『侍道4』(夜這い、拷問など) 2011『忍道 散華』(オブジェクトなど) 2012『rain』(リード、キャラなど) 2014『絶対迎撃ウォーズ』 (リード) 2016『ロード・トゥ・ドラゴン』 自己紹介 株式会社アクワイア プログラマ 渡邊 裕 2008年 アクワイア入社。 『侍道4』『rain』『絶対迎撃ウォーズ』などコンシューマを中心に開発に携わる。 『OCTOPATH TRAVELER』ではリードプログラマを担当。
  79. 79. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  80. 80. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  81. 81. #ue4fest#ue4fest プロジェクト的なオーダー
  82. 82. #ue4fest#ue4fest • ゲーム起動後、暗転状態からすぐにローディングアイコンが 出てほしい。(約5秒以内ぐらい) • ローディングアイコンが消えた後、 タイトル画面が出るまではロード待ちしたくない。 • タイトルを抜け、ゲーム開始する際はロード待ちしても良い (長すぎるのはNG) プロジェクト的なオーダー
  83. 83. #ue4fest#ue4fest ロード待ち5秒以内 すぐに入力を受け付ける ゴールイメージ
  84. 84. #ue4fest#ue4fest • 体験版1 2017/09 • 体験版2 2018/06 • 製品版 2018/07/13
  85. 85. #ue4fest#ue4fest 【課題】 ゲーム起動するまでが とにかく遅い
  86. 86. #ue4fest#ue4fest 体験版1 改善前 30秒 5秒 ここの時間を短くしなければならない
  87. 87. #ue4fest#ue4fest • GameModeのBeginPlayが呼ばれるまで30秒近くかかっていた • 起動直後にローディングUIを出したいが、呼び出すことができない 体験版1 改善前
  88. 88. #ue4fest#ue4fest 体験版1 問題点 • GameMode、GameInstance、PlayerControllerからの参照が多い • Assetを直接参照しているものが大量にあった
  89. 89. #ue4fest#ue4fest GameModeのリファレンスビューアー
  90. 90. #ue4fest#ue4fest PlayerControllerのリファレンスビューアー
  91. 91. #ue4fest#ue4fest 参照関係がめちゃくちゃ
  92. 92. #ue4fest#ue4fest 参照を整理する
  93. 93. #ue4fest#ue4fest DataTableにアサインされている アセットをソフト参照に変更して 読み込みフローの整備を行いまし た。 Assetをハード参照からソフト参照へ変更 Assetをハード参照から ソフト参照へ変更
  94. 94. #ue4fest#ue4fest 入力系などの根っこの方は参照が肥大化しがち。 インターフェースを継承したActorComponentをメンバとして保持。 インターフェース関数を呼び出して、実際の実装は継承先で行う。 BPのインターフェース経由でアクセス Interface関数呼び出し Interface継承して実装
  95. 95. #ue4fest#ue4fest C++化する BPを廃止 極力C++からの呼び出しに変更
  96. 96. #ue4fest#ue4fest GameMode GameInstance PlayerController などエンジン起動に 必要なオブジェクトの参照減らす 参照整理後のGameMode
  97. 97. #ue4fest#ue4fest 参照を整理する GameMode、GameInstance、PlayerController などエンジン起動に必要なオブジェクトの参照を外す。 Assetをハード参照からソフト参照へ変更 Interfaceを一枚噛ませて、実装はInterface継承先に記述 ブループリントのC++化
  98. 98. #ue4fest#ue4fest 体験版1 起動ロード改善後 3秒 20秒
  99. 99. #ue4fest#ue4fest 体験版1 起動ロード改善後 3秒 20秒 30秒 5秒改善前 改善後
  100. 100. #ue4fest#ue4fest 体験版2と製品版では Persistentレベル ResidentBaseレベル GameMode,GameInstance, PlayerController +ローディングUIのみ作成 タイトル画面起動に必要な 最低限の管理クラス生成 テキスト、UI管理など ResidentGameレベル ロゴシーケンス その他のクラス生成 Titleレベル ロゴシーケンス その他タイトル画面処理 ゲーム開始前にResidentGameで走らせた常 駐物のロード待ち のManager生成
  101. 101. #ue4fest#ue4fest 最終的なロード時間 10秒 5秒 タイトル画面起動に必要な最低限の 管理クラス生成(テキスト、UI管理など) その他の管理クラス生成。初期化 終了待ち
  102. 102. #ue4fest#ue4fest なんとかなった!
  103. 103. #ue4fest#ue4fest • 初期段階からの設計が重要 • いつ、どこで、どのクラスが必要なのかを明確化 • 何でもかんでも参照をしないようにする • 定期的にReferenceViewerで確認 ロード時間についてまとめると
  104. 104. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  105. 105. #ue4fest#ue4fest オクトパストラベラーではPaperFlipbookで キャラを表示している Flipbookの最適化について
  106. 106. #ue4fest#ue4fest UPaperFlipbook ・フリップブックアニメーション1つ分の情報。 ・ キーフレームレーム配列 FPaperFlipbookKeyFrame アニメーションのキーフレーム1つ分の情報。 UPaperSpriteのポインタと表示フレーム数を持つ。 PaperFlipbook
  107. 107. #ue4fest#ue4fest UPaperSprite ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 (AlternateMaterialSplitIndex, BakedRenderData) (頂点6つ分) FSpriteDrawCallRecord UPaperSpriteから BakedRenderData を貰って描画に渡している。 PaperFlipbook
  108. 108. #ue4fest#ue4fest 1キャラの1ジョブ分のSpriteデータ
  109. 109. #ue4fest#ue4fest FPaperFlipbookKeyFrame UPaperSprite UPaperFlipbook FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 問題点
  110. 110. #ue4fest#ue4fest FPaperFlipbookKeyFrame UPaperSprite UPaperFlipbook FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame FPaperFlipbookKeyFrame ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 問題点 PaperSpriteが大量にロードされ メモリがかなり断片化していた
  111. 111. #ue4fest#ue4fest 【課題】 Spriteのロードに手を入れ メモリの断片化を防ぐ
  112. 112. #ue4fest#ue4fest キャラごとのFlipbookデータ配列 キャラに必要なFlipbookをテーブル化
  113. 113. #ue4fest#ue4fest Flipbookに含まれる再生レート(fps) キーフレーム毎のフレーム数 スプライトラベル名の配列をまとめたものを あらかじめデータテーブルとして出力しておく Flipbook内のデータをテーブル化
  114. 114. #ue4fest#ue4fest PaperSpriteのアセット名をキー値 各種テクスチャ スプライト描画用の頂点情報まとめたテーブル スプライトのデータテーブル
  115. 115. #ue4fest#ue4fest キーフレーム分作成 Ucustom PaperSprite UCustom PaperFlipbook 改善後 Ucustom PaperSprite Ucustom PaperSprite テクスチャ キーフレーム情報 データテーブル
  116. 116. #ue4fest#ue4fest 断片化対策前 断片化対策後
  117. 117. #ue4fest#ue4fest • Flipbookをロードすることで引っ張られるSpriteを自前管理 ⇒ 断片化の防止のため • キーフレームやSprite情報など、アニメーションに必要なもの をテーブル化しておく。 • 描画の部分は元のFlipbookに任せる Flipbook まとめ
  118. 118. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
  119. 119. #ue4fest#ue4fest 長時間プレイしているとメモリがどんどん増えていく・・・
  120. 120. #ue4fest#ue4fest 調査
  121. 121. #ue4fest#ue4fest Obj List
  122. 122. #ue4fest#ue4fest UMGのアニメーションをさせるたびにメモリが増えているのが分かった Class Count NumKB MaxKB アニメーション前 UMGSequencePlayer 61 115.33 115.33 アニメーション後 UMGSequencePlayer 81 153.14 53.14
  123. 123. #ue4fest#ue4fest Obj List Class=UMGSequencePlayer 指定したクラスのみのオブジェクトリストが コンソールに出力される
  124. 124. #ue4fest#ue4fest なぜオブジェクトが解放されない? UUserWidgetがアニメーション再生タイミングでUMGSequencePlayerを NewObjectしたあとにAddしているが、再生終了時にはRemoveしているだ けだった GabergeCollection呼ばないといけない
  125. 125. #ue4fest#ue4fest ・自動で定期的にGCを呼び出してもらう ・自前で呼び出す UE4でのGCの呼び出し
  126. 126. #ue4fest#ue4fest • タイトル画面通過後、ゲームにおけるアセットはほぼ常駐になってい るため、読み捨てを行うことがあまりなかった。 • GCを呼び出す際、ヒッチがひどかったので、 体験版1ではマップチェンジの際やバトル終了後など ゲームのシーケンス内で自前でGCを呼び出していた。 オクトパス体験版1では
  127. 127. #ue4fest#ue4fest マップチェンジ時 バトル終了時 オクトパス体験版1では 暗転中、カクツキが気にならないタイミングでGC
  128. 128. #ue4fest#ue4fest • 長時間プレイしているとメモリが足りない • UMGのアニメーション再生しているだけでメモリが増えている • やはりGCを定期的に呼ばなければならない • GCを呼ぶにはヒッチをなんとかしなければならない ここまでの話
  129. 129. #ue4fest#ue4fest GCのヒッチ対策
  130. 130. #ue4fest#ue4fest https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  131. 131. #ue4fest#ue4fest UE4のGCはUobjectを一次元配列で管理している GCについて GCの際、この一次元配列からオブジェクトを検索し、不要になったものを削除 GCのコスト = 検索コスト + 削除コスト UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  132. 132. #ue4fest#ue4fest 削除コスト = 依存関係の切断 + 実際のオブジェクトの削除 GCについて 削除コストについて フレーム分散可能 UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  133. 133. #ue4fest#ue4fest GCのコストを調べる
  134. 134. #ue4fest#ue4fest ヒッチ時のCPU負荷がログとして出力される t.HitchThreshold 0.075 と指定することで閾値を変更することができる stat dumphitches LogStats: ------------------Thread Hitch 1, Frame 6209 97.0ms --------------- LogStats: ------------------ Game Thread 95.52ms LogStats: 95.517ms ( 4) - Thread_1db0_0 - GameThread - STATGROUP_Threads - STATCAT_Advanced LogStats: 95.497ms ( 2) - FrameTime - STAT_FrameTime - STATGROUP_Engine - STATCAT_Advanced LogStats: 85.568ms ( 1) - Pump Messages - STAT_PumpMessages - STATGROUP_Threading - LogStats: 85.090ms ( 1) - ProcessKeyUp - STAT_ProcessKeyUp - STATGROUP_Slate - LogStats: 77.635ms ( 1) - CollectGarbageInternal - STAT_CollectGarbageInternal -
  135. 135. #ue4fest#ue4fest GCの時に以下ログが出る log LogGarbage log LogGarbage: Collecting garbage LogGarbage: 71.938257 ms for GC LogGarbage: 1.394206 ms for unhashing unreachable objects. Clusters removed: 0. Items 0 Cluster Items 0 LogGarbage: GC purged 0 objects (432826 -> 432826) 検索コスト 削除コスト GCで削除後のオブジェクト数
  136. 136. #ue4fest#ue4fest コマンドでもGCが呼べます
  137. 137. #ue4fest#ue4fest デバッグメニュー LogGarbage: 237.232555 ms for GC LogGarbage: 6.752085 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (518055 -> 518004) デバッグメニュー 有 LogGarbage: 159.892604 ms for GC LogGarbage: 5.186930 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349664 -> 349613) デバッグメニュー 無 検索コスト 約78ms オブジェクト数 17万 削減
  138. 138. #ue4fest#ue4fest Testビルド LogGarbage: 97.840209 ms for GC LogGarbage: 2.903227 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349571 -> 349520) Developmentビルド LogGarbage: 159.892604 ms for GC LogGarbage: 5.186930 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349664 -> 349613) Testビルド 検索コスト 約62ms 削減
  139. 139. #ue4fest#ue4fest さらに検索コストを減らす
  140. 140. #ue4fest#ue4fest UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  141. 141. #ue4fest#ue4fest UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  142. 142. #ue4fest#ue4fest UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  143. 143. #ue4fest#ue4fest DisregardGCObjectで計測 LogUObjectArray: 35412 objects as part of root set at end of initial load. LogUObjectAllocator: 5887376 out of 0 bytes used by permanent object pool. [/Script/Engine.GarbageCollectionSettings] gc.MaxObjectsNotConsideredByGC=1
  144. 144. #ue4fest#ue4fest DisregardGCObjectで計測 LogGarbage: 97.840209 ms for GC LogGarbage: 2.903227 ms for unhashing unreachable objects. Clusters removed: 0. Items 51 Cluster Items 0 LogGarbage: GC purged 51 objects (349571 -> 349520) DisregardGCObject なし DisregardGCObject あり LogGarbage: 79.324480 ms for GC LogGarbage: 2.894010 ms for unhashing unreachable objects. Clusters removed: 1. Items 21 Cluster Items 30 LogGarbage: GC purged 51 objects (314159 -> 314108) 検索コスト 約18ms オブジェクト数 3万5000 削減
  145. 145. #ue4fest#ue4fest Clustering • Actor Clustering • BluepringClustering
  146. 146. #ue4fest#ue4fest Clustering 結果 LogGarbage: 78.352761 ms for GC LogGarbage: 2.659634 ms for unhashing unreachable objects. Clusters removed: 1. Items 21 Cluster Items 30 LogGarbage: GC purged 51 objects (314160 -> 314109) ActorClustering LogGarbage: 35.832137 ms for GC LogGarbage: 2.722394 ms for unhashing unreachable objects. Clusters removed: 1. Items 21 Cluster Items 30 LogGarbage: GC purged 51 objects (314160 -> 314109) BPCluster 検索コスト 約44ms 削減
  147. 147. #ue4fest#ue4fest 対応前と対応後 検索 コスト (ms) 削除 コスト(ms) オブジェクト数 対応前 237.232555 6.752085 518004 対応後 36.404271 3.052086 326776 検索コスト 約200 ms オブジェクト数 19万 削減
  148. 148. #ue4fest#ue4fest 結局ヒッチが30数ミリと完全に抑えることができなかった。 UI操作中、バトル中、イベント中などはほぼ気にならなくなっ たがカメラが動くフィールド中は少し気になるレベル。 オクトパスでは
  149. 149. #ue4fest#ue4fest 自前でタイマー更新を行うようにした オクトパスでは 動的生成 オブジェクト数 カクつき GC間隔 タイトル画面 普通 少なめ 気にならない 5分 フィールド時 少なめ 普通 気になる 10分 メインメニュー 多め 多め 気にならない 1分 バトル 普通 普通 気にならない 3分
  150. 150. #ue4fest#ue4fest • Uproperty削減 • Obj listでボトルネックを探す • Blueprint Stats Plugin で探す オブジェクトの数は少ない方が良い
  151. 151. #ue4fest#ue4fest https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
  152. 152. #ue4fest#ue4fest 設計、検証はプロジェクト初期から行っていく必要がある パフォーマンス、メモリなどの計測は定期的に行う UE4はデバッグ機能、ツールが豊富なので活用する まとめ
  153. 153. #ue4fest#ue4fest ご清聴ありがとうございました

More Related Content

Slideshows for you

More from エピック・ゲームズ・ジャパン Epic Games Japan

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×