聖剣伝説３でのUE4利用事例の紹介~Making of Mana【UNREAL FEST EXTREME 2020 WINTER】

53.2K Views

November 17, 20

ue4 unreal fest unreal fest extreme 2020 winter ue-console ue-rendering ue-sequencer ue-optimize

スライド概要

UNREAL FEST EXTREME 2020 WINTER 再生リスト
https://www.youtube.com/playlist?list=PLr_Cbd4sUDTzxG9a4TrU0Rg6-ApCJBCsI

講演内容：
「聖剣伝説３ TRIALS of MANA」にて、以下の事例においてUnreal Engine 4 をどのように使用したかを詳しく紹介させていただきます。
・キャラクターの表現
・シーケンサーを使ったイベントシーンの再生
・その他エンジニア向けTIPS

講演者：
本告禎一 ( 株式会社ジーン MOE事業部プログラマー )
滝下直樹 ( 株式会社ジーン第1開発事業部香川スタジオ室長 )
植本修平 ( 株式会社ジーン 3Dアーティスト )

https://unrealengine.jp/unrealfest/
#ue4fest

エピックゲームズジャパン

@EpicGamesJapan

スライド一覧

Unreal Engineを開発・提供しているエピックゲームズジャパンによる公式アカウントです。勉強会や配信などで行った講演資料を公開しています。公式サイトはこちら https://www.unrealengine.com/ja/

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 5.56MB)

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 879K

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 590.8K

UE5の最新グラフィクスを使いこなすための4個の勘所 [CEDEC+KYUSHU 2023]

unreal engine 5 ue5 cedec cedec+kyushu

エピックゲームズジャパン 463.1K

マンガで使う！初めての Unreal Engine【UE4 Manga Anime Illustration Dive Online】

ue4 ueart2d ue-beginner

エピックゲームズジャパン 358.1K

UE4で作成するUIと最適化手法【GAME CREATORS CONFERENCE '20】

ue4 ue-ui ue-optimize

エピックゲームズジャパン 319.1K

各ページのテキスト

聖剣伝説３でのUE4利用事例の紹介 ~Making of Mana~ 株式会社ジーン #ue4fest

お品書き • アーティスト編(キャラクター) • プログラム編(シーケンサーを利用したイベントシーン再生) • プログラム編(開発で得た知見について) #ue4fest

聖剣伝説３でのUE4利用事例の紹介～キャラクター編(ルックについて)～株式会社ジーン 3Dアーティスト植本修平 #ue4fest

目次 • • • • • 自己紹介 • ライティングについて聖剣伝説3 Trials of Mana紹介 • 揺れものについてはじめに(前置き) アウトラインについてシェーダーについて #ue4fest

自己紹介 • 案件役割名前：植本修平役職：３Dアーティスト • • • • • • • • • プレイヤーキャラクターのモデリング。モンスター、ボスモデリング。背景についてアレコレ手段を労するキャラマテリアル、背景の特殊表現マテリアル作成ポスプロマテリアル作成、ポスプロ調整キャラと背景とイベントをつなぐ人各プラットフォームの描画設定、描画負荷を追っかける人メニュー系画面(3D)、演出等心の清涼剤、その他諸々 #ue4fest

聖剣伝説3 Trials of Mana紹介 #ue4fest

聖剣伝説3 Trials of Mana紹介 • スクウェア・エニックス社のブランドである聖剣伝説シリーズ３作目のリメイク作品 ※以降、聖剣伝説3 ToMと表記 • 原作は1995年にスクウェア社より発売されたスーパーファミコン用ソフトのRPG https://www.jp.square-enix.com/seiken3_tom/ 本スライドは株式会社スクウェア・エニックスが権利を有する著作物を利用しています。当該コンテンツの転載・配布は禁止いたします。 © SQUARE ENIX CO., LTD. All Rights Reserved. #ue4fest

はじめに(キャラクター編) #ue4fest

はじめに(キャラクター編) • エンジンについては最終4.22.3を使用 • (グラフィック用には無改造) • エンジン標準の機能のみで作成 #ue4fest

10.

はじめに(キャラクター編) • UE4でどういった機能を使用したか、というお話がメイン • 機能詳細や、技術的な内容はお話ししません (甘口な内容ながら中辛をブレンドしたまろやかさ) 機能や、技術などの詳細については、過去の登壇者様の講演内容や、有志の方の記事やまとめが大変参考になります #ue4fest

