1.
#UE4CEDEC
最新モバイルゲームの実例から見る
UE4のモバイル向け機能・Tipsを全部まるっとご紹介！
(CEDEC+KYUSHU 2017 追加版)
Epic Games Japan
岡田和也 星野瑠美子

2.
#UE4CEDEC
自己紹介
• 岡田和也 (@pafuhana1213)
• 株式会社カプコンでエンジン・ゲーム開発を経験し、
2016年にEpicGamesJapanにサポートエンジニアとして入社
• 星野瑠美子
• オートデスク株式会社でソフトウェアエンジニアとして
Maya、Softimage等の技術コンサルティング、サポートを担当
2016年7月にEpicGamesJapanに入社

3.
#UE4CEDEC
お品書き
• モバイルゲーム市場におけるUE4の現状
• UE4におけるモバイル向けの機能・Tips紹介
• モバイル向けの最新レンダリング機能の紹介
担当：岡田
担当：星野

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

5.
#UE4CEDEC
Hit ～Heros of Incredible Tales ～
• グローバル版が配信から19日で累計300万DL突破
• 国内でも2016年末にリリースされ、
先月に国内ユーザ数が300万を突破
LineageⅡ Revolution
• サービス開始から30日間で約200億円の売上
• 8/23（水）に国内でもサービス開始！！！
UE4製モバイルタイトルが国内外で大ヒット！

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

7.
#UE4CEDEC
さらに、開発中の注目タイトルも多数！
• BladeⅡ The Return of The Evil
• Oceanhom 2 : Knights of the Lost Realm

8.
#UE4CEDEC
さらにさらに、 Epic Games もモバイルタイトルを開発中！
Battle Breakers
• 戦術ロールプレイゲーム
• 2.5Dアニメーション
• モバイル・PC間の
クロスプラットフォームプレイ
Battle Breakers – Gameplay Trailer -
https://youtu.be/6qr0-d3eDrc

9.
#UE4CEDEC
NEW!
ガンバリオン様よりUE4製モバイルタイトルが発表！
修羅道 SHURADO
http://ganbarion.com/jp/shurado/
事前登録受付中！

10.
#UE4CEDEC
これらのプロジェクトにおける知見や
頂いた要望を満たすための機能が
エンジンにドンドン追加されていってます！

11.
#UE4CEDEC
UE4 + モバイルの波が来てる…！

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

13.
#UE4CEDEC
UE4におけるモバイル向けの機能・Tips紹介
～How to ride this big wave～

14.
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの？
• UE4.18における モバイルに関する更新
• モバイル開発あるある問題とその対策・Tips紹介

15.
#UE4CEDEC
PC開発環境とモバイル開発環境の違い

16.
#UE4CEDEC
UE4の各機能のモバイル対応状況
PC・コンソール開発で使用する機能の殆どは
モバイルでも問題なく使うことができます！
対象となるハードの関係で
一部の機能（特に描画機能）には制限が幾つか…
• 今後のモバイルデバイスの発展・普及に期待！

17.
#UE4CEDEC
実際の開発タイトルでは…
LineageⅡ Revolutionでは
UE4の標準機能を使って開発されています！

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

19.
#UE4CEDEC
ノードベースのMaterialエディタ

20.
#UE4CEDEC
UMGによるゲーム内UIの作成

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

22.
#UE4CEDEC
その他にも便利な機能が多数！
• 強力なライティング機能
• ランドスケープによる地形（テレイン）作成
• AI作成用のビヘイビアツリー機能 などなど…
非エンジニアが 「自分のアイデア」を「自分で実装」できる環境を提供！

23.
#UE4CEDEC
イテレーションを早く回すために…
UE4の理念
「プランナー・アーティストに力を」
• エンジニアの手を借りなくても、自由に製作・調整作業ができる！
• エンジニアは自身の作業に専念できる！
開発サイクルが短いモバイル開発においては
このイテレーションの早さは特に効果的です！

24.
#UE4CEDEC
ここまでのまとめ
• UE4で用意されている機能はモバイル開発でも使えます！
• 非エンジニアが 「自分のアイデア」を「自分で実装」できる！
• 開発サイクルが短いモバイル開発では特に効果的！

25.
#UE4CEDEC
PC開発環境とモバイル開発環境の違い
おわり

26.
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの？
• UE4.18における モバイルに関する更新
• モバイル開発あるある問題とその対策・Tips紹介

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

