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

7.6K Views

October 23, 18

スライド概要

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

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

●公式サイト
https://unrealengine.jp/unrealfest/
===
「カリギュラオーバードーズ(PS4)」の制作においては「カリギュラ(PSVita)」で使用された各種のデータが再利用されました。これをUE4で取り扱えるよう加工するにあたってはデータの種類や性質に応じて様々な手法が採られました。本公演ではそれぞれの手法についてご紹介します。

profile-image

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

シェア

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

関連スライド

各ページのテキスト
1.

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

2.

前置き #ue4fest

3.

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

4.

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

5.

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

6.

ここから本題 #ue4fest

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

Substance Designerのノード #ue4fest

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

背景マテリアル #ue4fest

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

66.

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

67.

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

68.

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

69.

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

70.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

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

90.

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

91.

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

92.

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

93.

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

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

宣伝 #ue4fest

101.

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

102.

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

103.

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