11.

12.

アウトラインについて #ue4fest

13.

14.

15.

16.

17.

18.

シェーディングについて #ue4fest

19.

20.

シェーディング(要素について) ベース陰1 陰2 リムシャドウスペキュラ #ue4fest

21.

22.

23.

24.

25.

26.

27.

28.

ライティングについて #ue4fest

29.

30.

31.

32.

ライティング(メニュー画面) • ライティングチャンネルの変更で、ステージのライトが当たらないように変更 • ポストからGIをOFFにすることで、ボリューメトリックライトの影響を切る • r.SkyLightingQualityコマンドでスカイライトを制御 #ue4fest

33.

34.

揺れものについて #ue4fest

35.

揺れものについて • KawaiiPhysicsとAnimDynamicsを併用 #ue4fest

36.

揺れものについて • KawaiiPhysicsとは • エピックゲームズジャパンの猫おかず様作成の非公式の疑似物理プラグイン UnrealEngine4用に作成され、髪、スカート、胸などの揺れものを「かんたんに」「かわいく」揺らすことができます。 https://github.com/pafuhana1213/KawaiiPhysics #ue4fest

37.

揺れものについて • なぜKawaiiPhysicsを使用したのか #ue4fest

38.

なぜKawaiiPhysicsを使用したのか「かんたんに」設定できて「かわいく」揺らすことができるから #ue4fest

39.

なぜKawaiiPhysicsを使用したのか • 開発初期はPhysicsAssetを使用処理が不安定な開発初期という事も有り、コリジョン抜けや形状の伸び等、物理が荒ぶる挙動を確認各プラットフォームで動作確認を行い、現時点での使用は難しいと判断 #ue4fest

40.

なぜKawaiiPhysicsを使用したのか • 開発中盤、AnimDynamicsに置き換え PhysicsAssetより挙動は安定するものの、負荷が高い場面で、コリジョン抜け等見た目が破綻する事があった納得のいく揺れ挙動に近づける為、試行錯誤を繰り返す #ue4fest

41.

なぜKawaiiPhysicsを使用したのか • 開発終盤、PhysicsAssetを再検証処理負荷が安定してきた終盤 PhysicsAssetを再検証するも、高負荷時のコリジョン抜けや、形状の延びが発生してしまう AnimDynamicsからの置き換えるコストも高く、再び使用を断念 #ue4fest

42.

なぜKawaiiPhysicsを使用したのか • Kawaiiとの邂逅負荷が高い条件下でも安定しており、自然な揺れ挙動を実現できたコリジョン抜けに強く、形状破綻が少なかった既存のAnimDynamicsと併用する事ができ、置き換えコストも低い快適かつ簡単操作で、プロジェクト終盤でも安定した作業が可能 #ue4fest

43.

なぜKawaiiPhysicsを使用したのか KawaiiPhysicsに感謝 #ue4fest

44.

まとめ(キャラクター編) #ue4fest

45.

まとめ(キャラクター編) • 原作のキャラクターの魅力を再確認少しでも伝えられるよう四苦八苦 • KawaiiPhysicsはかわいい案件上の揺れものの問題が解決 #ue4fest

46.

次、プログラム編です！ #ue4fest

47.

シーケンサーを利用したイベントシーン再生株式会社ジーン第一開発事業部香川スタジオ滝下直樹 #ue4fest

48.

アジェンダ ■聖剣伝説3 ToMのイベントシーンの作り方 ■シーケンサーのイベント機能で実現した事 ■目の向き、首の向きの制御 ■パーティー構成に応じたカメラの切り替え ■リップシンク #ue4fest

49.

聖剣伝説3 ToMのイベントシーンの作り方 #ue4fest

50.

51.

• 例えば次のように、同じ場所で展開されるイベントシーンも、キャラクターの組み合わせによって内容が異なります。 #ue4fest

52.

53.

• メインキャラクターはシーケンサーでは専用のActorで共通の演技を作成し、ゲーム実行時にはゲーム中で表示しているメインキャラクターのActorに置き換えます。 • ゲーム中のパーティー構成が反映されます。 • ゲーム中の装備等が維持されます。 #ue4fest

54.

• シーケンサーのスクリーンショット #ue4fest

55.

#ue4fest

56.

