#UE4CEDEC

最新モバイルゲームの実例から見るUE4のモバイル向け機能・Tipsを全部まるっとご紹介！

(CEDEC+KYUSHU 2017 追加版)Epic Games Japan

岡田和也 星野瑠美子

#UE4CEDEC

自己紹介

•岡田和也 (@pafuhana1213)• 株式会社カプコンでエンジン・ゲーム開発を経験し、

2016年にEpicGamesJapanにサポートエンジニアとして入社

•星野瑠美子• オートデスク株式会社でソフトウェアエンジニアとして

Maya、Softimage等の技術コンサルティング、サポートを担当2016年7月にEpicGamesJapanに入社

#UE4CEDEC

お品書き

• モバイルゲーム市場におけるUE4の現状

• UE4におけるモバイル向けの機能・Tips紹介

• モバイル向けの最新レンダリング機能の紹介

担当：岡田

担当：星野

#UE4CEDEC

モバイルゲーム市場におけるUE4の現状

#UE4CEDEC

Hit ～Heros of Incredible Tales ～• グローバル版が配信から19日で累計300万DL突破

• 国内でも2016年末にリリースされ、先月に国内ユーザ数が300万を突破

LineageⅡ Revolution• サービス開始から30日間で約200億円の売上• 8/23（水）に国内でもサービス開始！！！

UE4製モバイルタイトルが国内外で大ヒット！

#UE4CEDEC

【リネージュ2 レボリューション】トレーラームービー_30sec_ver.https://youtu.be/DCRYuSDjfmM

#UE4CEDEC

さらに、開発中の注目タイトルも多数！

• BladeⅡ The Return of The Evil

• Oceanhom 2 : Knights of the Lost Realm

#UE4CEDEC

さらにさらに、 Epic Games もモバイルタイトルを開発中！

Battle Breakers• 戦術ロールプレイゲーム

• 2.5Dアニメーション

• モバイル・PC間のクロスプラットフォームプレイ

Battle Breakers – Gameplay Trailer -https://youtu.be/6qr0-d3eDrc

#UE4CEDEC

NEW!ガンバリオン様よりUE4製モバイルタイトルが発表！

修羅道 SHURADOhttp://ganbarion.com/jp/shurado/

事前登録受付中！

#UE4CEDEC

これらのプロジェクトにおける知見や

頂いた要望を満たすための機能が

エンジンにドンドン追加されていってます！

#UE4CEDEC

UE4 + モバイルの波が来てる…！

#UE4CEDEC

LineageⅡ：R 23日国内開始早くも行列が…

#UE4CEDEC

UE4におけるモバイル向けの機能・Tips紹介

～How to ride this big wave～

#UE4CEDEC

アウトライン

• PC開発環境とモバイル開発環境の違い

• モバイル向けの最新レンダリング機能の紹介

• モバイル開発でよく使うあの機能、UE4のどこにあるの？

• UE4.18におけるモバイルに関する更新

• モバイル開発あるある問題とその対策・Tips紹介

#UE4CEDEC

PC開発環境とモバイル開発環境の違い

#UE4CEDEC

UE4の各機能のモバイル対応状況

PC・コンソール開発で使用する機能の殆どはモバイルでも問題なく使うことができます！

対象となるハードの関係で一部の機能（特に描画機能）には制限が幾つか…

• 今後のモバイルデバイスの発展・普及に期待！

#UE4CEDEC

実際の開発タイトルでは…

LineageⅡ RevolutionではUE4の標準機能を使って開発されています！

#UE4CEDEC

Blueprintを使ったビジュアルスクリプティング

#UE4CEDEC

ノードベースのMaterialエディタ

#UE4CEDEC

UMGによるゲーム内UIの作成

#UE4CEDEC

シネマティックカットシーンツール 「シーケンサー」

#UE4CEDEC

その他にも便利な機能が多数！

•強力なライティング機能

• ランドスケープによる地形（テレイン）作成

• AI作成用のビヘイビアツリー機能などなど…

非エンジニアが 「自分のアイデア」を「自分で実装」できる環境を提供！

#UE4CEDEC

イテレーションを早く回すために…

UE4の理念「プランナー・アーティストに力を」

• エンジニアの手を借りなくても、自由に製作・調整作業ができる！

• エンジニアは自身の作業に専念できる！

開発サイクルが短いモバイル開発においてはこのイテレーションの早さは特に効果的です！

#UE4CEDEC

ここまでのまとめ

• UE4で用意されている機能はモバイル開発でも使えます！

•非エンジニアが 「自分のアイデア」を「自分で実装」できる！• 開発サイクルが短いモバイル開発では特に効果的！

#UE4CEDEC

PC開発環境とモバイル開発環境の違い

おわり

#UE4CEDEC

アウトライン

• PC開発環境とモバイル開発環境の違い

• モバイル向けの最新レンダリング機能の紹介

• モバイル開発でよく使うあの機能、UE4のどこにあるの？

