脱Unity!? UE4でVR開発のここが変わった

1.7K Views

October 12, 17

スライド概要

2017/10/8(日)に行われたUNREAL FEST EAST 2017における株式会社コロプラ様の講演「脱Unity!? UE4でVR開発のここが変わった」で使用された資料です。

https://unrealevent.eventcloudmix.com/



スライドに埋め込まれた動画に関しましては、以下のURLにてご確認ください。

https://youtu.be/b4y3ie360I4

profile-image

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

シェア

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

各ページのテキスト
1.

脱Unity!? UE4でVR開発のここが変わった 株式会社コロプラ #ue4fest

2.

はじめまして #ue4fest

3.

です #ue4fest

4.

コロプラといえば #ue4fest

5.

VR #ue4fest

6.

2014年から様々なVRゲームを作ってきました #ue4fest

7.

2014年から様々なVRゲームを作ってきました。 #ue4fest

8.

絵柄もポップなゲームが多い #ue4fest

9.

綺麗なグラフィックの VRゲームを作りたい!!!! #ue4fest

10.

「Unreal Engine」というエンジンは グラフィックが綺麗らしい VRゲームで使っている会社も多いらしい #ue4fest

11.

使ってみよう #ue4fest

12.

本日話すこと •Unityからの移植テスト •背景制作 •アニメーション実装 •VR向けの最適化 •C++ vs Blueprint •まとめ #ue4fest

13.

自己紹介 エンジニア 加田 健志(カダ タケシ) 2015年コロプラ入社 サウンドや通信周りを担当することが多い 主な開発タイトル 「TITAN SLAYER」 「Dig 4 Destruction」 「VR Tennis Online」など #ue4fest

14.

第一章 Unityからの移植テスト #ue4fest

15.

今回の移植対象 #ue4fest

16.

ムービー #ue4fest

17.

TITAN SLAYERの紹介 • 2017年4月リリース (Steam/Oculus/Vive Port) • 剣・銃・弓を使って 巨大なモンスターを倒す • 一人称アクションゲーム • Unity 5.5.0f3 • 体を目いっぱい使って戦う #ue4fest

18.

お客様の声 回避は慣れないと大きく動くため、 リアルに体力を使います。 夢中で戦ってたら太もも が筋肉痛になりました。 かんぜんにスクワットなので、 翌日太もも筋肉痛になります。 #ue4fest

19.

移植開始 目的 •グラフィックの向上 最初の方針 •Stage1のみ移植 •アセットの差し替えは最小限に •いろいろなUE4の機能を使ってみる #ue4fest

20.

#ue4fest

21.

さあはじめよう #ue4fest

22.

開発環境 CPU Intel Core i7 GPU NVIDIA GTX1060 メモリ 32GB/64GB ストレージ SSD VRヘッドセット Oculus Rift CV1 + Oculus Touch HTC Vive +ライトマップ分散ビルド環境を構築 #ue4fest ※複数のPCでビルドできますでしょうか? https://answers.unrealengine.com/questions/48568/index.html

23.

まずは サンプルプロジェクトを見てみる #ue4fest

24.

UE4はVRのサンプルが豊富 • MODING(MOD作成中) • ROBO RECALL • VR FUNHOUSE #ue4fest

25.

UE4はVRのサンプルが豊富 • Learn(ラーニング) • Showdown VR Demo #ue4fest

26.

UE4のVRサンプルを見てみる • New Project -> Virtual Reality #ue4fest

27.

レベルを開く • Content/VirtualRealityBP/Maps/MotionControllerMap #ue4fest

28.

レベルを開く • Content/VirtualRealityBP/Maps/MotionControllerMap #ue4fest

29.

VRモードでプレイ • VR Previewを選択 #ue4fest

30.

VRモードでプレイ テレポート移動機能 #ue4fest ものつかみ機能

31.

ほかにもサンプルが豊富 • エフェクト • ライティング • マテリアル • 水表現 • シーケンサー #ue4fest

