カリギュラオーバードーズにおけるUE4へのデータ移植の手引き【UNREAL FEST EAST 2018】

カリギュラオーバードーズにおける UE4へのデータ移植の手引き 株式会社ヒストリア 黒澤 二階堂 徹太郎 透 #ue4fest

前置き #ue4fest

Caligula Overdose の基本情報 • プラットフォーム：PS4 • ジャンル：RPG • 発売日：2018年5月17日 #ue4fest

開発について • Caligula(PSVita)をベースに リメイク＆要素追加（約2倍のボリュームに） • 基盤となるシステムの変更（UE4へ） • 多くの部分でCaligula(PSVita)の開発用データを流用 #ue4fest

本講演のスコープ • 含むもの • 静的データ • エディタ • 外部ツール • 含まないもの • ランタイム #ue4fest

ここから本題 #ue4fest

INDEX ■グラフィックス ■その他の静的データ #ue4fest

移植するもの • キャラクターモデル • 背景モデル • アニメーション #ue4fest

今回話さないこと • エフェクト • 新規キャラ＆新規背景 • UI Caligula OverdoseでのUIデザインアプローチ https://www.slideshare.net/historia_Inc/2018caligula-overdoseui #ue4fest

移植にあたっての方針 モデル編集はなるべく行わない • 再利用性が悪くなる • あまり時間もない #ue4fest

モデルを編集せずに絵をよくするには • マテリアル＆ポストプロセス • ベースマテリアルを調整 ⇒ すべてのモデルが変わる • ポストプロセス ⇒ 画面全体に影響 #ue4fest

INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ #ue4fest

トゥーンレンダリング • 平板で境界線のはっきりした陰影 （≒ セルアニメ） • ローポリでも現代的なビジュアル #ue4fest

トゥーンレンダリングとは？ • Unlitマテリアルで疑似的なシェーディング • シェーディングとは 光源ベクトルと法線ベクトルの内積 -1～1の値になる • この値をトゥーン具合を決めるテクスチャで変位 ⇒ トゥーン #ue4fest

内積でシェーディング ここのあかるさに注目 ライトベクトル 光源 ライトベクトルと法線の内積 法線ベクトル #ue4fest

UE4のマテリアル トゥーン具合を決めるテクスチャ #ue4fest

トゥーンとテクスチャの陰影 陰影のあるモデル • テクスチャの陰影と トゥーン影が重複 #ue4fest

トゥーンとテクスチャの陰影 陰影がないモデル • 情報量が少なすぎる ※ シワまで作りこんで あれば問題ない #ue4fest

決め影マップ • 影の出やすさを定義 目のくぼみの影 首の落ち影 服のしわ #ue4fest

決め影マップを使ったマテリアル もともと出る影 決め影マップで出た影 #ue4fest

決め影マップを旧作データから作る • すべての決め影テクスチャを描く？ ⇒ No！そんな時間はない • 決め影を１から用意するのではなく、 影っぽい陰影を再利用 #ue4fest

色を分解 • 色のデータ • 陰影のデータ #ue4fest

試作 加工前の カラーテクスチャ 試作した 決め影テクスチャ #ue4fest

試作してわかったこと 〇 ✕ ✕ 書き足し 髪の影、肌の周辺のシェーディング 書き足しはそこまで必要ない 陰影のコントラストの調整は必要 イテレーションを回す必要あり #ue4fest

量産に向けて • 量産に耐えうるフローを模索 • SubstanceDesigner or Photoshop（アクション） #ue4fest

Photoshop 〇 〇 ✕ 実現が簡単 タスクを外部化できる 調整パラメータを保存できない #ue4fest

Substance Designer ✕ ？ 〇 実現可能かどうか不明 タスクを外部化できる 調整パラメータを保存できる #ue4fest

Substance Designerのノード #ue4fest

カラーの処理 • カラーを通常合成 陰影を薄くしつつ調整 • 色は必ずしも元と同じではない #ue4fest

トゥーンマスクの処理 • 決め影マップ • リムライトの出やすさマップ • 影の濃さマップ ↑ この3つ値をそれぞれRGBにまとめる （トゥーンマスクと呼んでいる） #ue4fest