• アニメーションのファイル名は全キャラクターで共通の命名則にします。 AM_pc01_01a_a_angry01_L.uasset キャラID クラスID アニメーション名 • イベントシーン再生開始時に、再生するシーケンサーをC++にて走査して、必要なアニメーション名を抽出します。 • 出演するキャラクターの同名アニメーションをロードして、シーケンサーで指定されたアニメーション再生タイミングで全く同じアニメーションを再生します。 • 各キャラクターのアニメーションはコンバーターで自動収集してcsvを作成し、データテーブル化しています。 #ue4fest

57.

58.

シーケンサーのイベント機能で実現した事 #ue4fest

59.

シーケンサーのイベントで実現した事 • シーケンサーで設定できるイベント（Payload型）で実装したことをいくつか紹介いたします。 #ue4fest

60.

【シーケンサーのイベントで実現した事】セリフの表示 • 音声とリップシンクアニメーションも連動しています。パーティー番号０（主人公）がどのキャラであればこのテキストIDのセリフを表示するというパラメータです。 #ue4fest

61.

【シーケンサーのイベントで実現した事】タイムラインのコントロール • 同じようなイベントでも、とあるパーティー構成時だけ再生するようなカットがあるため、条件設定して何番目のサブシーケンスにタイムラインを進める、という事ができるようにしています。 #ue4fest

62.

63.

目の向き、首の向きの制御 #ue4fest

64.

65.

66.

パーティー構成に応じたカメラの切り替え #ue4fest

67.

68.

• シーケンサーの中にメインキャラごとのカメラを用意しておき、実行時にパーティー構成に応じてアクティブなカメラをバインドし直しています。 #ue4fest

69.

[beta]

// 変更したいカメラトラックを探す
FMovieSceneObjectBindingIDtargetBindingID;
for (int i = 0; i < spawnableCnt; ++i)
{
const FMovieSceneSpawnable& Spawnable = movieScene->GetSpawnable(i);
FString str = Spawnable.GetName();
if (str.StartsWith(findingName))
{
targetBindingID = FMovieSceneObjectBindingID(Spawnable.GetGuid(), MovieSceneSequenceID::Root, EMovieSceneObjectBindingSpace::Local);
isFound = true;
break;
}
}
if (isFound)
{
// CameraCutトラックのカメラを変更する
UMovieSceneTrack*camTrack = movieScene->GetCameraCutTrack();
if (camTrack != nullptr)
{
const TArray<UMovieSceneSection *>sections = camTrack->GetAllSections();
for (int i = 0; i < sections.Num(); ++i)
{
UMovieSceneCameraCutSection*camSection = Cast<UMovieSceneCameraCutSection>(sections[i]);
if (camSection != nullptr) {
camSection->SetCameraBindingID(targetBindingID);
camSection->Modify();
camSection->MarkAsChanged();
}
}
}
}

•

https://udn.unrealengine.com/s/question/0D52L00004luxKpSAI

#ue4fest

70.

リップシンク #ue4fest

71.

リップシンク対応 • 音声は日本語と英語を用意しており、それぞれにリップシンク対応しています。 #ue4fest

72.

73.

【リップシンク対応】実装方法 • セリフのテキストIDと音声ファイル名は一致させるルール。 • スクウェア・エニックス様のテキスト管理システムByblosでは、セリフに対して発話者名も設定されている。 • Byblosについては、2017年のCEDECで紹介されています。 • • CEDEC Digital Library https://cedil.cesa.or.jp/cedil_sessions/view/1742 Social Game Info 記事 https://gamebiz.jp/?p=192461 #ue4fest

74.

【リップシンク対応】実装方法 • 音声データをOculusのリップシンクライブラリを使って、口のアニメーションをレコーディング。（参考記事） https://pafuhana1213.hatenablog.com/entry/2018/11/26/011057 • 再生からレコーディング、アセット保存までを自動化。（全コンバートでだいたい一晩・・・） • 必要があればデザイナーが手作業でアニメーションを微調整。 #ue4fest

75.

【リップシンク対応】実装方法 • 作成されたリップシンクアニメーションは、コンバーターで収集して csvを作成し、データテーブル化。 #ue4fest

76.

【リップシンク対応】実装方法 • イベントシーン再生時に、テキスト表示コマンドの発動に連動させて・・・ • 同名の音声を再生 • そのテキストに設定された発話者名に対応するActorに、リップシンクアニメーションを再生。（Byblosに発話者名の設定があって本当に良かった！） • ただし、モデルデータに名前が紐づかないようなモブキャラの場合だけは、どの Actorにリップシンクアニメーションを再生するか個別に指定しています。 #ue4fest