32.

約1か月後 #ue4fest

33.

移植完了! #ue4fest

34.

あれ? •グラフィック上がった? #ue4fest

35.

第二章 背景制作 #ue4fest

36.

自己紹介 デザイナー 西村 博司(ニシムラ ヒロシ) 2015年コロプラ入社 背景アーティスト 前職でUE4に触れる機会があり今回は サポートとして参加 主な開発タイトル 「Dig 4 Destruction」 「Fly to KUMA」など #ue4fest

37.

「背景」は作り直し! クオリティ面で予想と違った! ▶近景にある背景モデルに質感がなくボケている ▶背景モデルはマージされ編集がやりづらい #ue4fest

38.

どうやって改善していくか ▶アンリアルは初めて ▶アンリアルの機能を使い背景作業を行いたい ▶アーティストでも簡単にクオリティを上げたい #ue4fest

39.

背景制作スタート #ue4fest

40.

編集しやすい環境作り 問題点 ▶マージされた背景モデルでは編集が出来ない Unreal機能 ▶BSPツールを使いレベルデザインを作成ステージ土台を作る ▶モジュラーアセットに作り直してステージ構築 #ue4fest

41.

BSPツール(ジオメトリブラシ) ▶レベル作成に使われる基本的なツール #ue4fest

42.

BSPツールでゲームプロトタイプ ▶配置後でも編集が可能 ▶埋めたり削ったりして形状を作成 ▶凝りすぎない程度にレベルを作成 #ue4fest

43.

こんな感じで作成しました #ue4fest

44.

ステージの骨組みが出来た ▶イテレーションが早くゲームプロトタイプを検証 ▶アーティスト作業が不要 #ue4fest

45.

モジュラーアセットへ変更 ▶マージされた背景モデルは編集がやりづらい #ue4fest

46.

モジュラーアセットとは ▶使い回しを前提にパーツ分けしたアセット ▶利便性を考えピボット位置やサイズのルールは決める #ue4fest

47.

モジュラーアセット作成工程 ▶BSPで作成したレベルを元にパーツをリスト化 ▶要素がわかる程度のダミーアセットを作成 BSP(ジオメトリブラシ) #ue4fest ダミーアセット 本アセット

48.

モジュラーアセット完成 #ue4fest

49.

ステージ構築がやりやすい ▶少ないアセットの組み合わせでステージを作成 ▶スナップ移動を使い効率よく配置 パーツを #ue4fest 合わせて 組み立てる

50.

質感のクオリティアップ 問題点 ▶近景にある背景モデルの質感がなくボケている Unreal機能 ▶マテリアルエディタを使ってディテールテクスチャを使用 #ue4fest

51.

ディテールテクスチャとは 使っていないマテリアル #ue4fest ディテールテクスチャ使用

52.

マテリルエディタを使う ▶ノードベースで作れるマテリアル 例:単純なマテリアル #ue4fest 例:複雑なマテリアル

53.

ディテールテクスチャの作成 ▶パレットから「DetailTexturing」ノードを加えて作成 #ue4fest

54.

ディテールテクスチャの比較 Before #ue4fest After

55.

質感のクオリティアップ ▶簡単なマテリアルならアーティストでも作れる ▶ポイントを絞り目的にあったマテリアルを作成 #ue4fest

56.

背景完成 #ue4fest

57.

#ue4fest

58.

背景制作まとめ ▶BSPを使ってステージの骨組みを作成 ▶モジュラーアセットで柔軟な背景構築 ▶マテリアルを作成してクオリティアップ アンリアルエンジンを使って解決! #ue4fest

59.

おまけ:VRエディタを使ってみた ▶実験的に実装されている「VRエディタ」が面白そう #ue4fest

60.

セッティング ▶エディタ設定「Enable VR Mode Auto-Entry」にチェック ▶ゴーグルを被るだけでVRエディタが起動 #ue4fest

61.