複数の素材の合成 • 一枚の画像に複数の要素 • パラメータを個別に設定 • 素材ごとのマスクを作る必要がある #ue4fest

Substance Designerのノード • 素材の分離と合成の 処理を分けた • 素材のマスク Photoshopで作成 #ue4fest

トゥーンマスクを再現 #ue4fest

ゲーム中のマテリアル #ue4fest

INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ #ue4fest

反射モデル • 反射モデル 地面の中に表示するモデル 描画順を変えて反射として表現していた • 反射モデルは削除 • PBRのリフレクション #ue4fest

大きなモジュラーアセット • 要素が多い • UVアイランドが多い ⇒ライトマップは使えない ダンジョンを構成するメッシュの一例 #ue4fest

頂点カラー • 頂点カラーでライティング 頂点カラーを乗算してライトのかわりにする • なるべく生かす Maya：頂点カラーのみの表示 （ライティングを行わない表示） #ue4fest

マテリアルの設定 • PBR化してリフレクションをコントロール • 旧作の頂点カラーを生かす マテリアルでコントロール #ue4fest

マテリアルでPBR化 • マテリアル内でRGBからラフネスを作る • メタルは数値入力 #ue4fest

Substance DesignerでPBR化 • Substance Designer Bitmap２Materialノード • 値を再調整したいので スタンドアロン版ではない • 必要に応じてノードを追加 #ue4fest

背景マテリアル #ue4fest

背景が円柱状に抜ける処理 • バトルのゲームデザインを大きく変えたいという 企画からの要望 #ue4fest

INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ #ue4fest

輪郭線 • 深度や法線の差を検出して合成 #ue4fest

空想視 • 空想視（行動予測を可視化する機能） 背景／敵／味方の色を変更 #ue4fest

バトル中の背景の亜空間 • バトル背景の一部は亜空間表現 • ほかにも必殺技演出で流線背景など #ue4fest

INDEX ■グラフィックス キャラクターLook Dev 背景Look Dev ポストプロセス データ変換Tips ■その他の静的データ #ue4fest

マテリアルを作れないファイル • COLLADAシェーダー UE4でマテリアルエレメントを作れるデータは Phong or Lambert • COLLADAシェーダーはマテリアルとみなされない ※ ほかにはMetanlRayマテリアルも変換できない #ue4fest

モデルデータ変換 • MELで全データをLambertに変換＆書き出し • ls -type unknownをリスト化 • 『MI＋テクスチャ名』のLambertを作成 • connectAttrで接続 #ue4fest

コリジョン • 複数のコリジョンデータを持った一つのデータ • MELで別々に選択して書き出し （select "*_col"とか） データの命名規則がしっかりしているので助かった #ue4fest

単位系の違い • Mayaの1単位が1メートル • UE4はMayaの1単位を1センチメートルとして扱う #ue4fest

スケーリングMEL（アニメ） • 回転はスケーリング不要 • 位置を修正 シーンルートをスケールしてフリーズ（makeIdentity） • 移動量を修正 トランスフォームのキーの値をスケール #ue4fest

INDEX →これのまとめ ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ ■データベース的なもの ■特殊なもの #ue4fest

（モデルに手を入れずに） UE4で絵を盛るには １ • マテリアル＆ポストプロセスが重要 • マテリアルはアーティストで（ほぼ）完結できる • イテレーションを回しやすく短期間で実現 アンリアルすごい #ue4fest

UE4で絵を盛るには ２ • とはいえアセットに手を入れないわけにはいかない • MELによる自動化 • Substance Designerによるプロシージャル編集 なんどでも調整できる #ue4fest

INDEX ■グラフィックス ■その他の静的データ ■データベース的なもの ■DataTable ■DataAsset ■CallInEditor ■特殊なもの #ue4fest

データベース的なもの • →例えばこういうやつ • 本プロジェクトでは この手のファイルが25種50個ほど存在 #ue4fest

その特徴 • 同じ形式の項目が大量に並んでいる • Excelで編集することが多い • 一覧性 • 一括編集 • VBA&マクロ #ue4fest

