Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,689 views

Published on

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

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

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

Published in: Engineering
  • Be the first to comment

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

  1. 1. #ue4fest#ue4fest カリギュラオーバードーズにおける UE4へのデータ移植の手引き 株式会社ヒストリア 黒澤 徹太郎 二階堂 透
  2. 2. #ue4fest#ue4fest 前置き
  3. 3. #ue4fest#ue4fest Caligula Overdose の基本情報 • プラットフォーム:PS4 • ジャンル:RPG • 発売日:2018年5月17日
  4. 4. #ue4fest#ue4fest • Caligula(PSVita)をベースに リメイク&要素追加(約2倍のボリュームに) • 基盤となるシステムの変更(UE4へ) • 多くの部分でCaligula(PSVita)の開発用データを流用 開発について
  5. 5. #ue4fest#ue4fest • 含むもの • 静的データ • エディタ • 外部ツール • 含まないもの • ランタイム 本講演のスコープ
  6. 6. #ue4fest#ue4fest ここから本題
  7. 7. #ue4fest#ue4fest INDEX ■グラフィックス ■その他の静的データ
  8. 8. #ue4fest#ue4fest 移植するもの • キャラクターモデル • 背景モデル • アニメーション
  9. 9. #ue4fest#ue4fest • エフェクト • 新規キャラ&新規背景 • UI Caligula OverdoseでのUIデザインアプローチ https://www.slideshare.net/historia_Inc/2018caligula-overdoseui 今回話さないこと
  10. 10. #ue4fest#ue4fest モデル編集はなるべく行わない • 再利用性が悪くなる • あまり時間もない 移植にあたっての方針
  11. 11. #ue4fest#ue4fest • マテリアル&ポストプロセス • ベースマテリアルを調整 ⇒ すべてのモデルが変わる • ポストプロセス ⇒ 画面全体に影響 モデルを編集せずに絵をよくするには
  12. 12. #ue4fest#ue4fest INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ
  13. 13. #ue4fest#ue4fest • 平板で境界線のはっきりした陰影 (≒ セルアニメ) • ローポリでも現代的なビジュアル トゥーンレンダリング
  14. 14. #ue4fest#ue4fest • Unlitマテリアルで疑似的なシェーディング • シェーディングとは 光源ベクトルと法線ベクトルの内積 -1~1の値になる • この値をトゥーン具合を決めるテクスチャで変位 ⇒ トゥーン トゥーンレンダリングとは?
  15. 15. #ue4fest#ue4fest 内積でシェーディング 光源 法線ベクトル ここのあかるさに注目 ライトベクトル ライトベクトルと法線の内積
  16. 16. #ue4fest#ue4fest UE4のマテリアル トゥーン具合を決めるテクスチャ
  17. 17. #ue4fest#ue4fest トゥーンとテクスチャの陰影 陰影のあるモデル • テクスチャの陰影と トゥーン影が重複
  18. 18. #ue4fest#ue4fest トゥーンとテクスチャの陰影 陰影がないモデル • 情報量が少なすぎる ※ シワまで作りこんで あれば問題ない
  19. 19. #ue4fest#ue4fest • 影の出やすさを定義 決め影マップ 目のくぼみの影 首の落ち影 服のしわ
  20. 20. #ue4fest#ue4fest 決め影マップを使ったマテリアル もともと出る影 決め影マップで出た影
  21. 21. #ue4fest#ue4fest • すべての決め影テクスチャを描く? ⇒ No!そんな時間はない • 決め影を1から用意するのではなく、 影っぽい陰影を再利用 決め影マップを旧作データから作る
  22. 22. #ue4fest#ue4fest • 色のデータ • 陰影のデータ 色を分解
  23. 23. #ue4fest#ue4fest 加工前の カラーテクスチャ 試作 試作した 決め影テクスチャ
  24. 24. #ue4fest#ue4fest 〇 書き足し 髪の影、肌の周辺のシェーディング 書き足しはそこまで必要ない ✕ 陰影のコントラストの調整は必要 ✕ イテレーションを回す必要あり 試作してわかったこと
  25. 25. #ue4fest#ue4fest • 量産に耐えうるフローを模索 • SubstanceDesigner or Photoshop(アクション) 量産に向けて
  26. 26. #ue4fest#ue4fest 〇 実現が簡単 〇 タスクを外部化できる ✕ 調整パラメータを保存できない Photoshop
  27. 27. #ue4fest#ue4fest ✕ 実現可能かどうか不明 ? タスクを外部化できる 〇 調整パラメータを保存できる Substance Designer
  28. 28. #ue4fest#ue4fest Substance Designerのノード
  29. 29. #ue4fest#ue4fest • カラーを通常合成 陰影を薄くしつつ調整 • 色は必ずしも元と同じではない カラーの処理
  30. 30. #ue4fest#ue4fest • 決め影マップ • リムライトの出やすさマップ • 影の濃さマップ ↑ この3つ値をそれぞれRGBにまとめる (トゥーンマスクと呼んでいる) トゥーンマスクの処理
  31. 31. #ue4fest#ue4fest 複数の素材の合成 • 一枚の画像に複数の要素 • パラメータを個別に設定 • 素材ごとのマスクを作る必要がある
  32. 32. #ue4fest#ue4fest Substance Designerのノード • 素材の分離と合成の 処理を分けた • 素材のマスク Photoshopで作成
  33. 33. #ue4fest#ue4fest トゥーンマスクを再現
  34. 34. #ue4fest#ue4fest ゲーム中のマテリアル
  35. 35. #ue4fest#ue4fest INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ
  36. 36. #ue4fest#ue4fest • 反射モデル 地面の中に表示するモデル 描画順を変えて反射として表現していた • 反射モデルは削除 • PBRのリフレクション 反射モデル
  37. 37. #ue4fest#ue4fest • 要素が多い • UVアイランドが多い ⇒ライトマップは使えない 大きなモジュラーアセット ダンジョンを構成するメッシュの一例
  38. 38. #ue4fest#ue4fest • 頂点カラーでライティング 頂点カラーを乗算してライトのかわりにする • なるべく生かす 頂点カラー Maya:頂点カラーのみの表示 (ライティングを行わない表示)
  39. 39. #ue4fest#ue4fest • PBR化してリフレクションをコントロール • 旧作の頂点カラーを生かす マテリアルでコントロール マテリアルの設定
  40. 40. #ue4fest#ue4fest • マテリアル内でRGBからラフネスを作る • メタルは数値入力 マテリアルでPBR化
  41. 41. #ue4fest#ue4fest • Substance Designer Bitmap2Materialノード • 値を再調整したいので スタンドアロン版ではない • 必要に応じてノードを追加 Substance DesignerでPBR化
  42. 42. #ue4fest#ue4fest 背景マテリアル
  43. 43. #ue4fest#ue4fest • バトルのゲームデザインを大きく変えたいという 企画からの要望 背景が円柱状に抜ける処理
  44. 44. #ue4fest#ue4fest INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ
  45. 45. #ue4fest#ue4fest 輪郭線 • 深度や法線の差を検出して合成
  46. 46. #ue4fest#ue4fest 空想視 • 空想視(行動予測を可視化する機能) 背景/敵/味方の色を変更
  47. 47. #ue4fest#ue4fest • バトル背景の一部は亜空間表現 • ほかにも必殺技演出で流線背景など バトル中の背景の亜空間
  48. 48. #ue4fest#ue4fest INDEX ■グラフィックス キャラクターLook Dev 背景Look Dev ポストプロセス データ変換Tips ■その他の静的データ
  49. 49. #ue4fest#ue4fest • COLLADAシェーダー UE4でマテリアルエレメントを作れるデータは Phong or Lambert • COLLADAシェーダーはマテリアルとみなされない ※ ほかにはMetanlRayマテリアルも変換できない マテリアルを作れないファイル
  50. 50. #ue4fest#ue4fest • MELで全データをLambertに変換&書き出し • ls -type unknownをリスト化 • 『MI+テクスチャ名』のLambertを作成 • connectAttrで接続 モデルデータ変換
  51. 51. #ue4fest#ue4fest • 複数のコリジョンデータを持った一つのデータ • MELで別々に選択して書き出し (select "*_col"とか) データの命名規則がしっかりしているので助かった コリジョン
  52. 52. #ue4fest#ue4fest • Mayaの1単位が1メートル • UE4はMayaの1単位を1センチメートルとして扱う 単位系の違い
  53. 53. #ue4fest#ue4fest • 回転はスケーリング不要 • 位置を修正 シーンルートをスケールしてフリーズ(makeIdentity) • 移動量を修正 トランスフォームのキーの値をスケール スケーリングMEL(アニメ)
  54. 54. #ue4fest#ue4fest INDEX ■グラフィックス キャラクター 背景 ポストプロセス データ変換 ■その他の静的データ ■データベース的なもの ■特殊なもの →これのまとめ
  55. 55. #ue4fest#ue4fest • マテリアル&ポストプロセスが重要 • マテリアルはアーティストで(ほぼ)完結できる • イテレーションを回しやすく短期間で実現 (モデルに手を入れずに)UE4で絵を盛るには 1 アンリアルすごい
  56. 56. #ue4fest#ue4fest • とはいえアセットに手を入れないわけにはいかない • MELによる自動化 • Substance Designerによるプロシージャル編集 なんどでも調整できる UE4で絵を盛るには 2
  57. 57. #ue4fest#ue4fest INDEX ■グラフィックス ■その他の静的データ ■データベース的なもの ■DataTable ■DataAsset ■CallInEditor ■特殊なもの
  58. 58. #ue4fest#ue4fest • →例えばこういうやつ • 本プロジェクトでは この手のファイルが25種50個ほど存在 データベース的なもの
  59. 59. #ue4fest#ue4fest • 同じ形式の項目が大量に並んでいる • Excelで編集することが多い • 一覧性 • 一括編集 • VBA&マクロ その特徴
  60. 60. #ue4fest#ue4fest • DataTable • UObject&Factory • DataAsset どういう形式でアセット化するか
  61. 61. #ue4fest#ue4fest • 扱いが非常に簡単 • データを一覧できる • その名の通りテーブル状のデータ専用 • 痒いところに手が届かない場合がある • キーがName型のみ • レコード間にグループ関係があるケース とにかく簡単 DataTable
  62. 62. #ue4fest#ue4fest • Factoryをきちんと定義すれば色々できる • オブジェクトの構造を自由にでき、 関数として機能の追加もできる • 弊社ブログ(http://historia.co.jp/archives/1401/) • Factoryの定義がTHE 面倒 THE王道 UObject&Factory
  63. 63. #ue4fest#ue4fest • Factoryの定義を行わずに UObjectとしてのアセットを生成する • 実は「生成するだけ」のFactoryが エンジンに実装されている その簡易版 DataAsset
  64. 64. #ue4fest#ue4fest • まず、UDataAssetを継承したクラスを作る • 中身の変数/関数などはご自由に 注意:UDataAssetはBlueprintableではない。 Blueprintクラスでやるには・・・ ・Blueprintableな子クラスを作って使う ・UPrimaryDataAssetで代用 DataAssetのつかい方 1/3
  65. 65. #ue4fest#ue4fest DataAssetのつかい方 2/3 UAssetDataを継承したクラスの一覧 • ContentBrowserからDataAssetを作成しクラスを選ぶ
  66. 66. #ue4fest#ue4fest • いつものプロパティグリッドで編集できる DataAssetのつかい方 3/3 ここにExcelで作ったデータを 取り込みたい
  67. 67. #ue4fest#ue4fest • そんなものはない DataAssetとインポート
  68. 68. #ue4fest#ue4fest DataAssetとCallInEditor • CallInEditor指定の関数は ボタンとしてグリッドに表示される
  69. 69. #ue4fest#ue4fest DataAssetとCallInEditor • CallInEditor指定の関数は ボタンとしてグリッドに表示される C++ Blueprint
  70. 70. #ue4fest#ue4fest • DataTableの中身をいい感じに取り込む機能を DataAssetのCallInEditor関数として実装する DataTable-DataAsset方式
  71. 71. #ue4fest#ue4fest • データの構造化 • 配列/連想配列に詰め直す • レコードのグループ化 • 名前によるアセットの指定を参照に置換する • エラーチェック いい感じにする処理内容の例
  72. 72. #ue4fest#ue4fest • NPCのAI(?)にあたるデータ。行動条件表 グループ化の例 1キャラクター分のデータ
  73. 73. #ue4fest#ue4fest • UObjectLibraryを利用して探してくる • 動的ロードに使うやつ、エディタでも使える • http://api.unrealengine.com/JPN/Programming/Assets/AsyncLoading/ 名前→アセット参照への置換
  74. 74. #ue4fest#ue4fest • 真面目にやるならC++でクラスを定義、 DataTableに関わる部分を #if WITH_EDITORONLY_DATA でエディタ限定に • (パッケージにDataTableが入らないようにする) DataTable-DataAsset方式のコツ
  75. 75. #ue4fest#ue4fest データベース取り込みフロー CSV import DataTable UDataAsset Call-in-editor function データの整理・抽出
  76. 76. #ue4fest#ue4fest • データベース系アセットをどう作るか • DataTable, UObject+Factory, DataAsset • DataAssetの紹介 • 応用としてDataTableとの併用について データベースの再利用まとめ
  77. 77. #ue4fest#ue4fest INDEX ■グラフィックス ■その他の静的データ ■データベース ■スクリプト ■イベントスクリプト ■技動作スクリプト ■マップ
  78. 78. #ue4fest#ue4fest INDEX ■グラフィックス ■その他の静的データ ■データベース ■スクリプト ■イベントスクリプト ■技動作スクリプト ■マップ
  79. 79. #ue4fest#ue4fest • 各種イベントシーンの挙動を記述するデータ • 実行されるべき命令を並べたもの • 「台詞/文章を表示する」 • 「キャラクターを移動させる」 • 「アニメーションを再生する」 • etc. • RPG/アドベンチャーゲームで単に「スクリプト」と 言ったら多分コレのこと イベントスクリプト
  80. 80. #ue4fest#ue4fest • 文法はほぼC言語 • 関数定義 • 関数呼び出し • ローカル/グローバル変数 • 分岐 • 台詞等のテキストが埋め込まれている Caligula(PSVita)のイベントスクリプト
  81. 81. #ue4fest#ue4fest • 専用ツールを作成 (C# | フォームアプリケーション) • C言語風の構文を展開 • CSV形式の中間言語に変換 (これをExcelで編集する) • 埋め込まれたテキストは別のファイルに抽出 • さらにインポート処理で実行用の形式に その再利用
  82. 82. #ue4fest#ue4fest • 専用ツールを作成 (C# | フォームアプリケーション) • C言語風の構文を展開 • CSV形式の中間言語に変換 (これをExcelで編集する) • 埋め込まれたテキストは別のファイルに抽出 • さらにインポート処理で実行用の形式に その再利用
  83. 83. #ue4fest#ue4fest イベントスクリプト取り込みフロー C-style script CSV script UObject script custom-made tool import importText DataTable
  84. 84. #ue4fest#ue4fest イベントスクリプト取り込みフロー C-style script CSV script UObject script custom-made tool import importText DataTable Excelで編集する
  85. 85. #ue4fest#ue4fest • 専用アプリケーションによるデータ加工 • Excelでの編集 -- ここまで not Unreal -- • インポート処理で実行時の形式に仕上げる イベントスクリプトの再利用まとめ
  86. 86. #ue4fest#ue4fest INDEX ■グラフィックス ■その他の静的データ ■データベース ■スクリプト ■イベントスクリプト ■技動作スクリプト ■マップ
  87. 87. #ue4fest#ue4fest • その名の通り、技の動作を定義するデータ • 時間に沿って動作コマンドを並べたもの • アニメーション • サウンド・ビジュアルエフェクト • 攻撃判定 • 移動・回転 • etc. 技動作スクリプト
  88. 88. #ue4fest#ue4fest • ようは数字の列 • 一行で一つのコマンド • コマンドの種類 • タイミング • その他のパラメータ Caligula(PSVita)の技動作スクリプト
  89. 89. #ue4fest#ue4fest • 一旦、ほぼそのままの形 (数列)として インポートする • エディタ代わりの編集補助オブジェクトを作成 • AnimCompositeへ変換 その再利用
  90. 90. #ue4fest#ue4fest • 一旦、ほぼそのままの形 (数列)として インポートする • エディタ代わりの編集補助オブジェクトを作成 • AnimCompositeへ変換 その再利用
  91. 91. #ue4fest#ue4fest 編集補助オブジェクト 編集機能ボタン 出力データ (AnimComposite) 入力データ(数列)
  92. 92. #ue4fest#ue4fest 技動作スクリプトの再利用 CSV import UObject function Anim Composite UObject 編集補助オブジェクト 数列データ
  93. 93. #ue4fest#ue4fest • オブジェクトをエディタ代わりに • 最終的にAnimCompositeに変換、実行時に使用 技動作スクリプトのまとめ
  94. 94. #ue4fest#ue4fest INDEX ■グラフィックス ■その他の静的データ ■データベース的なもの ■スクリプト ■マップ
  95. 95. #ue4fest#ue4fest • 専用のマップエディタで作成されたもの • 各種配置情報を含む • マップチップ • ギミック • イベント発生用ボリューム • NPC • NPC移動ルート Caligula(PSVita)のマップ関連データ
  96. 96. #ue4fest#ue4fest • 配置データの吸い出し • マップエディタを改造、 扱いやすいデータ形式で出力させる。 • 配置データを元にActorを生成(UnrealEditor)、 Mapに配置する マップ関連データの再利用
  97. 97. #ue4fest#ue4fest マップ関連データの再利用 Misc. extract (map editor) Misc. import UObject Misc. Misc. Misc. Misc. Misc. Misc. Map UObject UObject UObject Actorとして配置 各種配置情報 整理・抽出したもの 文字列形式
  98. 98. #ue4fest#ue4fest • マップエディタ(C# | フォームアプリケーション)を 少し改造して利用 • UObjectアセットとして配置データを取り込み、 別のステップでレベルへの配置を行った マップデータ再利用まとめ
  99. 99. #ue4fest#ue4fest • NotUnrealなプロセスをけっこう使った • Excelでの編集 • C#アプリケーションでの加工 • 中間データ的なものを多用した • DataAssetという落としどころ • CallInEditorを用いたDataTableとの連携 その他の静的データ総括
  100. 100. #ue4fest#ue4fest 宣伝
  101. 101. #ue4fest#ue4fest • 2018年11月4日(日) • 映像屋さんのためのリアルタイムBG制作 ーリアルタイム超初心者からの脱却を目指してー [エレメントファクトリー] https://cgworld.jp/special/cgwcc2018/ CGWORLD 2018 クリエイティブカンファレンス
  102. 102. #ue4fest#ue4fest • プロ向け動画チュートリアルサービス https://plugs.jp/ • UE4シーン作成講座 for アーティスト plugs
  103. 103. #ue4fest#ue4fest ご清聴ありがとうございました

×