28.
#UE4CEDEC
UE4のレンダラ
• Deferred Renderer
• Clusterd Forward Renderer for VR
• Mobile Forward Renderer
• マテリアルシステムは
デスクトップと同じ物理ベース
• Feature Level ES 2, Feature Level ES 3.1

29.
#UE4CEDEC
モバイルレンダラの特徴
• フォワードレンダラ
• マテリアルシステムはデスクトップ
と同じ物理ベース
• フルHDRライティングサポート
ライティングやシャドウ
ポストプロセスで一部機能が
制限されていた
機能強化中

30.
#UE4CEDEC
Feature Level ES 2
• OpenGL ES 2.0からES 3.1までの端末をターゲット
• 互換性重視
• テクスチャサンプル数が8に制限

31.
#UE4CEDEC
Feature Level ES 3.1
• ハイエンドモバイル向け設定
• Open GL ES 3.1
• Vulkan(Android)
• Metal(iOS)
• パフォーマンス・表現の幅が向上
• テクスチャサンプル数が16に増加

32.
#UE4CEDEC
ProtoStarデモ
• SamsungとEpicの共同開発
• ターゲット：Galaxy S7
• Vulkan API使用
• 1080p、30fps

33.
#UE4CEDEC
インタラクティブな反射表現
• 反射を行う平面を指定
• リフレクションキャプチャによって
リアルタイムに反射を表現

34.
#UE4CEDEC
リフラクション(屈折)
• 水やガラスといった
光が屈折するマテリアル表現
• マテリアルで屈折度などの
パラメータを指定

35.
#UE4CEDEC
GPUパーティクル
• パーティクル位置、速度を
GPUで計算
• ベクターフィールドにも対応
注意：
コリジョンは未サポート

36.
#UE4CEDEC
ダイナミックな影描画
• 動的オブジェクトに対する
影の描画
• ディレクショナルライト(平行光源)が
シーンに必要
2つの手法
• 変調シャドウ
• Cascade Shadow Map

37.
#UE4CEDEC
動的オブジェクトの影:
変調シャドウ
固定平行光源に対する影
影の形状を周りに投影
利点
• 投影する時の色を指定できる
• 処理が軽い
欠点
• シーンに焼きこまれた影とは馴染まない

38.
#UE4CEDEC
動的オブジェクトの影:
Cascade Shadow Map＋ 固定平行光源
• 事前計算による影と、
動的オブジェクトの影が
馴染むようにブレンド
• ProtoStarデモも
この組み合わせを使用！

39.
#UE4CEDEC
動的オブジェクトの影:
Cascade Shadow Map＋ 固定平行光源
• 事前計算による影と、
動的オブジェクトの影が
馴染むようにブレンド
• ProtoStarデモも
この組み合わせを使用！

40.
#UE4CEDEC
完全にダイナミックな影:
Cascade Shadow Map ＋ 動的平行光源
ライティングをすべて動的に処理
利点
• ランタイム実行時に
ライト方向、強さなどを変更可能
• 事前計算のライティングデータがない
• メモリ使用量とパッケージサイズの削減
欠点
• すべてのシーン内オブジェクトに対して
影計算を行うため描画コストが増加

41.
#UE4CEDEC
動的ポイントライトによるライティング
• プロジェクト設定のMax Movable Point
Light(動的ライト最大数)を
0より大きくすることで使用可能
• 使用用途例：
爆発や閃光といった、
エフェクトのアクセント
• 影は落ちない
• シェーダが追加生成されることに注意

42.
#UE4CEDEC
ライティングチャンネル
• 同じチャンネルのオブジェクトにのみ
選択的にライトを適用できる
• モバイルでは4.13からサポート

43.
#UE4CEDEC
モバイルで利用できるポストプロセスエフェクト
• ブルーム
• トーンマッパー
• 被写界深度
• 自動露光
• ポストプロセスマテリアル
(カスタムポストプロセス)
• アンチエイリアスなど

44.
#UE4CEDEC
ポストプロセス: 高品質被写界深度

45.
#UE4CEDEC
ポストプロセス: 映画的トーンマッパー
• アーティスティックな表現が可能なカラーグレーディング効果

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

47.
#UE4CEDEC
ポストプロセス: カスタムデプス
• 指定したオブジェクトを
独自の深度バッファに描画
• カスタムエフェクト例
• アウトライン表示
• 他のオブジェクトで
隠されたメッシュの描画