• UE4.18におけるモバイルに関する更新

• モバイル開発あるある問題とその対策・Tips紹介

#UE4CEDEC

モバイル向けの最新レンダリング機能の紹介

#UE4CEDEC

UE4のレンダラ

• Deferred Renderer

• Clusterd Forward Renderer for VR

• Mobile Forward Renderer• マテリアルシステムはデスクトップと同じ物理ベース

• Feature Level ES 2, Feature Level ES 3.1

#UE4CEDEC

モバイルレンダラの特徴

• フォワードレンダラ

• マテリアルシステムはデスクトップと同じ物理ベース

• フルHDRライティングサポート

ライティングやシャドウポストプロセスで一部機能が

制限されていた

機能強化中

#UE4CEDEC

Feature Level ES 2

• OpenGL ES 2.0からES 3.1までの端末をターゲット

•互換性重視

• テクスチャサンプル数が8に制限

#UE4CEDEC

Feature Level ES 3.1

•ハイエンドモバイル向け設定• Open GL ES 3.1

• Vulkan(Android)

• Metal(iOS)

•パフォーマンス・表現の幅が向上

• テクスチャサンプル数が16に増加

#UE4CEDEC

ProtoStarデモ

• SamsungとEpicの共同開発

• ターゲット：Galaxy S7• Vulkan API使用

• 1080p、30fps

#UE4CEDEC

インタラクティブな反射表現

•反射を行う平面を指定

• リフレクションキャプチャによってリアルタイムに反射を表現

#UE4CEDEC

リフラクション(屈折)

•水やガラスといった光が屈折するマテリアル表現

• マテリアルで屈折度などのパラメータを指定

#UE4CEDEC

GPUパーティクル

•パーティクル位置、速度をGPUで計算

• ベクターフィールドにも対応

注意：コリジョンは未サポート

#UE4CEDEC

ダイナミックな影描画

•動的オブジェクトに対する影の描画

• ディレクショナルライト(平行光源)がシーンに必要

2つの手法• 変調シャドウ

• Cascade Shadow Map

#UE4CEDEC

動的オブジェクトの影: 変調シャドウ

固定平行光源に対する影

影の形状を周りに投影

利点• 投影する時の色を指定できる

• 処理が軽い

欠点• シーンに焼きこまれた影とは馴染まない

#UE4CEDEC

動的オブジェクトの影: Cascade Shadow Map＋ 固定平行光源

•事前計算による影と、動的オブジェクトの影が馴染むようにブレンド

• ProtoStarデモもこの組み合わせを使用！

#UE4CEDEC

動的オブジェクトの影: Cascade Shadow Map＋ 固定平行光源

•事前計算による影と、動的オブジェクトの影が馴染むようにブレンド

• ProtoStarデモもこの組み合わせを使用！

#UE4CEDEC

完全にダイナミックな影: Cascade Shadow Map ＋ 動的平行光源ライティングをすべて動的に処理

利点

• ランタイム実行時にライト方向、強さなどを変更可能

• 事前計算のライティングデータがない• メモリ使用量とパッケージサイズの削減

欠点

• すべてのシーン内オブジェクトに対して影計算を行うため描画コストが増加

#UE4CEDEC

動的ポイントライトによるライティング

• プロジェクト設定のMax Movable Point Light(動的ライト最大数)を0より大きくすることで使用可能

•使用用途例：爆発や閃光といった、エフェクトのアクセント• 影は落ちない

• シェーダが追加生成されることに注意

#UE4CEDEC

ライティングチャンネル

•同じチャンネルのオブジェクトにのみ選択的にライトを適用できる

• モバイルでは4.13からサポート

#UE4CEDEC

モバイルで利用できるポストプロセスエフェクト

• ブルーム

• トーンマッパー

•被写界深度

•自動露光

• ポストプロセスマテリアル

(カスタムポストプロセス)

• アンチエイリアスなど

#UE4CEDEC

ポストプロセス: 高品質被写界深度

#UE4CEDEC

ポストプロセス: 映画的トーンマッパー

• アーティスティックな表現が可能なカラーグレーディング効果

#UE4CEDEC

ポストプロセス:ポストプロセスマテリアル

• ノードベースのマテリアルエディタで新しいポストプロセスエフェクトを作成可能

#UE4CEDEC

ポストプロセス: カスタムデプス

•指定したオブジェクトを独自の深度バッファに描画

• カスタムエフェクト例• アウトライン表示

• 他のオブジェクトで隠されたメッシュの描画

#UE4CEDEC

ポストプロセス: カスタムステンシル

• カスタムデプスの拡張のようなもの• 書き込む値を指定可能

• カスタムエフェクト例：色指定付きアウトライン表示など

#UE4CEDEC

モバイル向けの最新レンダリング機能まとめ

•ハイエンド向けのES3.1設定の開発が可能に

•機能追加が進んでいて、リッチなグラフィックをモバイルでも実現できます！• 反射

