脱Unity！？ UE4でVR開発のここが変わった

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

はじめまして #ue4fest

です #ue4fest

コロプラといえば #ue4fest

VR #ue4fest

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

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

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

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

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

使ってみよう #ue4fest

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

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

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

今回の移植対象 #ue4fest

ムービー #ue4fest

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

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

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

#ue4fest

さあはじめよう #ue4fest

開発環境 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

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

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

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

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

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

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

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

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

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

約１か月後 #ue4fest

移植完了！ #ue4fest

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

第二章 背景制作 #ue4fest

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

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

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

背景制作スタート #ue4fest

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

背景完成 #ue4fest

#ue4fest

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【Tips】ポーズ拡張 #ue4fest

【Tips】ポーズ拡張 #ue4fest

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

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

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

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

制御用変数 #ue4fest

制御用変数 #ue4fest

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

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

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

遷移（思考→攻撃） 思考＆攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

遷移（思考→攻撃） 思考＆攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

遷移（思考→攻撃） 思考＆攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

遷移（攻撃→思考） 思考＆攻撃 サブステートマシン 思考 攻撃 #ue4fest ダメージ

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

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

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

#ue4fest

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

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

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

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

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

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

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

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

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

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

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

カプセルシャドウの設定方法 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

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

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

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

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

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

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

Sound Cue ランダム再生 #ue4fest

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

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

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

第五章 C++ vs Blueprint #ue4fest

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

#ue4fest

なるほど、わからん #ue4fest

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

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

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

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

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

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

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

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

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

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

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

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

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

#ue4fest

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

第六章 まとめ #ue4fest

成果 #ue4fest

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

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

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

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

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

使おう #ue4fest

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