48.
#UE4CEDEC
ポストプロセス: カスタムステンシル
• カスタムデプスの
拡張のようなもの
• 書き込む値を指定可能
• カスタムエフェクト例：
色指定付きアウトライン
表示など

49.
#UE4CEDEC
モバイル向けの最新レンダリング機能まとめ
• ハイエンド向けの
ES3.1設定の開発が可能に
• 機能追加が進んでいて、
リッチなグラフィックを
モバイルでも実現できます！
• 反射
• リアルタイムの影
• GPUパーティクル
• ポストプロセスの強化

50.
#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

51.
#UE4CEDEC
NEW!
Desktop-Class Forward Renderer on iOS (実験段階)
プロジェクト設定
→ Platforms
→ iOS
→ Rendering
→ Metal Desktop-Forward Renderer

52.
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの？
• UE4.18における モバイルに関する更新
• モバイル開発あるある問題とその対策・Tips紹介

53.
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4

54.
#UE4CEDEC
モバイルプレビュー機能
モバイル用レンダラをエミュレートし
エディタ上で描画結果を確認
• エディタを再起動することなく
ツールバーから簡単に切替可能
• OpenGL ES3.1, Vulkan, Metalに対応済
公式ドキュメント：モバイルプレビュア

55.
#UE4CEDEC
New!
Improvements to "Device Mobile Preview“
特定のデバイスにおけるハード性能・設定をより細かくエミュレート
• 画面解像度
• GPU機能
• デバイスプロファイル(後述) などなど

56.
#UE4CEDEC
New!
Improvements to "Device Mobile Preview“
対象デバイス設定は自由に編集・追加可能
• Engine¥Content¥Editor¥PIEPreviewDeviceSpecs
エディタ設定の
Enable mobile PIE with preview device launch options

57.
#UE4CEDEC
注意！
最終的なチェックは必ず実機上で行うこと！
• 特定の端末ではエディタと異なる描画結果になる可能性がある
モバイルプレビュー機能は
「作業の方向性の確認」として使うことを推奨
なんかちゃうやん…
よっしゃ、調整完璧や！

58.
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4

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

60.
#UE4CEDEC
今回は話さないこと
各プラットフォームにおける登録・設定作業
• Google Play Console ヘルプセンター
• iTunes Connect
UE4側での初期セットアップ・
プラットフォームとの連携作業
• Android クイックスタート
• iOS クイックスタート

61.
#UE4CEDEC
ログイン・ログアウト
Blueprintのみで実装可能！（もちろん、C++でも）

62.
#UE4CEDEC
アプリ内課金（In-App Purchase）
Blueprintのみで実装可能！（もちろん、C++でも）
• 引数に指定するアイテムIDを
プラットフォーム間で合わせておくと
実装の共通化が楽！
公式ドキュメント：
アプリ内課金の使用方法

63.
#UE4CEDEC
リーダーボード
Blueprintのみで実装可能！（もちろん、C++でも）
• 引数に指定するアイテムIDを
Android, iOSで合わせておくと
以下略
公式ドキュメント：
モバイルサービスの
リーダーボードの使用方法

64.
#UE4CEDEC
アチーブメント（実績）
Blueprintのみで実装可能！（もちろん、C++でも）
• 引数に指定するアイテムIDを
以下略
公式ドキュメント：
モバイルサービスの
アチーブメントの使用方法

65.
#UE4CEDEC
プッシュ通知 (ローカル)
Blueprintのみで実装可能！（もちろん、C++でも）
• バッジ対応は…現状はiOSのみ

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

67.
#UE4CEDEC
UE4が標準対応しているリモート通知サービス
Android
• Google Cloud Messaging (UE4.16)
• Firebaseコンソールで発行される
Legacy Server keyを指定する形式
iOS
• Apple Push Notification Service
( Sandbox )

68.
#UE4CEDEC
少し補足タイム
（脱線とも言う）

69.
#UE4CEDEC
Firebaseってなに？
Googleが運営しているバックエンドサービス
サポートしている機能
• モバイルアナリティクス
• プッシュ通知
• パフォーマンス解析
• クラッシュレポート などなど
現時点のUE4では未対応…
• UE4.19で Test Lab( クラウドベースのアプリテスト基盤 ) 機能には対応予定

70.
#UE4CEDEC
今のUE4 (4.18) でFirebaseを使うには？
Firebase C++ SDKを自力インテグレートする
• クラウドメッセージ機能を移植した事例があるが…
「Ultimate Mobile Kit Firebase」を使う
• マーケットプレイスにて 174.99ドル で販売中
• 最新バージョンへの対応が非常に早い
• 全ソースコード付き