レイアウト ▶「コンテンツブラウザ」よりアセットを配置 ▶「複製」も簡単 #ue4fest

62.

ワールドスケール ▶シーン全体のスケールを変更 #ue4fest

63.

移動方法 ▶テレポート #ue4fest ▶手動

64.

ゲームプレイ ▶編集後そのままゲームをチェック #ue4fest

65.

VRエディタまとめ ▶編集内容を絞れば直感的に作業が行える ▶レベルエディタとVRエディタを使い分ける VR空間で作る 背景制作は楽しい体験! #ue4fest

66.

第三章 アニメーション実装 #ue4fest

67.

自己紹介 エンジニア 佐々木 尚人 (ササキ ナオト) 2016年に新卒としてコロプラに入社 TITAN SLAYERの開発を担当 主な担当範囲は 「描画周りの実装」と「ボスキャラ実装」 #ue4fest

68.

アニメーションについて話す理由 Unityと比べて最も差異が 大きかったため #ue4fest

69.

話の流れ アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

70.

話の流れ アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

71.

話の流れ アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

72.

話の流れ アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

73.

話の流れ アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

74.

最初の話 アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

75.

Animator もうちょっと遷移がごちゃついた図 ステートと遷移のルールに基づいてアニメーションを再生する #ue4fest

76.

Animation Blueprint Animation BlueprintもUnityと同等の機能を備えている #ue4fest

77.

Animation Blueprint アニメーションイベントの受け取りや変数の制御も Animation Blueprint内で行うことができる #ue4fest

78.

アニメーション機能をざっくり比較すると… Animation Blueprint #ue4fest ≠ Animator

79.

アニメーション機能をざっくり比較すると… Animator Animation Blueprint ≒ + Animator管理用 スクリプト #ue4fest

80.

次に話すこと アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

81.

完成イメージ図 完成した時のてつおモーションがどんな感じになるかのgif 待機→攻撃→ダメージ→待機→攻撃→待機 #ue4fest

82.

敵キャラアニメーションで実現したいこと 思考 アニメーション 終了 攻撃イベント 攻撃 #ue4fest アニメーション 終了 ダメージイベント ダメージ

83.

Unityアニメーションの設計 全てのステート 思考 アニメーション 終了 攻撃イベント 攻撃 #ue4fest アニメーション 終了 ダメージイベント ダメージ

84.

Unrealアニメーションの設計 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

85.

話の流れ アニメーション機能の説明 アニメーションの作り方の比較 Unreal Engineでの実装例 まとめ #ue4fest

86.

ステートマシン 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

87.

ステート編集 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

88.

ステート内部 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

89.

【Tips】ポーズ拡張 #ue4fest

90.

【Tips】ポーズ拡張 #ue4fest

91.

ステートマシン 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

92.

ステートマシン 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

93.

ステート 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

94.

サブステートマシン あ 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

95.

制御用変数 #ue4fest

96.

制御用変数 #ue4fest

97.

【Tips】Enumでのタイプ分け #ue4fest

98.

【Tips】Enumでのタイプ分け #ue4fest

99.

【Tips】Enumでのタイプ分け #ue4fest

100.

遷移(思考→攻撃) 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

101.

遷移(思考→攻撃) 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

102.

遷移(思考→攻撃) 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

103.

遷移(攻撃→思考) 思考&攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

104.

遷移(攻撃→思考) 思考&攻撃 サブステートマシン 思考 攻撃 アニメーションの残時間 0.05秒以下 #ue4fest ダメージ

105.

【Tips】遷移条件を場合分け #ue4fest

106.

話の流れ アニメーション機能の説明 アニメーションの設計の比較 Unreal Engineでの実装例 まとめ #ue4fest

107.

#ue4fest

108.

まとめ • UnityとUnrealでは使い方のクセが大幅に違う • UnrealのAnimationは高機能 移植の際は設計レベルでの見直しを! #ue4fest

109.

第四章 VR向けの最適化 #ue4fest

110.

