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

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

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

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

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

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

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

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

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

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

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

• アナログ感を意識
原作のドット、イラスト。本作でのイラスト。三者三様の魅力的な要素。
それぞれ違った魅力の中でも共通項を考え、
ハンドメイド感(暖かみなど)を感じる画作りを意識
(便宜上、こちらを機械的ではない、という意味でアナログ感と表記)
はじめに(ビジュアルについて)

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

ポストプロセスにてアウトラインを作成

輪郭用の深度比較と、
ディテール用の法線比較、角度抽出を使用

アウトラインに強弱追加

アウトラインに強弱追加
(WorldNormalを利用したマスクを参照)

アウトラインに強弱追加(色味変更)
(WorldNormalを利用したマスクを参照)

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

• Non物理ベース
• 特徴的なスペキュラ、陰影はマテリアル内で表現
シェーディング

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

• シェーディングの要素について
• ベースカラーのみ

• ベースカラー
• 陰1,2を追加

• 陰1,2
• リムライト追加

• 陰1,2
• リムライト
• シャドウ追加(ハーフランバート)

• 陰1,2
• リムライト
• シャドウ(ハーフランバート)
• スペキュラ追加

シェーディング(陰について)
リムの領域で陰をマスクすることで、地の色のままでリムライトを表現。
稜線の表現と、バックライトの表現で併用

シェーディング(テクスチャ)
ノーマルマップにタッチが出るようにフィルタをかけ、
シェーディング部分にアナログ感を持たせるように調整

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

ライティング
原作の、
時間帯変化の再現のため、
ステーショナリーの
ディレクショナルライト、
スカイライトを使用
(他は基本スタティック)
ステージ毎に、
24時間分のアニメーション
カーブで調整。

ライティング(メニュー画面)
レンダーターゲット(2D)は使わず、
3D上のものをそのままレンダリング
で使用。
開発当時のエイリアシングの問題や、
(ゲーム中はTemporalAAを使用)
処理負荷都合、高解像度で
テクスチャを準備できなかった、
などの理由のため

(当然ながら)そのまま使用してしまうと
ステージ上のライトが反映されてしまう問題

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

AmbientCubeMapにてライティング
エミッシブのみ AmbientCubeMap

#ue4fest#ue4fest
揺れものについて

#ue4fest#ue4fest
• KawaiiPhysicsとAnimDynamicsを併用

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

#ue4fest#ue4fest
• なぜKawaiiPhysicsを使用したのか

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

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

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

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

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

#ue4fest#ue4fest
KawaiiPhysicsに感謝

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

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

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

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

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

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

• 聖剣伝説3は、6人のメインキャラクターから主人公、仲間１、仲間2を
選んだ組み合わせによって、ストーリーが複雑に変化します。
• この複雑なストーリーの全組み合わせをシーケンサーで一つずつ制作す
ることは現実的ではありません。
聖剣伝説3 ToMのイベントシーンの作り方

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

※本ページは動画ですが、資料からは再生できません。

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

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

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

• アニメーションは、体、眉、目、口の4つのレイヤーをブレンド再生し
ています。
【聖剣伝説3 ToMのイベントシーンの作り方】
アニメーションのレイヤー

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

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

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

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

• 愛用していたPayload型イベントですが、開発途中のUE4.21へのアップ
デートの際に、非標準仕様になりました。
• 泣きました。
• でも、作成済みのシーケンサーからPayload型のイベントトラックをコ
ピペすることで、利用し続けました。

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

• 角度を直接指定する方法と、ターゲットを指定するLookAt 型の2つを用
意しました。
目の向き、首の向きの調整

• ただし、メインキャラはそれぞれ、眼球の大きさが違いますので、
可動限界角度を設定して実行時に抑制しています。

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

• パーティーメンバーに応じて、一部のカメラを切り替えています。
（シャルロットがちびっこすぎる！！）
パーティー構成に応じたカメラの切り替え

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

#ue4fest#ue4fest
• https://udn.unrealengine.com/s/question/0D52L00004luxKpSAI
// 変更したいカメラトラックを探す
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();
}
}
}
}

#ue4fest#ue4fest
リップシンク

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

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

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

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

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

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

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

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

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

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

#ue4fest#ue4fest
と、思いますよね？

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

#ue4fest#ue4fest
• ロードが長すぎる！(トータルで１分半以上)

#ue4fest#ue4fest
• ゲーム中の処理落ちが酷い！

#ue4fest#ue4fest
• ○○を××するとバグる！

#ue4fest#ue4fest
• ○○を××するとバグる！
等々、様々な問題が指摘され始めました。

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

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

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

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

100以上の紐づ
き
2.6GBのサイズ
さらに参照を追っていくと…
ゲーム起動時にすでに
ボスのスケルタルメッシュを読み込んでいると発覚。
このようなAssetの紐づきによってメモリを圧迫している。
リファレンスビューアにてGameInstanceを覗いてみた。

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

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

• データテーブル、Actorに対しての
Assetをハード参照からソフト参照へ変更
Assetのハード参照をソフト参照へ
しかし、ここで問題が発生。

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

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

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

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

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

#ue4fest#ue4fest
→フォーラムを活用しましょう！必ず助けてくれます！
まとめ

#ue4fest#ue4fest
→過去の講演資料に目を通しておきましょう！
まとめ
https://www.slideshare.net/EpicGamesJapan

#ue4fest#ue4fest
→過去の講演資料に目を通しておきましょう！
まとめ
先人達の言う事はちゃんと聞きましょう！
ごめんネ. . .
https://www.slideshare.net/EpicGamesJapan

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

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to 聖剣伝説３でのUE4利用事例の紹介~Making of Mana | UNREAL FEST EXTREME 2020 WINTER (20)

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

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

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