71.
#UE4CEDEC
マーケットプレイスのアセットの利用規約について
• すべて商用利用・改変可能
• 利用・共有範囲について
• 購入者（個人・会社）が所属する全プロジェクトで利用可能
• 購入者の所属プロジェクトに関わる開発者・会社間で共有可能
• その他
• 著作権に関する問題はEpicGames内でレビュー済み
• 記載がない限り、権利表記は不要 （表記すると製作者は嬉しいので是非！）
• 公式サイト マーケットプレイス FAQページ

72.
#UE4CEDEC
脱線おわり

73.
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4

74.
#UE4CEDEC
バナー広告
Blueprintのみで実装可能！（もちろん、C++でも）
公式ドキュメント：
インゲーム広告の使用方法
え、私の給料少なすぎ！？
話題のスマホRPGが・・・

75.
#UE4CEDEC
インターステイシャル広告 （全面広告）
Blueprintのみで実装可能！（もちろん、C++でも）
• ただし、Androidのみ（iOSは未対応）
ダウンロード
なう！

76.
#UE4CEDEC
動画広告（ Rewarded Video ）
残念ながら未対応…
• みなさまの熱いリクエストをお待ちしております！
動画見ると
30コインGet!

77.
#UE4CEDEC
広告表示用プラグインの紹介
Universal Mobile Ads （149.99ドル）
• 各広告タイプにAndroid / iOS 両対応
• 最新バージョンへの対応が非常に早い
• 全ソースコード付き

78.
#UE4CEDEC
インゲーム アナリティクス （解析ツール）
ゲーム内で必要となる処理・イベントはBlueprint ・ C++で用意
• サービスとのやり取りは
各サービスに対応したプラグイン内で行われる
公式ドキュメント
ブループリントアナリティクスプラグイン

79.
#UE4CEDEC
UE4が標準対応しているサービス
• Flurry
• https://developer.yahoo.com/analytics/
• UE4公式ドキュメントの解説ページ
• Apsalar
• https://apsalar.com/
• UE4公式ドキュメントの解説ページ
• Adjust
• https://www.adjust.com/

