#ue4fest

脱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 TouchHTC Vive

＋ライトマップ分散ビルド環境を構築

※複数のPCでビルドできますでしょうか？https://answers.unrealengine.com/questions/48568/index.html

#ue4fest

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

#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 After

#ue4fest

質感のクオリティアップ

▶簡単なマテリアルならアーティストでも作れる

▶ポイントを絞り目的にあったマテリアルを作成

#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

AnimatorAnimation Blueprint ≠

アニメーション機能をざっくり比較すると…

#ue4fest

アニメーション機能をざっくり比較すると…

Animation Blueprint

Animator

+

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/CapsuleShadows/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++はコンパイル前に全ファイルのヘッダ解析を行う

C++ vs Blueprint

Blueprint

C++

#ue4fest

C++ vs Blueprint

差分比較•ブループリントでも差分が見られるが目Grep

#ue4fest

C++ vs Blueprint

差分比較•ブループリントでも差分が見られるが目Grep

デバッグプリントがなくなっている

#ue4fest

C++ vs Blueprint

処理速度

ベクトル演算を10万回行うコードをC++とBlueprintで比較

処理時間

C++ 1mse以下

Blueprint 313msec

#ue4fest

Blueprint ⇒ C++ 自動変換

• Project Settings->Packaging->Blurprints->Blueprint Nativization MethodをInclusiveに変更

• ビルド時にブループリントをC++に変換

• 処理速度が313msecから3msec

ブループリントのネイティブ化https://docs.unrealengine.com/latest/JPN/Engine/Blueprints/TechnicalGuide/NativizingBlueprints/index.html

#ue4fest

結局どう使い分けるか？

#ue4fest

• 基礎となる部分はC++で実装

• C++を継承したブループリントをゲームに使用

• 安定した部分からC++に移行

AActor

AEnemyBase

BP_OrcBase

BP_OrcA BP_OrcB

C++

ブループリント

基本方針

#ue4fest

なぜこのような方針になったか

• 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

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