どういう形式でアセット化するか • DataTable • UObject＆Factory • DataAsset #ue4fest

とにかく簡単 DataTable • 扱いが非常に簡単 • データを一覧できる • その名の通りテーブル状のデータ専用 • 痒いところに手が届かない場合がある • キーがName型のみ • レコード間にグループ関係があるケース #ue4fest

THE王道 UObject＆Factory • Factoryをきちんと定義すれば色々できる • オブジェクトの構造を自由にでき、 関数として機能の追加もできる • 弊社ブログ（http://historia.co.jp/archives/1401/） • Factoryの定義がTHE 面倒 #ue4fest

その簡易版 DataAsset • Factoryの定義を行わずに UObjectとしてのアセットを生成する • 実は「生成するだけ」のFactoryが エンジンに実装されている #ue4fest

DataAssetのつかい方 1/3 • まず、UDataAssetを継承したクラスを作る • 中身の変数/関数などはご自由に 注意：UDataAssetはBlueprintableではない。 Blueprintクラスでやるには・・・ ・Blueprintableな子クラスを作って使う ・UPrimaryDataAssetで代用 #ue4fest

DataAssetのつかい方 2/3 • ContentBrowserからDataAssetを作成しクラスを選ぶ UAssetDataを継承したクラスの一覧 #ue4fest

DataAssetのつかい方 3/3 • いつものプロパティグリッドで編集できる ここにExcelで作ったデータを 取り込みたい #ue4fest

DataAssetとインポート • そんなものはない #ue4fest

DataAssetとCallInEditor • CallInEditor指定の関数は ボタンとしてグリッドに表示される #ue4fest

DataAssetとCallInEditor C++ • CallInEditor指定の関数は ボタンとしてグリッドに表示される Blueprint #ue4fest

DataTable-DataAsset方式 • DataTableの中身をいい感じに取り込む機能を DataAssetのCallInEditor関数として実装する #ue4fest

いい感じにする処理内容の例 • データの構造化 • 配列/連想配列に詰め直す • レコードのグループ化 • 名前によるアセットの指定を参照に置換する • エラーチェック #ue4fest

グループ化の例 • NPCのAI(?)にあたるデータ。行動条件表 1キャラクター分のデータ #ue4fest

名前→アセット参照への置換 • UObjectLibraryを利用して探してくる • 動的ロードに使うやつ、エディタでも使える • http://api.unrealengine.com/JPN/Programming/Assets/AsyncLoading/ #ue4fest

DataTable-DataAsset方式のコツ • 真面目にやるならC++でクラスを定義、 DataTableに関わる部分を #if WITH_EDITORONLY_DATA でエディタ限定に • （パッケージにDataTableが入らないようにする） #ue4fest

データベース取り込みフロー CSV import DataTable Call-in-editor function UDataAsset データの整理・抽出 #ue4fest

データベースの再利用まとめ • データベース系アセットをどう作るか • DataTable, UObject+Factory, DataAsset • DataAssetの紹介 • 応用としてDataTableとの併用について #ue4fest

INDEX ■グラフィックス ■その他の静的データ ■データベース ■スクリプト ■イベントスクリプト ■技動作スクリプト ■マップ #ue4fest

INDEX ■グラフィックス ■その他の静的データ ■データベース ■スクリプト ■イベントスクリプト ■技動作スクリプト ■マップ #ue4fest

イベントスクリプト • 各種イベントシーンの挙動を記述するデータ • 実行されるべき命令を並べたもの • 「台詞/文章を表示する」 • 「キャラクターを移動させる」 • 「アニメーションを再生する」 • etc. • RPG/アドベンチャーゲームで単に「スクリプト」と 言ったら多分コレのこと #ue4fest

Caligula(PSVita)のイベントスクリプト • 文法はほぼC言語 • 関数定義 • 関数呼び出し • ローカル/グローバル変数 • 分岐 • 台詞等のテキストが埋め込まれている #ue4fest