VR最適化って何だろう? 処理負荷軽減 #ue4fest プレイヤー 没入感向上

111.

処理負荷軽減 •フレームレートの低下 → 酔いを誘発 •90FPS •問題が顕在化するのは開発終盤 パフォーマンスを最初から考慮した開発が大事 #ue4fest

112.

UE4×処理負荷軽減 •Forward Shading •カプセルシャドウ #ue4fest

113.

Forward Shading •UE4の標準はDeferred Shading •処理負荷軽減のためForward Shadingに変更 •レンダリングパフォーマンスが20~30%アップ #ue4fest

114.

Forward Shading Deferred Shading とは • Forward Shading • 古典的な描画方法 • ライトが増えれば負荷が増える • Deferred Shading • 近年主流の描画方法 • ライトが増えても負荷が増えない • G Buffer #ue4fest

115.

Forward Shading Project Settings > Engine > Rendering にある「Forward Shading」にチェックを入れて プロジェクトを開きなおす #ue4fest

116.

Forward Shading ※Forward Shadingでは一部の機能が制限される ※UE4公式 VR でフォワード レンダリングを使用する https://docs.unrealengine.com/latest/JPN/Engine/Performance/ForwardRenderer/index.html #ue4fest

117.

カプセルシャドウ 簡易的な影に切り替える ROBO RECALLでも使用 通常のシャドウ #ue4fest カプセルシャドウ

118.

カプセルシャドウの設定方法 Skeletal Mesh Editorを開く Lightingの「Shadow Physics Asset」に Physics Assetを設定 Physicsに設定されているものと同じでOK カプセルシャドウ用の別Physics Assetを 作成して影をカスタマイズ可能 #ue4fest

119.

カプセルシャドウの設定方法 Skeletal Mesh Componentの詳細 →Lighting ・Capsule Direct Shadow ・Capsule Indirect Shadow にチェック ※Lightingの項目は初期状態では畳まれている UE4公式 カプセル シャドウの概要 https://docs.unrealengine.com/latest/JPN/Engine/Rendering/LightingAndShadows/CapsuleSha dows/Overview/index.html #ue4fest

120.

処理負荷軽減の結果 100体のキャラクターを出して検証 GPU処理時間[ms] Deferred Sharding 22.29ms Forward Sharding 19.10ms Forward Sharding + カプセルシャドウ 11.00ms 大量のオブジェクトを表示する場合 Forward Sharding & カプセルシャドウの設定は有効 #ue4fest

121.

プレイヤー没入感向上 • キャラクターモデル • VR内の手 • サウンド #ue4fest

122.

VR用キャラクターモデルの作り方 近くに見えるものにコストを割く 「巨人と戦う」 → 顔よりも手先や足が近く見えやすい • 近づきやすい部分にポリゴン数を割く • 自分の手や武器もリッチに • ボーン数は少なめに プレイヤーの目線イメージ #ue4fest

123.

VR内の手 手モデルの表示位置を正確にしたい • モーションコントローラの位置に コントローラモデルを表示する • 実際の手の位置を比較 • Oculus Touch/Vive両方 ※Engine Content/VREditor/Devices にコントローラモデル #ue4fest

124.

サウンド • 聴覚から没入感を高める • 立体音響 ⇔ 2Dサウンド • 環境音 • BGM • Sound Cue #ue4fest

125.

Sound Cue • Sound Cue ≠ オーディオファイル • オーディオ再生方法の制御 • ランダム再生 • In – Loop再生 • ピッチ変更再生 • オーディオエフェクトの制御 • 減衰 • リバーブ #ue4fest

126.

Sound Cue ランダム再生 #ue4fest

127.

アニメーション×Sound フレームを指定して エフェクトやサウンドを制御できる #ue4fest

128.

アニメーション×Sound 足音が近づいてきている 足音もランダムに再生されている #ue4fest

129.

