Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた
•
29 likes•19,751 views
講演動画：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による開発事例をご紹介致します。
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた
Similar to Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた (20)
More from エピック・ゲームズ・ジャパン Epic Games Japan
More from エピック・ゲームズ・ジャパン Epic Games Japan (20)
Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた
- 2. #ue4fest#ue4fest ハード：Nintendo Switch 体験版１ 2017/09 体験版２ 2018/06 製品版 2018/07/13 日/英/伊/仏/独/西の6ヶ国語対応 世界同時発売 使用しているUE4 バージョン 4.18.1 オクトパストラベラーとは
- 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. #ue4fest#ue4fest 「 H D - 2 D 」 が 出 来 る ま で • HD-2Dとは • HD-2Dが出来るまで U E 4 を 使 っ た 絵 作 り • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 アジェンダ【アート編】
- 6. #ue4fest#ue4fest アート編 「 H D - 2 D 」 が 出 来 る ま で
- 10. #ue4fest#ue4fest この段階から • ドット絵にリッチなマテリアルを適応させよう • 動的でリッチなライティングをしよう • ポストエフェクトでミニチュアっぽい見せ方をしよう という方針
- 12. #ue4fest#ue4fest
- 13. #ue4fest#ue4fest
- 15. #ue4fest#ue4fest スケールの違和感 1. 広い画角 2. 人物と同じスケールの家 3. 高低差が乏しいレベルデザイン
- 18. #ue4fest#ue4fest
- 19. #ue4fest#ue4fest ドットが見えるような調整 • 海、バトル などのエフェクトもドット • 暗いところもテクスチャが見えるライティング • 被写界深度深め（近くも遠くもくっきりしたドット）
- 24. #ue4fest#ue4fest 「HD-2D 」が出来るまで ダンジョン試作 タウン試作 プロトタイプ 製品版 • リッチなライティング、マテリアル、ポストエフェクト • 画面の密度・スケール感 • 思い出を壊さない次世代感のバランス
- 25. #ue4fest#ue4fest アート編 U E 4 を 使 っ た 絵 作 り
- 26. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
- 27. #ue4fest#ue4fest • キャラクターはUE4のPaperFlipBookを使用 • 量産にはPhotoshopのパペットワープ機能を使用 • メモリ問題が起きたので、カスタム化 → プログラム編にて • ボーンにスプライトを張る形式のアニメーションも検討した が不採用となった UE4を使った絵作り【 キ ャ ラ ク タ ー 】
- 30. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
- 31. #ue4fest#ue4fest • ３Dアセットのマテリアルはほぼ１つのマスターマテリアルか ら作成されている • 機能別にスイッチを切り替えた子マテリアル、実際のパラメ ータやテクスチャを設定した孫マテリアルの構成 https://www.slideshare.net/EpicGamesJapan/byking-ue4dd • マテリアルはほぼアーティストが作成した UE4を使った絵作り【 マ テ リ ア ル 】
- 32. #ue4fest#ue4fest • オブジェクトは回転したいが、ドットのテ クスチャは回転したくない • 特に地面は目立つ • WorldPositionOffsetを使ってZ方向からプロ ジェクションで張り付けたようなUVになる ように調整 ワールドUV
- 41. #ue4fest#ue4fest • 揺れはWorldPositionOffsetで作成 • 頂点カラーで色を付けた部分にのみ揺れが 適応される • 揺れは3種あり、RGBの頂点カラーによっ て使い分けたり、ブレンドしたりしている 揺れもの
- 42. #ue4fest#ue4fest • パターンのテクスチャだけだと単調になり がちなオブジェクト（家など）にグラデー ションを適応 • ActorPosition を使い、アクター単位でグラ デーションをかけることができる グラデーション
- 44. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
- 45. #ue4fest#ue4fest • すべてUE4のPostProcessVolumeにあるものを使用 • 一部ゲーム内のオプションでパラメーターを変えられるよう にしている • マップによって値の調整が入っている項目もある UE4を使った絵作り【 ポ ス ト エ フ ェ ク ト 】
- 52. #ue4fest#ue4fest BaseColorのみ +ライティング ＋ポストエフェクト ポストエフェクトがヴィジュアルの大きなキー UE4を使った絵作り【 ポ ス ト エ フ ェ ク ト 】
- 53. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り
- 54. #ue4fest#ue4fest • 一部の重要なマップはグレーモデルにレタッチしてもらった 物をベースに作成 • 地形の作成には自社開発したマップエディターを使用 • ランドスケープやランドスケープスプライン、Foliageなどの UE4の機能を多く使用している UE4を使った絵作り【 地 形 の 作 成 】
- 59. #ue4fest#ue4fest • １マス100ｘ100の単位でブロックを生成できる • 斜め面の作成、立体交差作成も可能 • マテリアルブレンドを使った道の作成も可能 マップエディター
- 60. #ue4fest#ue4fest
- 61. #ue4fest#ue4fest 道になる部分はマップエディターで作成 デメリット • 地形がブロック的になりやすい • データが重い • 手間がかかる マップエディター マップエディター素材で作成された モジュラーアセットを配置
- 64. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り【 室 内 表 現 】
- 65. #ue4fest#ue4fest
- 67. #ue4fest#ue4fest • 室内と室外はシームレスに切り替えている • ドア部分のトリガーで以下を切り替えている • ライト • ポストエフェクト • 表示非表示オブジェクト • カメラ距離 • キャラクターサイズ 室内表現
- 68. #ue4fest#ue4fest
- 69. #ue4fest#ue4fest • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出 UE4を使った絵作り【 バ ト ル 演 出 】
- 70. #ue4fest#ue4fest
- 71. #ue4fest#ue4fest • 通常時は真正面ではなく、少し斜めにしたカメラが常時少し ゆらゆらしている • ブースト+アビリティで、カメラ演出が入る • カメラの場所や回転、スピードはアートで調整できるように なっている バトル演出【カメラ】
- 72. #ue4fest#ue4fest • ブーストすると、キャラクター足元のライトが発光 • ライト演出が入る際は、マップに配置されている太陽光源が オフになる→負荷対策でもある • 動的な影の変化を表現するため、バトル専用ポイントライト をレベルに配置 バトル演出【ライト】
- 74. #ue4fest#ue4fest
- 75. #ue4fest#ue4fest
- 76. #ue4fest#ue4fest アジェンダ【アート編】 アート編おしまい 「 H D - 2 D 」 が 出 来 る ま で • HD-2Dとは • HD-2Dが出来るまで U E 4 を 使 っ た 絵 作 り • キャラクター • マテリアル • ポストエフェクト • 地形の作成 • 室内表現 • バトル演出
- 78. #ue4fest#ue4fest 主な開発タイトル 2008『勇者のくせになまいきだwww』（全般） 2009『100万トンのバラバラ』 （ AIなど） 2011『侍道4』（夜這い、拷問など） 2011『忍道 散華』（オブジェクトなど） 2012『rain』（リード、キャラなど） 2014『絶対迎撃ウォーズ』 （リード） 2016『ロード・トゥ・ドラゴン』 自己紹介 株式会社アクワイア プログラマ 渡邊 裕 2008年 アクワイア入社。 『侍道4』『rain』『絶対迎撃ウォーズ』などコンシューマを中心に開発に携わる。 『OCTOPATH TRAVELER』ではリードプログラマを担当。
- 79. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
- 80. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
- 82. #ue4fest#ue4fest • ゲーム起動後、暗転状態からすぐにローディングアイコンが 出てほしい。（約５秒以内ぐらい） • ローディングアイコンが消えた後、 タイトル画面が出るまではロード待ちしたくない。 • タイトルを抜け、ゲーム開始する際はロード待ちしても良い （長すぎるのはNG） プロジェクト的なオーダー
- 84. #ue4fest#ue4fest • 体験版１ 2017/09 • 体験版２ 2018/06 • 製品版 2018/07/13
- 87. #ue4fest#ue4fest • GameModeのBeginPlayが呼ばれるまで30秒近くかかっていた • 起動直後にローディングUIを出したいが、呼び出すことができない 体験版１ 改善前
- 88. #ue4fest#ue4fest 体験版１ 問題点 • GameMode、GameInstance、PlayerControllerからの参照が多い • Assetを直接参照しているものが大量にあった
- 96. #ue4fest#ue4fest GameMode GameInstance PlayerController などエンジン起動に 必要なオブジェクトの参照減らす 参照整理後のGameMode
- 99. #ue4fest#ue4fest 体験版１ 起動ロード改善後 3秒 20秒 30秒 5秒改善前 改善後
- 103. #ue4fest#ue4fest • 初期段階からの設計が重要 • いつ、どこで、どのクラスが必要なのかを明確化 • 何でもかんでも参照をしないようにする • 定期的にReferenceViewerで確認 ロード時間についてまとめると
- 104. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
- 107. #ue4fest#ue4fest UPaperSprite ・テクスチャのポインタ ・UV、Dimension ・描画用のメッシュ情報 (AlternateMaterialSplitIndex, BakedRenderData) (頂点6つ分) FSpriteDrawCallRecord UPaperSpriteから BakedRenderData を貰って描画に渡している。 PaperFlipbook
- 117. #ue4fest#ue4fest • Flipbookをロードすることで引っ張られるSpriteを自前管理 ⇒ 断片化の防止のため • キーフレームやSprite情報など、アニメーションに必要なもの をテーブル化しておく。 • 描画の部分は元のFlipbookに任せる Flipbook まとめ
- 118. #ue4fest#ue4fest 1. ローディング時間について 2. Flipbookの最適化について 3. GarbageCollectionについて アジェンダ
- 120. #ue4fest#ue4fest 調査
- 122. #ue4fest#ue4fest UMGのアニメーションをさせるたびにメモリが増えているのが分かった Class Count NumKB MaxKB アニメーション前 UMGSequencePlayer 61 115.33 115.33 アニメーション後 UMGSequencePlayer 81 153.14 53.14
- 128. #ue4fest#ue4fest • 長時間プレイしているとメモリが足りない • UMGのアニメーション再生しているだけでメモリが増えている • やはりGCを定期的に呼ばなければならない • GCを呼ぶにはヒッチをなんとかしなければならない ここまでの話
- 131. #ue4fest#ue4fest UE4のGCはUobjectを一次元配列で管理している GCについて GCの際、この一次元配列からオブジェクトを検索し、不要になったものを削除 GCのコスト = 検索コスト + 削除コスト UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
- 132. #ue4fest#ue4fest 削除コスト = 依存関係の切断 + 実際のオブジェクトの削除 GCについて 削除コストについて フレーム分散可能 UE4におけるLoadingとGCのProfilingと最適化手法 より引用 https://www.slideshare.net/EpicGamesJapan/ue4loadinggcprofiling
- 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. #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で削除後のオブジェクト数
- 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. #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 削減
- 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. #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. #ue4fest#ue4fest Clustering • Actor Clustering • BluepringClustering
- 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. #ue4fest#ue4fest 対応前と対応後 検索 コスト （ms) 削除 コスト（ms) オブジェクト数 対応前 237.232555 6.752085 518004 対応後 36.404271 3.052086 326776 検索コスト 約200 ms オブジェクト数 19万 削減
- 149. #ue4fest#ue4fest 自前でタイマー更新を行うようにした オクトパスでは 動的生成 オブジェクト数 カクつき GC間隔 タイトル画面 普通 少なめ 気にならない 5分 フィールド時 少なめ 普通 気になる 10分 メインメニュー 多め 多め 気にならない 1分 バトル 普通 普通 気にならない 3分
- 150. #ue4fest#ue4fest • Uproperty削減 • Obj listでボトルネックを探す • Blueprint Stats Plugin で探す オブジェクトの数は少ない方が良い