77.

以上です。 • 弊社ブログに、シーケンサーでのイベントシーン制作のヒューマンエラーの例と、その検出方法について紹介しています。 • https://www.xeen.co.jp/staffblog/2020/02/blog-20200218.html • ご清聴ありがとうございます。 #ue4fest

78.

開発で得た知見について株式会社ジーン MOE事業部本告禎一 #ue4fest

79.

アジェンダ ■開発環境について ■最も苦労した点/解決への道のり ■事前に確認/設定しておくべき項目 ■まとめ ■最後に #ue4fest

80.

開発環境について • UE4.18で開発スタート。３回のアップデートを経て最終バージョンは 4.22。 • エンジンについては、CLマージを加味してプログラマセクション用にソースコードを用意。それ以外のセクションではビルドを済ませたバイナリバージョンで開発。 • C++での開発実績は多いものの、UE４での大規模開発実績はほぼ0 #ue4fest

81.

• BPとは？/リソースの扱いについて/各プラットフォームへの対応 Etc... 大丈夫かなぁ… #ue4fest

82.

意外となんとかなる • 確認したいリソースをレベルに放り込むだけで簡単に確認する事が出来る！ →各セクション側だけでも独立して検証出来てしまうので単体テストが凄くラク！他にもイベント単体確認デバッグレベルや、エフェクト確認レベル等様々なデバッグ用レベルを用意しました。バトル確認用デバッグレベルサウンド確認用デバッグレベル • あとは量産、結合するだけ！ © SQUARE ENIX CO., LTD. All Rights Reserved. #ue4fest

83.

と、思いますよね？ #ue4fest

84.

最も苦労した点開発も中盤に差し掛かる頃、同時に進行していたとある展示イベントに向けたROMの確認中、頻繁にクラッシュする問題が発生。その他にも・・・ #ue4fest

85.

最も苦労した点開発も中盤に差し掛かる頃、同時に進行していたとある展示イベントに向けたROMの確認中、頻繁にクラッシュする問題が発生。その他にも・・・ • ロードが長すぎる！(トータルで１分半以上) #ue4fest

86.

最も苦労した点開発も中盤に差し掛かる頃、同時に進行していたとある展示イベントに向けたROMの確認中、頻繁にクラッシュする問題が発生。その他にも・・・ • ロードが長すぎる！(トータルで１分半以上) • ゲーム中の処理落ちが酷い！ #ue4fest

87.

最も苦労した点開発も中盤に差し掛かる頃、同時に進行していたとある展示イベントに向けたROMの確認中、頻繁にクラッシュする問題が発生。その他にも・・・ • ロードが長すぎる！(トータルで１分半以上) • ゲーム中の処理落ちが酷い！ • ○○を××するとバグる！ #ue4fest

88.

最も苦労した点開発も中盤に差し掛かる頃、同時に進行していたとある展示イベントに向けたROMの確認中、頻繁にクラッシュする問題が発生。その他にも・・・ • ロードが長すぎる！(トータルで１分半以上) • ゲーム中の処理落ちが酷い！ • ○○を××するとバグる！等々、様々な問題が指摘され始めました。 #ue4fest

89.

単純なバグは修正するとして・・・ • クラッシュは街中を歩いているだけでも発生してしまう • 全体的に重いが、戦闘中特に重かった • 展示用ROMの規模から考えてもロード時間が想定以上にかかっているそこで・・・２～３名のプロファイルチームを組み、負荷プロファイルを開始。同時にEPIC様にも状況を説明し、ヘルプを要請させて頂きました。 #ue4fest

90.

ある日、プロファイルチームのメンバーから検証結果報告が入りました。話を聞いてみると・・・街中でクラッシュする原因が分かりました。お、マジで？ #ue4fest

91.

ある日、プロファイルチームのメンバーから検証結果報告が入りました。話を聞いてみると・・・ジャドにカニがいます。なんで！？ #ue4fest

92.