• リアルタイムの影

• GPUパーティクル

• ポストプロセスの強化

#UE4CEDEC

NEW!Desktop-Class Forward Renderer on iOS (実験段階)

既存のモバイルレンダラよりも高クオリティな表現が可能なForwardレンダラ

• UE4.18より実験的機能として追加

•サポート環境• iOS10.3以降, A9 以上

•推奨環境：• iOS11, A10X 以上

Wingnut AR ( WWDC 2017 )https://youtu.be/S14AVwaBF-Y

#UE4CEDEC

NEW!Desktop-Class Forward Renderer on iOS (実験段階)

プロジェクト設定→ Platforms→ iOS→ Rendering→ Metal Desktop-Forward Renderer

#UE4CEDEC

アウトライン

• PC開発環境とモバイル開発環境の違い

• モバイル向けの最新レンダリング機能の紹介

• モバイル開発でよく使うあの機能、UE4のどこにあるの？

• UE4.18におけるモバイルに関する更新

• モバイル開発あるある問題とその対策・Tips紹介

#UE4CEDEC

• モバイルプレビュー機能

• Android / iOS のプラットフォーム対応

• ゲーム内広告・アナリティクス

• コンテンツアップデート

• その他

モバイル開発でよく使うあの機能 in UE4

#UE4CEDEC

モバイルプレビュー機能

モバイル用レンダラをエミュレートしエディタ上で描画結果を確認

• エディタを再起動することなくツールバーから簡単に切替可能

• OpenGL ES3.1, Vulkan, Metalに対応済

公式ドキュメント：モバイルプレビュア

#UE4CEDEC

New! Improvements to "Device Mobile Preview“

特定のデバイスにおけるハード性能・設定をより細かくエミュレート• 画面解像度

• GPU機能

• デバイスプロファイル(後述) などなど

#UE4CEDEC

New! Improvements to "Device Mobile Preview“

対象デバイス設定は自由に編集・追加可能• Engine¥Content¥Editor¥PIEPreviewDeviceSpecs

エディタ設定のEnable mobile PIE with preview device launch options

#UE4CEDEC

注意！

最終的なチェックは必ず実機上で行うこと！• 特定の端末ではエディタと異なる描画結果になる可能性がある

モバイルプレビュー機能は「作業の方向性の確認」として使うことを推奨

なんかちゃうやん…

よっしゃ、調整完璧や！

#UE4CEDEC

• モバイルプレビュー機能

• Android / iOS のプラットフォーム対応

• ゲーム内広告

• コンテンツアップデート

• その他

モバイル開発でよく使うあの機能 in UE4

#UE4CEDEC

Android / iOS プラットフォーム対応

基本的な機能は全てエンジン側で実装済み！• Blueprintのノード、C++関数を提供プラットフォーム・ストアの違いを意識しなくてもいい作りに！

#UE4CEDEC

今回は話さないこと

各プラットフォームにおける登録・設定作業• Google Play Console ヘルプセンター

• iTunes Connect

UE4側での初期セットアップ・プラットフォームとの連携作業

• Androidクイックスタート

• iOS クイックスタート

#UE4CEDEC

ログイン・ログアウト

Blueprintのみで実装可能！（もちろん、C++でも）

#UE4CEDEC

アプリ内課金（In-App Purchase）

Blueprintのみで実装可能！（もちろん、C++でも）• 引数に指定するアイテムIDをプラットフォーム間で合わせておくと実装の共通化が楽！

公式ドキュメント：アプリ内課金の使用方法

#UE4CEDEC

リーダーボード

Blueprintのみで実装可能！（もちろん、C++でも）• 引数に指定するアイテムIDを

Android, iOSで合わせておくと以下略

公式ドキュメント：モバイルサービスのリーダーボードの使用方法

#UE4CEDEC

アチーブメント（実績）

Blueprintのみで実装可能！（もちろん、C++でも）• 引数に指定するアイテムIDを以下略

公式ドキュメント：モバイルサービスのアチーブメントの使用方法

#UE4CEDEC

プッシュ通知 (ローカル)

Blueprintのみで実装可能！（もちろん、C++でも）• バッジ対応は…現状はiOSのみ

#UE4CEDEC

プッシュ通知 (リモート)

ゲーム内で必要となる処理・イベントはBlueprint ・ C++で用意• リモート通知サービスとのやり取りは各サービスに対応したプラグイン内で行われる

#UE4CEDEC

UE4が標準対応しているリモート通知サービス

Android• Google Cloud Messaging (UE4.16)

• Firebaseコンソールで発行されるLegacy Server keyを指定する形式

iOS• Apple Push Notification Service

( Sandbox )

#UE4CEDEC

少し補足タイム（脱線とも言う）

#UE4CEDEC

Firebaseってなに？

Googleが運営しているバックエンドサービス

サポートしている機能• モバイルアナリティクス

• プッシュ通知

• パフォーマンス解析

