#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製モバイルタイトルが発表!
修羅道 SHURADO
http://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.1
1.0 to 1.1
#UE4CEDEC
さらにキャラクタを追加する場合
Patch に対して Patchを適用することはできません
1.0.1 1.0.2
1.0.1 to 1.2
#UE4CEDEC
さらにキャラクタを追加する場合
前回のPatchを含むPatchを
Releaseに適用
1.0 1.0.2
1.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
2倍以上の高速化を実現!
#UE4CEDEC
Invalidation Panel用のデバッグ機能
• slate.InvalidationDebugging 1
• Green: キャッシュされたWidget
• Blue : 子要素との
相対的な位置関係もキャッシュ
• Dashed: キャッシュしないWidget
• Red: invalidated widgets
#UE4CEDEC
Retainer Boxによる描画負荷の分散
子要素をレンダーターゲットに描画することで、
描画頻度・タイミングを変更可能
#UE4CEDEC
UMGに関する資料のご案内
猫でも分かるUMG
https://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のスタッフがいますので
モバイル以外の質問も是非どうぞ!

[CEDEC+KYUSHU 2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介! + UE4.18 モバイル最新情報の紹介