原因を深掘りしていくと・・・ • GameInstance、PlayerController で大量にハード参照で紐づいている →Assetが各リソースをハード参照しているハード参照で紐づくことによって要らないものにまでメモリが使用されている状態となっていた。 • • ロード時間が長い＝不必要なリソースにロード時間が取られていたクラッシュしてしまう＝不必要なリソースにメモリが利用され、メモリ不足を引き起こしていたつまり、今回起きている問題の大部分はこれが占めてる可能性が極めて高い。 #ue4fest

93.

94.

解決への道のり１：Assetのハード参照をソフト参照へ。２：各アクセスをインターフェース経由で行うように。３：BPをC++化させる更に・・・ #ue4fest

95.

解決への道のり１：Assetのハード参照をソフト参照へ。２：各アクセスをインターフェース経由で行うように。３：BPをC++化させる更に・・・ EPIC様から精鋭チームが派遣され、プロファイリングして頂ける事に！ #ue4fest

96.

97.

Assetのハード参照をソフト参照へ • データテーブル、Actorに対しての Assetをハード参照からソフト参照へ変更しかし、ここで問題が発生。各ActorのBeginPlayなどで管理マネージャーにアクセス ↓ 管理マネージャー生成されてなければ生成、となり、どのActorがどのタイミングアクセスしてくるか順不同。とても読み込みのフローを担保できる状況ではなかった。初期化フローをすべて一から作成しなおしました。 © SQUARE ENIX CO., LTD. All Rights Reserved. #ue4fest

98.

各アクセスをインターフェース経由で行うように • 外部へのアクセスを基底型でインターフェースを使用してアクセスする事によって、参照が紐づかないように対応。 BPをC++化させる • ブループリントの機能をC++化させる。ただし、ゲーム内の実装が9割ほどBPで作成されている為、リスクとコストがかかり過ぎると判断した。効果的なものを抜粋し、一部対応で留めました。 #ue4fest

99.

その他の対応(事前に確認/設定しておくべき項目) 【ロード時間短縮に効果的な対応】 • プレイヤー系の常駐、エフェクト類の常駐、SE類の常駐処理対応 • ウィジェット類/アイコンテクスチャをキャッシュして利用するように対応 • 独立性の高さ故、各作業者間のテスト用データ(グラフィックデータ等も含む)が散らかっていたので整理した →事前にセクション間で明確なルールを決め、遵守する。無駄なリソースデータはROMの容量にも影響するので可能な限り徹底しておく。 #ue4fest

100.

その他の対応(事前に確認/設定しておくべき項目) 【 CPUパフォーマンス改善に効果的な対応】 • Tickを可能な限りDisableへ設定する →プロジェクト作成時に一括でDisableへ設定し、必要なActorのみEnableにするのが望ましい。 →複雑な処理はやはりC++側で処理した方が速い。 • PGO(Profile Guided Optimization)の利用 →ゲーム中のプロファイル結果を基にした最適化機能。 • URO (Enable Update Rate Optimizations)を有効に →カメラから離れたキャラのアニメーション更新頻度を落とすことで負荷を削減出来る設定。 #ue4fest

101.

まとめ • 本作で遭遇した問題の殆どは過去、先人達の通ってきた道 #ue4fest

102.

まとめ • 本作で遭遇した問題の殆どは過去、先人達の通ってきた道 →フォーラムを活用しましょう！必ず助けてくれます！ #ue4fest

103.

まとめ • 本作で遭遇した問題の殆どは過去、先人達の通ってきた道 →フォーラムを活用しましょう！必ず助けてくれます！ →過去の講演資料に目を通しておきましょう！ https://www.slideshare.net/EpicGamesJapan #ue4fest

104.

まとめ • 本作で遭遇した問題の殆どは過去、先人達の通ってきた道 →フォーラムを活用しましょう！必ず助けてくれます！ →過去の講演資料に目を通しておきましょう！ https://www.slideshare.net/EpicGamesJapan ごめんネ. . . 先人達の言う事はちゃんと聞きましょう！ #ue4fest

105.

おまけ • リリース直前に初回起動時にハングアップする問題が発生！ →問題としては単純な実装ミス • 徹夜でフラフラになりながらも、メンバーが協力してくれ、更にスクウェア・エニックス様にも問題解決に尽力頂きました！ #ue4fest

106.

107.

最後に • 弊社では本作以外にも、コンシューマ/アーケード/スマホ等様々なプラットフォームに対応したゲーム開発実績があります！ • お仕事の相談は是非ジーンへ！ご清聴誠にありがとうございました！ #ue4fest