• クラッシュレポート などなど

現時点のUE4では未対応…• UE4.19で Test Lab( クラウドベースのアプリテスト基盤 ) 機能には対応予定

#UE4CEDEC

今のUE4 (4.18) でFirebaseを使うには？

Firebase C++ SDKを自力インテグレートする• クラウドメッセージ機能を移植した事例があるが…

「Ultimate Mobile Kit Firebase」を使う• マーケットプレイスにて 174.99ドルで販売中

• 最新バージョンへの対応が非常に早い

• 全ソースコード付き

#UE4CEDEC

マーケットプレイスのアセットの利用規約について

• すべて商用利用・改変可能

•利用・共有範囲について• 購入者（個人・会社）が所属する全プロジェクトで利用可能

• 購入者の所属プロジェクトに関わる開発者・会社間で共有可能

• その他• 著作権に関する問題はEpicGames内でレビュー済み

• 記載がない限り、権利表記は不要 （表記すると製作者は嬉しいので是非！）

•公式サイトマーケットプレイス FAQページ

#UE4CEDEC

脱線おわり

#UE4CEDEC

• モバイルプレビュー機能

• Android / iOS のプラットフォーム対応

• ゲーム内広告・アナリティクス

• コンテンツアップデート

• その他

モバイル開発でよく使うあの機能 in UE4

#UE4CEDEC

バナー広告

Blueprintのみで実装可能！（もちろん、C++でも）

公式ドキュメント：インゲーム広告の使用方法

え、私の給料少なすぎ！？

話題のスマホRPGが・・・

#UE4CEDEC

インターステイシャル広告 （全面広告）

Blueprintのみで実装可能！（もちろん、C++でも）• ただし、Androidのみ（iOSは未対応）

ダウンロードなう！

#UE4CEDEC

動画広告（ Rewarded Video ）

残念ながら未対応…• みなさまの熱いリクエストをお待ちしております！

動画見ると30コインGet!

#UE4CEDEC

広告表示用プラグインの紹介

Universal Mobile Ads （149.99ドル）• 各広告タイプにAndroid / iOS 両対応

• 最新バージョンへの対応が非常に早い

• 全ソースコード付き

#UE4CEDEC

インゲーム アナリティクス （解析ツール）

ゲーム内で必要となる処理・イベントはBlueprint ・ C++で用意• サービスとのやり取りは各サービスに対応したプラグイン内で行われる

公式ドキュメントブループリントアナリティクスプラグイン

#UE4CEDEC

UE4が標準対応しているサービス

• Flurry• https://developer.yahoo.com/analytics/

• UE4公式ドキュメントの解説ページ

• Apsalar• https://apsalar.com/

• UE4公式ドキュメントの解説ページ

• Adjust• https://www.adjust.com/

#UE4CEDEC

マーケットプレイスで販売されているアセット

• Google Analytics Provider (54.99ドル)