80.
#UE4CEDEC
マーケットプレイスで販売されているアセット
• Google Analytics Provider (54.99ドル)
• GameAnalytics (無料）
• Chartboost Plugin (無料)
• Ultimate Mobile Kit Firebase (174.99ドル)

81.
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4

82.
#UE4CEDEC
コンテンツの追加・更新について
運営型ゲームにおいて
コンテンツアップデートに掛かるコストは重要！
アセット間の依存関係DLサイズによる負荷人 / 時間的コスト

83.
#UE4CEDEC
まず結論から
プロジェクト・更新内容に適した作業フローを柔軟に構築可能です
• 各パッケージタイプ (Release, Patch, DLC )を組み合わせる形
プロジェクト内の開発者の大半は を気にする必要ありません
• 通常通りの、アセットベースのリソース管理で問題ありません
コンテンツ開発中にパッケージをビルド・DL・解凍する必要はありません
• ユーザにコンテンツを配信するためにパッケージを作る人と
DLC内のアセットを間接参照する人 だけ気にして下さい

84.
#UE4CEDEC
まず結論から
パッケージの作成・インストールは、専用ツール・機能を用意済みです
• Project Launcher, Http Chunk Installer
• モバイルパッケージングウィザード, Mobile Patch Utility
Battle Breakersにおける実績
• 海外の一部地域にて配信中( 約半年 )
• ストアを介さずに
新キャラクターの追加を実現済み

85.
#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

86.
#UE4CEDEC
よくあるユースケース
新キャラクターを追加したい！

87.
#UE4CEDEC
Releaseの場合
• 作るの簡単！アセット間の依存関係問題もなし！
• ストアにアップロードする必要あり
• 大量のダウンロードをユーザに強制
1.0 1.1
1000MB
ダウンロード発生！

88.
#UE4CEDEC
Patchの場合
• 作るの簡単！アセット間の依存関係問題もなし！
• コンテンツアップデートの場合、ストアを経由する必要なし！
• 必要に応じた最小限のダウンロード
1MBだけダウンロード
1.0 1.0.1
1.0 to 1.1

89.
#UE4CEDEC
さらにキャラクタを追加する場合
Patch に対して Patchを適用することはできません
1.0.1 1.0.2
1.0.1 to 1.2

90.
#UE4CEDEC
さらにキャラクタを追加する場合
前回のPatchを含むPatchを
Releaseに適用
1.0 1.0.2
1.0 to 1.2
Patchを含んだReleaseに差し替え
1.0 1.2

91.
#UE4CEDEC
DLCの場合
• コンテンツアップデートの場合、ストアを経由する必要なし！
• 必要に応じた、最小限のダウンロード
• より自由度の高い作業フローを構築可能！
1.0 1.0 + DLC a1.0
DLC a1.0

92.
#UE4CEDEC
DLCの注意点
「Release が持つアセット」から
「DLCが持つアセット」 をハード（直接）参照することはできません
Asset Registryを使って
DLCが持つアセットをソフト（間接）参照する！

93.
#UE4CEDEC
Asset Registry さん
はありますか？
あるよ～どうぞ！
やった！
ないよ～
こんなイメージ
ダウンロード！
公式ドキュメント
アセットの参照
公式ドキュメント
アセットレジストリ

94.
#UE4CEDEC
各パッケージの利点・欠点を把握し
各プロジェクトにとって適切な手法を選びましょう！

95.
#UE4CEDEC
Release, Patch, DLCを作るには？
Project Launcherを使う！

96.
#UE4CEDEC
Project Launcher
Profile (パッケージング設定) を作成
• 対象となるレベル・バージョン情報 などなど
アセット間の依存関係はこのツールが全て解決
• 指定したレベルに紐づくアセットのみをパッケージに
Patch( DLC ) の作成で必要となる、
Releaseとの差分関係もこのツールが全て解決
• 指定バージョンから
変更・追加したアセットのみをパッケージに

97.
#UE4CEDEC
Release, Patch, DLCをインストールするには？
Http Chunk Installer におまかせ！
• Release, Patch, DLC全てに対応
• 必要に応じて、ゲームプレイ中に
バックグランドでダウンロード・インストール可能
残念ながら、ドキュメントがまだ用意されていません…
• Battle Breakersにおける活用例が
UE4公式ブログにて後日紹介される予定です！

98.
#UE4CEDEC
初回リソースダウンロード
必要最小限におさめたパッケージを各ストアにアップし、
初回起動時に残りのコンテンツを別途ダウンロード
50MB
50MB
800MB

99.
#UE4CEDEC
モバイルパッケージングウィザード
初回リソースダウンロード用の
Release、DLC用Profileの作成支援機能
• レベル・テクスチャフォーマットを指定するだけ
• 公式ドキュメントへのリンク

100.
#UE4CEDEC
Mobile Patch Utility ノード
初回リソースのダウンロード・インストール用のBPを用意
用意されている機能、かなり豊富です！
• ダウンロード・インストール開始
• ダウンロード進捗状況の取得
• 各処理の成功・失敗イベント
• 空き容量・Wifi接続の確認 などなど
公式ドキュメント
Mobile Patch Utilityノード

101.
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4

102.
#UE4CEDEC
Webブラウザ
UMGで用意されている
Web Browserウィジェットを使うだけ！

103.
#UE4CEDEC
キーボード
テキストボックスにタッチすると自動的に表示・操作可能に
UE4.16でバーチャルキーボード対応が追加 ( Androidのみ )
• アプリケーション独自のカスタマイズが可能に

104.
#UE4CEDEC
動画再生 ( Media Framework 2.0 )
Android / iOSに標準対応 （もちろん他のプラットフォームにも）
• オーディオ再生 ・ ストリーミング再生にも対応済
NEW!
Media Framework 3.0をリリース
• 様々な面で大幅改善
• メモリコピー無しでのレンダリング
（Android限定）

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

106.
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました！
• モバイルプレビュー機能

107.
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました！
• モバイルプレビュー機能
• 各プラットフォーム対応

108.
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました！
• モバイルプレビュー機能
• 各プラットフォーム対応
• ゲーム内広告・アナリティクス

109.
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました！
• モバイルプレビュー機能
• 各プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート

110.
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました！
• モバイルプレビュー機能
• 各プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他の痒い所への対応

111.
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの？
• UE4.18における モバイルに関する更新
• モバイル開発あるある問題とその対策・Tips紹介

112.
#UE4CEDEC
これまでに出てきた項目
• Desktop-Class Forward Renderer on iOS (実験段階)
• Improvements to "Device Mobile Preview“
• Media Framework 3.0

113.
#UE4CEDEC
Apple ARKit iOS 11 Support
iOS11のサポート
• 実行ファイルが64bitのみに
• Xcode9 に移行
ARKitの正式サポート
• 実験段階のサポートだった4.17時点から
大幅に変更・改良
• パススルーカメラのロバスト性向上
• パフォーマンス・精度の向上

114.
#UE4CEDEC
Google ARCore Developer Preview Support
Google AR Coreの
開発者向けプレビュー版への正式対応
• 実験段階のサポートだった4.17時点から変更・改良
• パススルーカメラの操作性向上など
現時点での正式対応デバイス
• Google Pixel and Pixel XL
• Samsung Galaxy S8
未サポート端末で動かす方法（自己責任）

115.
#UE4CEDEC
Apple ARKit / Google ARCoreを試すには
1. Apple ARKit / Google ARCore
プラグインを有効に
2. プロジェクト設定の
Start in ARを有効に
3. CameraComponentを持つ
Pawnをレベル上に配置
4.18リリースノートにて
サンプルプロジェクトを公開中

116.
#UE4CEDEC
Gradle Enabled by Default for Android
新しいビルドシステムである Gradle が
デフォルトで有効に
• 従来の Ant の利用は非推奨に

117.
#UE4CEDEC
Android Camera Plugin
前面・背面カメラへのアクセスが可能に
• Android Camera Playerプラグイン
• 有効にすると、プロジェクト設定に
カメラ使用のパーミッションが追加

118.
#UE4CEDEC
Add Android cpu stats (stat AndroidCPU)
CPUのコア周波数・コア使用率を表示
• 更新間隔は変更可能
CVar 'Android.CPUStatsUpdateRate‘

119.
#UE4CEDEC
Simplified iOS certificates and signing when
using Remote Toolchain from PC
WindowsからMacでリモートビルドする際、
Mac側での証明書の作成・インストールが
不要になりました！

120.
#UE4CEDEC
BPプロジェクトのiOSビルドフロー
証明書作成
(cer, p12)
証明書・プロビジョニングを
UE4エディタで設定
+
IPA作成
プロビジョニング作成
(.mobileprovision)
or

121.
#UE4CEDEC
BPプロジェクトの場合
Apple Developer Programに登録済みなら
WindowsのみでiOS開発が可能！

122.
#UE4CEDEC
C++プロジェクトの場合
Macは必須
• Xcodeでビルドする必要があるため
おすすめのフロー
開発 ：Windows
ビルド ：Macでリモートビルド

123.
#UE4CEDEC
C++プロジェクトのiOSビルドフロー( UE4.17以前 )
証明書
作成・インストール
証明書・
プロビジョニング設定
プロビジョニング作成 リモートビルド

124.
#UE4CEDEC
UE4.17以前の問題点
Mac上で操作を行う必要がある
• 初期の環境構築コストの増大
• Macの追加購入時
• 新規プロジェクトの開始時
• そもそも、ビルドマシンにしているMacは
基本的に放置しておきたい！
証明書の
作成・インストール

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

126.
#UE4CEDEC
C++プロジェクトのiOSビルドフロー( UE4.18 )
証明書作成
証明書・
プロビジョニング設定
プロビジョニング作成 リモートビルド

127.
#UE4CEDEC
UE4.17以前 UE4.18
WindowsからMacでリモートビルドする際、
Mac側での証明書の作成・インストールが
不要になりました！
Simplified iOS certificates and signing when
using Remote Toolchain from PC

128.
#UE4CEDEC
モバイル以外の更新も沢山！
UE4.18 リリースノート
Volumetric Lightmaps Clothing Tool

129.
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの？
• UE4.18における モバイルに関する更新
• モバイル開発あるある問題とその対策・Tips紹介

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

131.
#UE4CEDEC
モバイル開発における大きな悩みの一つ
ユーザに注目されるよう、よりハイクオリティ・高グラフィックに…！
VS
より多くの人に遊んでもらえるよう、様々な端末・スペックに対応…！
VS
何故かいつもスケジュールに余裕がない…

132.
#UE4CEDEC
なので
各端末・スペックに応じて
適切な設定・調整を
より簡単かつ効率的に行う必要があります
UE4にはそれを支援する機能が
用意されています！

133.
#UE4CEDEC
端末・スペックに応じた設定・調整をするには？
• デバイスプロファイル
• Feature Level Switch / Quality Switch
• UMGの解像度別対応

134.
#UE4CEDEC
デバイスプロファイル
GPU, SoC, デバイスモデル別のプリセット毎に
各種パラメータ・設定を調整可能
• CVar( Console Variables )
• Texture LOD Group

135.
#UE4CEDEC
CVar ( Console Variables )
各機能の設定・クオリティを調整
例えば
• 解像度のスケーリング係数
• 各ポストプロセスのクオリティ
• ネットワーク同期回数の上限設定
• デバッグ表示のONOFF

136.
#UE4CEDEC
CVarのリスト・検索ページ
エディタから開くことが可能

137.
#UE4CEDEC
Texture LOD Group
テクスチャのLOD( MipMap )の設定をグループ毎に一括変更

138.
#UE4CEDEC
端末・スペックに応じた設定・調整をするには？
• デバイスプロファイル
• Feature Level Switch / Quality Switch
• UMGの解像度別対応

139.
#UE4CEDEC
Feature/Quality Level に応じたマテリアル最適化
Feature / Quality Level 毎に
異なるマテリアルを組むことが可能
• Feature Level
• Quality Level
• Low, Medium, Highの 3段階

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

141.
#UE4CEDEC
Quality Switchの落とし穴
各Quality Levelにおけるシェーダが「全て」メモリに載ります
• 使用していない Quality Levelのシェーダは載せない設定があるけど…
シェーダのロード時間は改善されないので注意

142.
#UE4CEDEC
Feature / Quality Level Switchを使う際は
Switchによる処理分けが本当に必要なのか要検討
• プロファイルして、その判断が適切か確認！
• デバイスプロファイルによる調整では不十分なのか？
落とし穴を理解した上で、運用フローを構築する！
• レギュレーションの策定
• 定期的なチェック作業

143.
#UE4CEDEC
端末・スペックに応じた設定・調整をするには？
• デバイスプロファイル
• Feature Level Switch / Quality Switch
• UMGの解像度別対応

144.
#UE4CEDEC
解像度に応じたUIの調整機能
DPIスケーリング
• 解像度に応じた自動スケーリングサポート
• カーブを編集することでスケーリングを調整
アンカー
• 解像度変更時の
配置・ストレッチングのルールを制御
• 用意されたプリセット or カスタマイズ

145.
#UE4CEDEC
エディタ上でのスクリーンサイズ設定
代表的なデバイスの解像度に応じた
プリセットを用意 ( 縦・横 両対応 )
• 特殊デバイス向けに解像度の指定も可能

146.
#UE4CEDEC
4.17から
ドラッグで動かせて
可視化されるように！
超わかりやすい！

147.
#UE4CEDEC
端末・スペックに応じた設定・調整をするには？
• デバイスプロファイル
• 各ハードに応じたプリセット毎に
各種パラメータ・設定を調整

148.
#UE4CEDEC
端末・スペックに応じた設定・調整をするには？
• デバイスプロファイル
• 各ハードに応じたプリセット毎に
各種パラメータ・設定を調整
• Feature Level Switch / Quality Switch
• 端末・スペック・設定に応じたマテリアル調整

149.
#UE4CEDEC
端末・スペックに応じた設定・調整をするには？
• デバイスプロファイル
• 各ハードに応じたプリセット毎に
各種パラメータ・設定を調整
• Feature Level Switch / Quality Switch
• 端末・スペック・設定に応じたマテリアル調整
• UMGの解像度別対応
• DPIスケーリング, アンカー
• スクリーンサイズ

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

151.
#UE4CEDEC
バッテリー消費・発熱を無視すると…
コンテンツの寿命を大きく縮めることに…！
例えば
• ユーザの継続率への影響
• 熱によりパフォーマンスが低下し…という悪循環

152.
#UE4CEDEC
バッテリー消費・発熱問題を解決するには？
• 端末・スペックに応じた設定・調整を行う
• コンテンツのクオリティを落とさずに
パフォーマンスを改善・維持する最適化方法を、
？
調査し、選択する

153.
#UE4CEDEC
大前提
「最適化」 は
「コンテンツのクオリティを落とすこと」 ではない
適切なプロファイリングを行い、
どんな対応をするか選択しましょう！

154.
#UE4CEDEC
適切なプロファイルのやり方
[CEDEC2017] UE4プロファイリングツール総おさらい
（グラフィクス編）
https://www.slideshare.net/EpicGamesJapan/cedec2017-ue4
https://youtu.be/EtnXVj8D25M

155.
#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公式ブログにおける解説記事

156.
#UE4CEDEC
各ハードウェア会社が提供しているツール
CPUプロファイリング
• Apple : Instruments ( Time Profiler )
• NVIDIA : Tegra System Profiler
• 配布サイト, 公式ドキュメント
• ARM : DS-5

157.
#UE4CEDEC
とあるプロジェクトで選択された
バッテリー消費・発熱問題への対策を紹介
（モバイル特化版）

158.
#UE4CEDEC
60fps上限ではなく、30fps上限にする

159.
#UE4CEDEC
GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices
発熱を抑えるためのスロットリングが発生

160.
#UE4CEDEC
GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices

161.
#UE4CEDEC
60fps上限ではなく、30fps上限にする
高フレームレートを上限にした場合
消費電力・温度向上により、フレームレートを不安定になる
• 「30fpsに抑えると，60fpsに対して40％も消費電力が低減できる」
http://www.4gamer.net/games/999/G999902/20150307011/
UE4で30fps上限を設定するには
ConsoleVariables 「 t.MaxFPS 30 」

162.
#UE4CEDEC
GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices
30fps上限にしても、最終的には発熱がひどくなってくる…

163.
#UE4CEDEC
バッテリー消費・発熱を考慮したゲームデザイン
動的なシーン（アクション部分など）の後に
静的なシーン（リザルトなど）」 を 少し 挟むことで デバイスを冷却！
t.MaxFPS 30 冷 → 熱 t.MaxFPS 10 熱 → 冷

164.
#UE4CEDEC
描画解像度 と UI解像度を分ける

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

166.
#UE4CEDEC
UIのキャッシング

167.
#UE4CEDEC
Invalidation PanelによるUMGの負荷軽減
• 子要素をキャッシュすることで
不要な描画・更新処理をキャッシュ（スキップ）
• 子要素毎にキャッシュするか否かを指定することも可能
• Is Volatileフラグ
あまり変化しない部分は
積極的にInvalidation Panelでキャッシュする
• 変化する箇所はIs Volatileフラグを有効に

168.
#UE4CEDEC
Battle Breakersにおける高速化事例
Stat slateによる計測
• Invalidation panel使用前
• Processed : 573
• Invalidation panel使用後
• Processed : 231
• Cached：342
２倍以上の高速化を実現！

169.
#UE4CEDEC
Invalidation Panel用のデバッグ機能
• slate.InvalidationDebugging 1
• Green: キャッシュされたWidget
• Blue : 子要素との
相対的な位置関係もキャッシュ
• Dashed: キャッシュしないWidget
• Red: invalidated widgets

170.
#UE4CEDEC
Retainer Boxによる描画負荷の分散
子要素をレンダーターゲットに描画することで、
描画頻度・タイミングを変更可能

171.
#UE4CEDEC
UMGに関する資料のご案内
猫でも分かるUMG
https://www.slideshare.net/EpicGamesJapan/umg-80334310

172.
#UE4CEDEC
本講演のまとめ

173.
#UE4CEDEC
UE4における基本機能の「一部」をご紹介
• ほぼ全ての機能がモバイル開発でも使える！
• 非エンジニアが 「自分のアイデア」を「自分で実装」できる

174.
#UE4CEDEC
UE4のモバイルレンダラーはどこまでできる？
• 様々な端末・ハードに対応済み
• ES2.0 から ES3.1, Vulkan, Metalまで
• ハイエンドモバイル向けの機能を数多くご用意

175.
#UE4CEDEC
モバイル開発で必須な機能が既に揃っている！
• モバイル特有の機能への対応状況
• モバイル開発向けの作業を支援する様々な機能

176.
#UE4CEDEC
モバイルに関する最新情報をご紹介
• Apple ARKit, Google ARCoreへの正式対応
• BP / C++ プロジェクト共に、Windows上で作業が完結するように！

177.
#UE4CEDEC
モバイル開発におけるTipsの「一部」をご紹介
• 「端末・スペック」と「バッテリー・発熱」を考慮した
パフォーマンス設定・調整を支援する機能の紹介
• 実際のプロジェクトで使われた最適化・改善テクニックをご紹介

178.
#UE4CEDEC
ご清聴
ありがとうございました！
本講演に関する質問はこちらからどうぞ！
E-mail ： kaz.okada@epicgames.com
Twitter : @pafuhana1213
展示ブースにEGJのスタッフがいますので
モバイル以外の質問も是非どうぞ！