その再利用 • 専用ツールを作成 （C# | フォームアプリケーション） • C言語風の構文を展開 • CSV形式の中間言語に変換 （これをExcelで編集する） • 埋め込まれたテキストは別のファイルに抽出 • さらにインポート処理で実行用の形式に #ue4fest

その再利用 • 専用ツールを作成 （C# | フォームアプリケーション） • C言語風の構文を展開 • CSV形式の中間言語に変換 （これをExcelで編集する） • 埋め込まれたテキストは別のファイルに抽出 • さらにインポート処理で実行用の形式に #ue4fest

イベントスクリプト取り込みフロー C-style script CSV script import UObject script Text import DataTable custom-made tool #ue4fest

イベントスクリプト取り込みフロー CSV script C-style script custom-made tool import UObject script import DataTable Excelで編集する Text #ue4fest

イベントスクリプトの再利用まとめ • 専用アプリケーションによるデータ加工 • Excelでの編集 -- ここまで not Unreal -• インポート処理で実行時の形式に仕上げる #ue4fest

INDEX ■グラフィックス ■その他の静的データ ■データベース ■スクリプト ■イベントスクリプト ■技動作スクリプト ■マップ #ue4fest

技動作スクリプト • その名の通り、技の動作を定義するデータ • 時間に沿って動作コマンドを並べたもの • アニメーション • サウンド・ビジュアルエフェクト • 攻撃判定 • 移動・回転 • etc. #ue4fest

Caligula(PSVita)の技動作スクリプト • ようは数字の列 • 一行で一つのコマンド • コマンドの種類 • タイミング • その他のパラメータ #ue4fest

その再利用 • 一旦、ほぼそのままの形 （数列）として インポートする • エディタ代わりの編集補助オブジェクトを作成 • AnimCompositeへ変換 #ue4fest

その再利用 • 一旦、ほぼそのままの形 （数列）として インポートする • エディタ代わりの編集補助オブジェクトを作成 • AnimCompositeへ変換 #ue4fest

編集補助オブジェクト 編集機能ボタン 出力データ （AnimComposite） 入力データ（数列） #ue4fest

技動作スクリプトの再利用 CSV import UObject function UObject Anim Composite 数列データ 編集補助オブジェクト #ue4fest

技動作スクリプトのまとめ • オブジェクトをエディタ代わりに • 最終的にAnimCompositeに変換、実行時に使用 #ue4fest

INDEX ■グラフィックス ■その他の静的データ ■データベース的なもの ■スクリプト ■マップ #ue4fest

Caligula(PSVita)のマップ関連データ • 専用のマップエディタで作成されたもの • 各種配置情報を含む • マップチップ • ギミック • イベント発生用ボリューム • NPC • NPC移動ルート #ue4fest

マップ関連データの再利用 • 配置データの吸い出し • マップエディタを改造、 扱いやすいデータ形式で出力させる。 • 配置データを元にActorを生成（UnrealEditor）、 Mapに配置する #ue4fest

マップ関連データの再利用 Misc. Misc. Misc. Misc. 各種配置情報 extract (map editor) Misc. Misc. Misc. Misc. import UObject UObject UObject UObject 整理・抽出したもの 文字列形式 Map Actorとして配置 #ue4fest

マップデータ再利用まとめ • マップエディタ(C# | フォームアプリケーション)を 少し改造して利用 • UObjectアセットとして配置データを取り込み、 別のステップでレベルへの配置を行った #ue4fest

その他の静的データ総括 • NotUnrealなプロセスをけっこう使った • Excelでの編集 • C#アプリケーションでの加工 • 中間データ的なものを多用した • DataAssetという落としどころ • CallInEditorを用いたDataTableとの連携 #ue4fest

宣伝 #ue4fest

CGWORLD 2018 クリエイティブカンファレンス • 2018年11月4日（日） • 映像屋さんのためのリアルタイムBG制作 ーリアルタイム超初心者からの脱却を目指してー ［エレメントファクトリー］ https://cgworld.jp/special/cgwcc2018/ #ue4fest

plugs • プロ向け動画チュートリアルサービス https://plugs.jp/ • UE4シーン作成講座 for アーティスト #ue4fest

ご清聴ありがとうございました #ue4fest