• GameAnalytics (無料）

• Chartboost Plugin (無料)

• Ultimate Mobile Kit Firebase (174.99ドル)

#UE4CEDEC

• モバイルプレビュー機能

• Android / iOS のプラットフォーム対応

• ゲーム内広告・アナリティクス

• コンテンツアップデート

• その他

モバイル開発でよく使うあの機能 in UE4

#UE4CEDEC

コンテンツの追加・更新について

運営型ゲームにおいてコンテンツアップデートに掛かるコストは重要！

アセット間の依存関係DLサイズによる負荷人 / 時間的コスト

#UE4CEDEC

まず結論から

プロジェクト・更新内容に適した作業フローを柔軟に構築可能です• 各パッケージタイプ (Release, Patch, DLC )を組み合わせる形

プロジェクト内の開発者の大半は を気にする必要ありません• 通常通りの、アセットベースのリソース管理で問題ありませんコンテンツ開発中にパッケージをビルド・DL・解凍する必要はありません

• ユーザにコンテンツを配信するためにパッケージを作る人とDLC内のアセットを間接参照する人 だけ気にして下さい

#UE4CEDEC

まず結論から

パッケージの作成・インストールは、専用ツール・機能を用意済みです• Project Launcher, Http Chunk Installer

• モバイルパッケージングウィザード, Mobile Patch Utility

Battle Breakersにおける実績• 海外の一部地域にて配信中( 約半年 )

• ストアを介さずに新キャラクターの追加を実現済み

#UE4CEDEC

UE4におけるパッケージの種類

Release (本体)

1.0 1.1

Patch （差分・上書）

1.2

1.0 to 1.1

1.1 to 1.2

1.0 to 1.2

DLC (差分・拡張)

1.2 +

DLC a1.0

#UE4CEDEC

よくあるユースケース

新キャラクターを追加したい！

#UE4CEDEC

Releaseの場合

•作るの簡単！アセット間の依存関係問題もなし！

• ストアにアップロードする必要あり

•大量のダウンロードをユーザに強制

1.0 1.1

1000MB ダウンロード発生！

#UE4CEDEC

Patchの場合

•作るの簡単！アセット間の依存関係問題もなし！

• コンテンツアップデートの場合、ストアを経由する必要なし！

•必要に応じた最小限のダウンロード

1MBだけダウンロード

1.0 1.0.11.0 to 1.1

#UE4CEDEC

さらにキャラクタを追加する場合

Patch に対して Patchを適用することはできません

1.0.1 1.0.21.0.1 to 1.2

#UE4CEDEC

さらにキャラクタを追加する場合

前回のPatchを含むPatchをReleaseに適用

1.0 1.0.21.0 to 1.2

Patchを含んだReleaseに差し替え

1.0 1.2

#UE4CEDEC

DLCの場合

• コンテンツアップデートの場合、ストアを経由する必要なし！

•必要に応じた、最小限のダウンロード

• より自由度の高い作業フローを構築可能！

1.0 1.0 + DLC a1.0

DLC a1.0

#UE4CEDEC

DLCの注意点

「Release が持つアセット」から「DLCが持つアセット」 をハード（直接）参照することはできません

Asset Registryを使ってDLCが持つアセットをソフト（間接）参照する！

#UE4CEDEC

Asset Registryさん

はありますか？

あるよ～どうぞ！やった！

ないよ～

こんなイメージ

ダウンロード！

公式ドキュメントアセットの参照

公式ドキュメントアセットレジストリ

#UE4CEDEC

各パッケージの利点・欠点を把握し

各プロジェクトにとって適切な手法を選びましょう！

#UE4CEDEC

Release, Patch, DLCを作るには？

Project Launcherを使う！

#UE4CEDEC

Project Launcher

Profile (パッケージング設定) を作成• 対象となるレベル・バージョン情報 などなど

アセット間の依存関係はこのツールが全て解決• 指定したレベルに紐づくアセットのみをパッケージに

Patch( DLC ) の作成で必要となる、Releaseとの差分関係もこのツールが全て解決

• 指定バージョンから変更・追加したアセットのみをパッケージに

#UE4CEDEC

Release, Patch, DLCをインストールするには？

Http Chunk Installerにおまかせ！• Release, Patch, DLC全てに対応

• 必要に応じて、ゲームプレイ中にバックグランドでダウンロード・インストール可能

残念ながら、ドキュメントがまだ用意されていません…• Battle Breakersにおける活用例が

UE4公式ブログにて後日紹介される予定です！

#UE4CEDEC

初回リソースダウンロード

必要最小限におさめたパッケージを各ストアにアップし、

初回起動時に残りのコンテンツを別途ダウンロード

50MB

50MB

800MB

#UE4CEDEC

モバイルパッケージングウィザード

初回リソースダウンロード用のRelease、DLC用Profileの作成支援機能

• レベル・テクスチャフォーマットを指定するだけ

• 公式ドキュメントへのリンク

#UE4CEDEC

Mobile Patch Utility ノード

初回リソースのダウンロード・インストール用のBPを用意

用意されている機能、かなり豊富です！• ダウンロード・インストール開始

• ダウンロード進捗状況の取得

• 各処理の成功・失敗イベント

• 空き容量・Wifi接続の確認 などなど

公式ドキュメントMobile Patch Utilityノード

#UE4CEDEC

• モバイルプレビュー機能

• Android / iOS のプラットフォーム対応

• ゲーム内広告・アナリティクス

• コンテンツアップデート

• その他

モバイル開発でよく使うあの機能 in UE4

#UE4CEDEC

Webブラウザ

UMGで用意されているWeb Browserウィジェットを使うだけ！

#UE4CEDEC

キーボード

テキストボックスにタッチすると自動的に表示・操作可能に

UE4.16でバーチャルキーボード対応が追加 ( Androidのみ )• アプリケーション独自のカスタマイズが可能に

#UE4CEDEC

動画再生 ( Media Framework 2.0 )

Android / iOSに標準対応 （もちろん他のプラットフォームにも）• オーディオ再生 ・ストリーミング再生にも対応済

NEW! Media Framework 3.0をリリース

• 様々な面で大幅改善

• メモリコピー無しでのレンダリング（Android限定）

#UE4CEDEC

ここまでのまとめ

一昔前のUE4が弱かったモバイル開発特有の機能・サービスへの対応が整いました！

#UE4CEDEC

ここまでのまとめ

一昔前のUE4が弱かったモバイル開発特有の機能・サービスへの対応が整いました！

• モバイルプレビュー機能

#UE4CEDEC

ここまでのまとめ

一昔前のUE4が弱かったモバイル開発特有の機能・サービスへの対応が整いました！

• モバイルプレビュー機能

•各プラットフォーム対応

#UE4CEDEC

ここまでのまとめ

一昔前のUE4が弱かったモバイル開発特有の機能・サービスへの対応が整いました！

• モバイルプレビュー機能

•各プラットフォーム対応

• ゲーム内広告・アナリティクス

#UE4CEDEC

ここまでのまとめ

一昔前のUE4が弱かったモバイル開発特有の機能・サービスへの対応が整いました！

• モバイルプレビュー機能

•各プラットフォーム対応

• ゲーム内広告・アナリティクス

• コンテンツアップデート

#UE4CEDEC

ここまでのまとめ

一昔前のUE4が弱かったモバイル開発特有の機能・サービスへの対応が整いました！

• モバイルプレビュー機能

•各プラットフォーム対応

• ゲーム内広告・アナリティクス

• コンテンツアップデート

• その他の痒い所への対応

#UE4CEDEC

アウトライン

• PC開発環境とモバイル開発環境の違い

• モバイル向けの最新レンダリング機能の紹介

• モバイル開発でよく使うあの機能、UE4のどこにあるの？

• UE4.18におけるモバイルに関する更新

• モバイル開発あるある問題とその対策・Tips紹介

#UE4CEDEC

これまでに出てきた項目

• Desktop-Class Forward Renderer on iOS (実験段階)

• Improvements to "Device Mobile Preview“

• Media Framework 3.0

#UE4CEDEC

Apple ARKit iOS 11 Support

iOS11のサポート• 実行ファイルが64bitのみに

• Xcode9 に移行

ARKitの正式サポート• 実験段階のサポートだった4.17時点から大幅に変更・改良• パススルーカメラのロバスト性向上

• パフォーマンス・精度の向上

#UE4CEDEC

Google ARCore Developer Preview Support

Google AR Coreの開発者向けプレビュー版への正式対応

• 実験段階のサポートだった4.17時点から変更・改良• パススルーカメラの操作性向上など

現時点での正式対応デバイス• Google Pixel and Pixel XL

• Samsung Galaxy S8

未サポート端末で動かす方法（自己責任）

#UE4CEDEC

Apple ARKit / Google ARCoreを試すには

1. Apple ARKit / Google ARCoreプラグインを有効に

2. プロジェクト設定のStart in ARを有効に

3. CameraComponentを持つPawnをレベル上に配置

4.18リリースノートにてサンプルプロジェクトを公開中

#UE4CEDEC

Gradle Enabled by Default for Android

新しいビルドシステムである Gradle がデフォルトで有効に

• 従来の Ant の利用は非推奨に

#UE4CEDEC

Android Camera Plugin

前面・背面カメラへのアクセスが可能に• Android Camera Playerプラグイン

• 有効にすると、プロジェクト設定にカメラ使用のパーミッションが追加

#UE4CEDEC

Add Android cpu stats (stat AndroidCPU)

CPUのコア周波数・コア使用率を表示• 更新間隔は変更可能

CVar 'Android.CPUStatsUpdateRate‘

#UE4CEDEC

Simplified iOS certificates and signing when using Remote Toolchain from PC

WindowsからMacでリモートビルドする際、

Mac側での証明書の作成・インストールが

不要になりました！

#UE4CEDEC

BPプロジェクトのiOSビルドフロー

証明書作成(cer, p12)

証明書・プロビジョニングをUE4エディタで設定

+IPA作成

プロビジョニング作成(.mobileprovision)

or

#UE4CEDEC

BPプロジェクトの場合

Apple Developer Programに登録済みならWindowsのみでiOS開発が可能！

#UE4CEDEC

C++プロジェクトの場合

Macは必須• Xcodeでビルドする必要があるため

おすすめのフロー開発 ：Windowsビルド ：Macでリモートビルド

#UE4CEDEC

C++プロジェクトのiOSビルドフロー( UE4.17以前 )

証明書作成・インストール

証明書・プロビジョニング設定

プロビジョニング作成 リモートビルド

#UE4CEDEC

UE4.17以前の問題点

Mac上で操作を行う必要がある

•初期の環境構築コストの増大• Macの追加購入時

• 新規プロジェクトの開始時

• そもそも、ビルドマシンにしているMacは基本的に放置しておきたい！

証明書の作成・インストール

#UE4CEDEC

UE4.18からは…C++プロジェクトでもWindows上で作業が完結！（ビルドマシンとしてのMacは必須）

#UE4CEDEC

C++プロジェクトのiOSビルドフロー( UE4.18 )

証明書作成

証明書・プロビジョニング設定

プロビジョニング作成 リモートビルド

#UE4CEDEC

UE4.17以前 UE4.18

WindowsからMacでリモートビルドする際、

Mac側での証明書の作成・インストールが

不要になりました！

Simplified iOS certificates and signing when using Remote Toolchain from PC

#UE4CEDEC

モバイル以外の更新も沢山！

UE4.18 リリースノート

Volumetric Lightmaps Clothing Tool

#UE4CEDEC

アウトライン

• PC開発環境とモバイル開発環境の違い

• モバイル向けの最新レンダリング機能の紹介

• モバイル開発でよく使うあの機能、UE4のどこにあるの？

• UE4.18におけるモバイルに関する更新

• モバイル開発あるある問題とその対策・Tips紹介

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

#UE4CEDEC

モバイル開発における大きな悩みの一つ

ユーザに注目されるよう、よりハイクオリティ・高グラフィックに…！

VSより多くの人に遊んでもらえるよう、様々な端末・スペックに対応…！

VS何故かいつもスケジュールに余裕がない…

#UE4CEDEC

なので

各端末・スペックに応じて

適切な設定・調整を

より簡単かつ効率的に行う必要があります

UE4にはそれを支援する機能が用意されています！

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

• デバイスプロファイル

• Feature Level Switch / Quality Switch

• UMGの解像度別対応

#UE4CEDEC

デバイスプロファイル

GPU, SoC, デバイスモデル別のプリセット毎に各種パラメータ・設定を調整可能

• CVar( Console Variables )

• Texture LOD Group

#UE4CEDEC

CVar ( Console Variables )

各機能の設定・クオリティを調整

例えば• 解像度のスケーリング係数

• 各ポストプロセスのクオリティ

• ネットワーク同期回数の上限設定

• デバッグ表示のONOFF

#UE4CEDEC

CVarのリスト・検索ページ

エディタから開くことが可能

#UE4CEDEC

Texture LOD Group

テクスチャのLOD( MipMap )の設定をグループ毎に一括変更

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

• デバイスプロファイル

• Feature Level Switch / Quality Switch

• UMGの解像度別対応

#UE4CEDEC

Feature/Quality Level に応じたマテリアル最適化

Feature / Quality Level 毎に異なるマテリアルを組むことが可能

• Feature Level

• Quality Level• Low, Medium, Highの 3段階

#UE4CEDEC

注意

マテリアルに配置されたテクスチャはゲーム内での使用・未使用問わず cookされます( =パッケージに含まれます )

全てパッケージに含まれる!

#UE4CEDEC

Quality Switchの落とし穴

各Quality Levelにおけるシェーダが「全て」メモリに載ります• 使用していない Quality Levelのシェーダは載せない設定があるけど…

シェーダのロード時間は改善されないので注意

#UE4CEDEC

Feature / Quality Level Switchを使う際は

Switchによる処理分けが本当に必要なのか要検討• プロファイルして、その判断が適切か確認！

• デバイスプロファイルによる調整では不十分なのか？

落とし穴を理解した上で、運用フローを構築する！• レギュレーションの策定

• 定期的なチェック作業

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

• デバイスプロファイル

• Feature Level Switch / Quality Switch

• UMGの解像度別対応

#UE4CEDEC

解像度に応じたUIの調整機能

DPIスケーリング• 解像度に応じた自動スケーリングサポート

• カーブを編集することでスケーリングを調整

アンカー• 解像度変更時の配置・ストレッチングのルールを制御

• 用意されたプリセット or カスタマイズ

#UE4CEDEC

エディタ上でのスクリーンサイズ設定

代表的なデバイスの解像度に応じたプリセットを用意 ( 縦・横両対応 )

• 特殊デバイス向けに解像度の指定も可能

#UE4CEDEC

4.17から

ドラッグで動かせて

可視化されるように！

超わかりやすい！

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

• デバイスプロファイル• 各ハードに応じたプリセット毎に各種パラメータ・設定を調整

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

• デバイスプロファイル• 各ハードに応じたプリセット毎に各種パラメータ・設定を調整

• Feature Level Switch / Quality Switch• 端末・スペック・設定に応じたマテリアル調整

#UE4CEDEC

端末・スペックに応じた設定・調整をするには？

• デバイスプロファイル• 各ハードに応じたプリセット毎に各種パラメータ・設定を調整

• Feature Level Switch / Quality Switch• 端末・スペック・設定に応じたマテリアル調整

• UMGの解像度別対応• DPIスケーリング, アンカー

• スクリーンサイズ

#UE4CEDEC

バッテリー消費・発熱を抑えたい！

#UE4CEDEC

バッテリー消費・発熱を無視すると…

コンテンツの寿命を大きく縮めることに…！

例えば

• ユーザの継続率への影響

•熱によりパフォーマンスが低下し…という悪循環

#UE4CEDEC

バッテリー消費・発熱問題を解決するには？

•端末・スペックに応じた設定・調整を行う

• コンテンツのクオリティを落とさずにパフォーマンスを改善・維持する最適化方法を、

？調査し、選択する

#UE4CEDEC

大前提

「最適化」は「コンテンツのクオリティを落とすこと」 ではない

適切なプロファイリングを行い、

どんな対応をするか選択しましょう！

#UE4CEDEC

適切なプロファイルのやり方

[CEDEC2017] UE4プロファイリングツール総おさらい（グラフィクス編）https://www.slideshare.net/EpicGamesJapan/cedec2017-ue4

https://youtu.be/EtnXVj8D25M

#UE4CEDEC

各ハードウェア会社が提供しているツール

GPUプロファイリング• Apple : Xcode GL Debugger ( and Metal )

• Qualcomm : Adreno Profiler • 配布サイト, Answerhub 関連スレッド

• NVIDIA : Tegra Graphics Debugger• 配布サイト, Answerhub 関連スレッド

• ImgTec : PVRTune, PVRTrace • 公式解説動画

• ARM : Mali Graphics Debugger • UE4公式ブログにおける解説記事

#UE4CEDEC

各ハードウェア会社が提供しているツール

CPUプロファイリング• Apple : Instruments ( Time Profiler )

• NVIDIA : Tegra System Profiler• 配布サイト, 公式ドキュメント

• ARM : DS-5

#UE4CEDEC

とあるプロジェクトで選択されたバッテリー消費・発熱問題への対策を紹介

（モバイル特化版）

#UE4CEDEC

60fps上限ではなく、30fps上限にする

#UE4CEDEC

GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices

発熱を抑えるためのスロットリングが発生

#UE4CEDEC

GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices

#UE4CEDEC

60fps上限ではなく、30fps上限にする

高フレームレートを上限にした場合消費電力・温度向上により、フレームレートを不安定になる

• 「30fpsに抑えると，60fpsに対して40％も消費電力が低減できる」http://www.4gamer.net/games/999/G999902/20150307011/

UE4で30fps上限を設定するにはConsoleVariables 「 t.MaxFPS 30 」

#UE4CEDEC

GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices

30fps上限にしても、最終的には発熱がひどくなってくる…

#UE4CEDEC

バッテリー消費・発熱を考慮したゲームデザイン

動的なシーン（アクション部分など）の後に

静的なシーン（リザルトなど）」 を少し挟むことでデバイスを冷却！

t.MaxFPS 30 冷→ 熱 t.MaxFPS 10 熱→ 冷

#UE4CEDEC

描画解像度と UI解像度を分ける

#UE4CEDEC

描画：低解像度 UI：高解像度

スマホの画面は高解像度ですが、画面自体の大きさは小さい• 描画解像度を下げて、その分を演出強化した方が見栄えがいい（場合がある）

r.ScreenPercentage 10r.ScreenPercentage 100

#UE4CEDEC

UIのキャッシング

#UE4CEDEC

Invalidation PanelによるUMGの負荷軽減

•子要素をキャッシュすることで不要な描画・更新処理をキャッシュ（スキップ）

•子要素毎にキャッシュするか否かを指定することも可能• Is Volatileフラグ

あまり変化しない部分は積極的にInvalidation Panelでキャッシュする

• 変化する箇所はIs Volatileフラグを有効に

#UE4CEDEC

Battle Breakersにおける高速化事例

Stat slateによる計測

• Invalidation panel使用前• Processed : 573

• Invalidation panel使用後• Processed : 231

• Cached：342

２倍以上の高速化を実現！

#UE4CEDEC

Invalidation Panel用のデバッグ機能

• slate.InvalidationDebugging 1

• Green:キャッシュされたWidget

• Blue :子要素との相対的な位置関係もキャッシュ

• Dashed: キャッシュしないWidget

• Red: invalidated widgets

#UE4CEDEC

Retainer Boxによる描画負荷の分散

子要素をレンダーターゲットに描画することで、描画頻度・タイミングを変更可能

#UE4CEDEC

UMGに関する資料のご案内

猫でも分かるUMGhttps://www.slideshare.net/EpicGamesJapan/umg-80334310

#UE4CEDEC

本講演のまとめ

#UE4CEDEC

UE4における基本機能の「一部」をご紹介

•ほぼ全ての機能がモバイル開発でも使える！

•非エンジニアが 「自分のアイデア」を「自分で実装」できる

#UE4CEDEC

UE4のモバイルレンダラーはどこまでできる？

•様々な端末・ハードに対応済み• ES2.0 から ES3.1, Vulkan, Metalまで

•ハイエンドモバイル向けの機能を数多くご用意

#UE4CEDEC

モバイル開発で必須な機能が既に揃っている！

• モバイル特有の機能への対応状況

• モバイル開発向けの作業を支援する様々な機能

#UE4CEDEC

モバイルに関する最新情報をご紹介

• Apple ARKit, Google ARCoreへの正式対応

• BP / C++ プロジェクト共に、Windows上で作業が完結するように！

#UE4CEDEC

モバイル開発におけるTipsの「一部」をご紹介

• 「端末・スペック」と「バッテリー・発熱」を考慮したパフォーマンス設定・調整を支援する機能の紹介

•実際のプロジェクトで使われた最適化・改善テクニックをご紹介

#UE4CEDEC

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

本講演に関する質問はこちらからどうぞ！

E-mail ： kaz.okada@epicgames.com

Twitter : @pafuhana1213

展示ブースにEGJのスタッフがいますのでモバイル以外の質問も是非どうぞ！