最適化まとめ • VRは処理負荷がシビア • 開発序盤からフレームレートを意識した開発 • UE4の機能を使って負荷削減 • プレイヤーの没入感を削がないつくり • 近くに見えるものにコストを割く • 手の挙動は慎重に調整 • サウンドにもこだわる #ue4fest

130.

第五章 C++ vs Blueprint #ue4fest

131.

UEを使うときにエンジニアが最初に気になること C++で書くべきか Blueprintで書くべきか #ue4fest

132.

#ue4fest

133.

なるほど、わからん #ue4fest

134.

しかし、UE4のチュートリアルは ほぼブループリントで作られている #ue4fest

135.

うまく使い分けて仲良くなろう #ue4fest

136.

C++ vs Blueprint ブループリント C++ 書き方 ノード コード 扱いやすさ 易しい 難しい 速い 遅い 差分比較 難しい 易しい 処理速度 遅い 速い ナレッジ数 多い 少ない コンパイル速度 #ue4fest

137.

C++ vs Blueprint 扱いやすさ •C++では簡単にNULLを踏んでEditorごと落ちる •ポインタを扱うときには注意が必要 #ue4fest

138.

C++ vs Blueprint コンパイル速度 •ブループリントは変更部分だけのコンパイル •C++はコンパイル前に全ファイルのヘッダ解析を行う Blueprint C++ #ue4fest

139.

C++ vs Blueprint 差分比較 •ブループリントでも差分が見られるが目Grep #ue4fest

140.

C++ vs Blueprint 差分比較 •ブループリントでも差分が見られるが目Grep #ue4fest デバッグプリントがなくなっている

141.

C++ vs Blueprint 処理速度 処理時間 C++ 1mse以下 Blueprint 313msec ベクトル演算を10万回行うコードをC++とBlueprintで比較 #ue4fest

142.

Blueprint ⇒ C++ 自動変換 • Project Settings->Packaging->Blurprints->Blueprint Nativization MethodをInclusiveに変更 • ビルド時にブループリントをC++に変換 • 処理速度が313msecから3msec ブループリントのネイティブ化 #ue4fest https://docs.unrealengine.com/latest/JPN/Engine/Blueprints/TechnicalGuide/NativizingBlueprints/index.html

143.

結局どう使い分けるか? #ue4fest

144.

基本方針 • 基礎となる部分はC++で実装 • C++を継承したブループリントをゲームに使用 • 安定した部分からC++に移行 AActor C++ AEnemyBase BP_OrcBase ブループリント BP_OrcA #ue4fest BP_OrcB

145.

なぜこのような方針になったか • C++のコンパイルが遅い →テスト実装はブループリント 安定してからC++化 • ブループリントの実行速度が遅い →複雑な計算はC++へ →複雑な計算ノードは他人が見てもわかりづらい • ブループリントで定義した変数・構造体はC++からはアクセスできない →極力C++で宣言 ブループリントからC++へ書き換えは大変 #ue4fest

146.

BlueprintのC++への移植 • ブループリントの関数をC++で使うとき • ノードを右クリックし 「Goto Definition」 • C++での定義ファイルが表示 #ue4fest

147.

#ue4fest

148.

C++まとめ • C++を使うには少しコツがいる • モックやテストはブループリントで行い 本番実装でC++へ • 基底クラスだけはC++で作っておく →C++の実装は空でもいい • ブループリントのC++変換機能も有効活用 #ue4fest

149.

第六章 まとめ #ue4fest

150.

成果 #ue4fest

151.

比較解説 • キャラクターの質感アップ • より恐怖を感じるように #ue4fest

152.

比較解説 • キャラクターの質感アップ • 金属もいい感じに #ue4fest

153.

比較解説 • エフェクト表現がグーンとアップ #ue4fest

154.

比較解説 • エフェクト表現がグーンとアップ #ue4fest

155.

まとめ 移植を通して分かったUE4の強み • 最初から用意されている機能が豊富 • エンジニアの手を借りずに実装可能 • ブループリント #ue4fest

156.

使おう #ue4fest

157.

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