UE4モバイルブートキャンプ

UE4モバイルブートキャンプ
カニパンチ @CrabPunch

追記：
口頭での補足やアニメーションがある
ので配信動画と合わせて
お読みください
https://www.youtube.com/watch?v=luYTZHI0byg&feature=youtu.
be&t=81

目次
・はじめに
・開発環境
・描画レベル
・光と影
・ポストプロセス
・２Dスクリーン
・物理とアニメーション

今回の情報をまとめた理由
• UE4でのモバイルの情報が少ない
特に制作実例の情報が少ない
• そのため入門編の情報や、
最初に躓きやすいところまとめよう。
• 機能まわりの詳細な説明はEpicがしてくれるはず
■はじめに

今回のターゲット
• ⚪モバイルネイティブ開発経験があり、UE4モバイルが初めての人
• ⚪ UE4でのPCやコンソール開発経験があり、UE4モバイルが初めての人
• ✘某ゲームエンジンでの開発経験があり、UE4モバイルが初めての人
• ✘すでにUE4モバイル開発経験がある人
※プログラマーよりの話は多めになるが
アートやプランナーの方も対象しています
■はじめに

話さないこと
• ネットワーク関連
• DLC関連
• 課金関連
• サウンド
■はじめに

諸注意
よく⚪⚪⚪の機能は重い！などといった会話や資料がたまにありますが
ゲームの状況によっては話がかわるかと思うので、重いと言われた段階で
使用を断念する人がいるかと思います。
その前に実際に自分達のゲームの状況下でプロファイルをして適切か
確認してください。
そのため今回はいくつか目安として参考までにGPUのmsを表示した
資料がでてきますが、これらは一定回数以上の計測をしたものではなく、
またdevelopmentにて計測した合計msなので、
その機能としてのピンポイントとしての負荷ではないので、
誤解のないようにご注意ください。
■はじめに

だいたいの問題点
• Q：制作するにあたってなにが困ったか？
A：なにができてなにができないかが、わからない。
• Q：公式ドキュメントや動画とかチュートリアルがあるのでは？
A：UE4のできることは解説してくれているが、だいたいがPCや
コンソールが前提の情報、モバイルだとできるできないの情報が
はぶかれていることが多数。
■はじめに

• モバイルプラットフォーム向けのライティング
http://api.unrealengine.com/JPN/Platforms/Mobile/Lighting/
■はじめに

• モバイルプラットフォーム向けのマテリアル
http://api.unrealengine.com/JPN/Platforms/Mobile/Materials/#featureleveles3stop1
• モバイルプラットフォーム向けのテクスチャガイドライン
http://api.unrealengine.com/JPN/Platforms/Mobile/Textures/
• モバイルプラットフォームでのポストプロセスエフェクトの使用方法
http://api.unrealengine.com/JPN/Platforms/Mobile/PostProcessEffects/
■はじめに

(｡´・ω・｀｡)正直、つらい
UE4バージョンあがっても情報更新などもなく、比較もしづらい
■はじめに

• Supported Rendering Features
https://docs.unrealengine.com/en-us/Engine/Rendering/SupportedRenderingFeatures
■はじめに

参考資料
• [CEDEC+KYUSHU 2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介！ + UE4.18 モバ
イル最新情報の紹介
https://www.slideshare.net/EpicGamesJapan/ue4tips
• [IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2018 受
賞に向けて作品のクオリティをあげるために！
https://www.slideshare.net/EpicGamesJapan/igf2018-ue4android-indie-games-festival-2018
• UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編
https://www.slideshare.net/EpicGamesJapan/ue4-chunk-id
• 猫でも分かるUE4を使ったARコンテンツ作り方初級編 ver 1.0.0
https://www.slideshare.net/EpicGamesJapan/ue4ar-ver-100
• 徹底解説！UE4を使ったモバイルゲーム開発におけるコンテンツアップデートの極意！
https://www.slideshare.net/EpicGamesJapan/ue4-95204920
• -
■はじめに

参考動画
• 『修羅道』制作事例モバイルハイエンドグラフィックゲーム実現まで
https://www.youtube.com/watch?v=Iy0WWtMJgNQ
• 【CEDEC2018】Android ハイパフォーマンス・プログラミング
https://www.youtube.com/watch?v=oxJWWCYWRlY&feature=youtu.be
• Unreal Japan Stream | UE4.20で入る新機能の一部をご紹介！(29:00~)
https://www.youtube.com/watch?v=2Pl-n17eu_Q
■はじめに

プロファイリング
• [CEDEC2017] UE4プロファイリングツール総おさらい（グラフィクス編）
https://www.slideshare.net/EpicGamesJapan/cedec2017-ue4
• Unreal Japan Stream | UE4のプロファイリングと最適化のTips！Part 1
https://www.youtube.com/watch?v=tTBdtsnqlTA
• Unreal Japan Stream | UE4のプロファイリングと最適化のTips！Part 2
https://www.youtube.com/watch?v=oZtlHG-s6DI
• ●UE4 & iOS開発時の実機デバッグ・プロファイリング方法まとめ 2018 < CPU・
GPUプロファイリング編
http://pafuhana1213.hatenablog.com/entry/2018/12/13/031615
■はじめに

デバッグ関連など
• ●UE4 + Android 実機デバッグのやり方その1 (vsdebugandroidコマンド篇)
• ●UE4 + Android 実機デバッグのやり方その2 (AndroidStudio篇)
• ●UE4 & Android 実機デバッグ実行中のログ確認方法について
• ●UE4 & iOS開発時の実機デバッグ・プロファイリング方法まとめ 2018 < CPU・GPU
デバッグ編 >
• ●UE4 & iOS開発時の実機デバッグ・プロファイリング方法まとめ 2018 < ログ確認・抽
出編 >
• http://pafuhana1213.hatenablog.com/entry/2018/12/13/031440
■はじめに

モバイル用の参考プロジェクト
• Epic Zen Garden
https://www.unrealengine.com/ja/blog/epic-zen-garden-project-available-
for-download?lang=ja
• Sun Temple
https://www.youtube.com/watch?v=xNNryK-zm6w
• Action RPG
https://www.unrealengine.com/ja/tech-blog/learn-how-to-develop-high-
end-mobile-games-with-the-action-rpg-sample-project
■はじめに

検証バージョン
• UE4 4.21
• Android Ver6~９
• iOS Ver11~12
■開発環境

開発環境
• Android
• WindowsPC + Androidスマホ
• iPhone
• (A) MacPC + iPhoneスマホ + AppleDeveloperProgram登録+証明書
• (B) WindowsPC + MacPC + iPhoneスマホ + AppleDeveloperProgram登録+証明書（リモートビルド）
• (C) WindowsPC + iPhoneスマホ + AppleDeveloperProgram登録+証明書 (※BPオンリーかつ非AR)
■開発環境

環境構築や細かい説明
• 証明書作成
• リモートビルド
• Xcode
• Android API Level
• NDK
• JDK
• Gradle
• Target API
• CodeWorks
• Android Studio
■開発環境

• などの細かい説明は
達が
してくれるはずなので、そちらのスライドへどうぞ。
※TODO:二人の素晴らしいスライドへのリンクを貼る
■開発環境

比較
■開発環境
普段の開発テストはAndroidのほうが楽
（最終的にはどっちも実機で動作確認は必須）
コスト：本体準備の価格
導入：環境構築の難易度
保守：長期間およぶ環境の維持や更新
実験速度：実機の転送速度やその他ツール
プロファイル：実機プロファイル難易度
コスト導入保守実験速度プロファイル
Android ⚪ ⚪ ✘ ⚪ ✘
iPhone ✘ ✘ ⚪ ✘ ⚪

パッケージサイズ
• Android iPhoneともどもDLCを考慮しなければ、
本体パッケージサイズの上限は４G
• Androidの場合はプロジェクト設定の「Allow large OBB files」に
にチェックしないと２Gサイズまでしかパッケージできません。
■開発環境

パッケージ時間
• パッケージ時間に関してはPCやプロジェクト構成により変動しますが、
キャッシュ前提となりますが
• Androidで５～１０分（分散ビルド込）
• iPhoneで１０～２０分
（分散やPC性能の問題がある、またリモートの影響）
• ※酷い構成ケースですと２時間や２４時間などの場合もあります。
■開発環境

サブディスプレイ化
• プレビューの結果をそのままスマホで確認
• マルチタッチなどはできないのでアクションゲームの操作確認は厳しいが
それなりに操作はできた
• 描画結果はあくまでプレビューなのでちゃんとした見た目の結果は
パッケージしてスマホ実機にて確認
■開発環境

サブディスプレイ化
• Duet Display
windowsからandroidやiphoneなどをサブディスプレイ化
値段によってはwifi接続も可
• Twomon PC Program
windowsからUSB接続したandroidが対象
※iphoneは動作せず
• Luna Display
macからiphoneなどをサブディスプレイ化
■開発環境

描画レベル
■描画レベル

描画レベル
の前にちょっと脱線
■描画レベル

SoC
※ (System on a chip)(CPU + GPU + 通信などのユニット）
• Qualcomm ＜Snapdragon＞
• Apple＜Aシリーズ＞
• Samsung＜Exynos＞
• Xiaomi＜Surge＞
• HiSilicon＜kirin＞
• Intel＜Atom＞
• Nvidia＜Tegra＞
■描画レベル

GPU
• Qualcomm＜ Adreno ＞
• ARM ＜Mali＞
• Imagination Technologies ＜PowerVR＞ ※A10
• Apple ＜Apple独自設計＞ ※A11 A12
■描画レベル

グラフィックスAPIとしておそらくよく聞かれるものとして
•DirectX •OpenGL
■描画レベル
主にPCや据え置きゲームで使用される

モバイルでは
• OpenGLESが主に使用されることになります。
OpenGLをモバイル端末クラスなどをターゲットとした組み込み規格
• OpenGLES 2.0
頂点シェーダーピクセルシェーダー
• OpenGLES 3.0
MSAA
• OpenGLES 3.1
コンピュートシェーダー
• OpenGLES 3.2
ジオメトリシェーダーテッセレーションシェーダー
■描画レベル

他にも
•Metal •Vulkan
■描画レベル
ハイエンドモバイルなどで使用できる
Metal iPhone ※iOSではOpenGLES3.0までで、それ以降はMetal対応
Vulkan Android

UE4上で管理されている描画レベル
• SM5
DirectX11
• SM4
DirectX10
• ES3_1
OpenGLES3.1 Metal Vulkan
• ES２
OpenGLES2.0 OpenGLES3.0 ※コレガワカラナイ
• HTML5 ※シラナイコデスネ
■描画レベル

注意点として使用できる機能や制限などが違う
• そのためMaterial作成の時などはターゲットとなるグラフィックスAPI
が複数ある場合などはFeatureLevelSwitchを使って
使い分ける必要があります。
■描画レベル

Textureサイズの制限について
• サイズの上限サイズだがこれは端末によって変わる。
UE4上での制限としては8192px
• OpenGLES 2.0
最低保証のサイズが64px
最大目安としては1024pxか2048pxあたり
• OpenGLES 3.0 3.1
最低保証サイズが2048px
最大目安として4096pxあたり
• iOS PVRTC
Textureサイズ上限が2048px
■描画レベル

Texture関連の制限について
• OpenGLES2.0
Textureサイズは２のべき乗（2,4,8,16,32,64など）
512x256などの正方形以外もいけるが
正方形のほうがメモリ効率がよい。
１Material内でのTexture参照上限が8枚
UE４だと6枚
• OpenGLES 3.0 3.1
Textureサイズの２のべき乗制限はなし
１Material内でのTexture参照上限が16枚
UE4だと14枚
• iOS PVRTC
Textureサイズが正方形 ※ASTCが使用できるのはiPhone6s以降
■描画レベル

TextureSampler
■描画レベル
！？

Texture参照の上限について
• Material新規作成時のほぼ空状態
■描画レベル

• bFullyRoughを有効でES2とES3.1は参照-1
■描画レベル

• r.AllowStatic.LightingをOFFでSM5は参照-2
■描画レベル

• Unlit設定であればbFullyRough やr.AllowStatic.Lightingなど関係なく0に
■描画レベル

Offline Shader Complierを有効に
• Editorの環境設定からComplierを指定する
■描画レベル

Editor上でのES2やES3の確認方法について
■描画レベル

■描画レベル
エディタの環境設定＞Allow Vulkan Previewにチェック

Editor上でのES2やES3の切り替え方
■描画レベル

描画レベル：シェーダーモデル５ SM5
■描画レベル

描画レベル：High-End Mobile ES3_1
■描画レベル

描画レベル：モバイル ES2
■描画レベル

Editor上での描画レベルの確認での注意点
■描画レベル

確認方法
■描画レベル

選択ビューポート
■描画レベル
起動時の描画レベルに依存
する

モバイルプレビュー
■描画レベル

Vulkanプレビュー
■描画レベル

スタンドアローン
■描画レベル

新規ウィンドウ
■描画レベル
SM5ではないので注意
起動時の描画レベルに依存する

4.22プレビュー
■描画レベル
• https://docs.unrealengine.com/en-US/Platforms/Mobile/Previewer

iPhoneでのMaterial精度について
Android（画像はPC上でのプレビュー）
■描画レベル
iPhone
この問題はプレビューでは発生しないので実機で
チェックすること

実機上（とくにiPhone）だと精度問題がでる
• Material内で複雑なノード計算をしている場合
• Material内でTimeノードなどを使用して一定時間経過する場合
■描画レベル

回避策
• 複雑な計算をしてからUV参照するものをCustomUVを使用する
• CustomUVを使用することによって頂点シェーダーでUV計算がされるようなる。
頂点シェーダーはデフォルトでフル精度で計算されており、
ピクセル単位でやるより高速に処理ができる。
■描画レベル

回避策
• Periodの使用
• Timeノードの詳細のPeriodを使用することによってCPU処理になりフル精度で処理されます
■描画レベル

回避策
• Full-Precisionの使用
• Materialの詳細設定の[Mobile>Use Full Precision]にチェックする
ただしこれはMaterial内のすべての精度をフル精度にするため処理的に重い。
デバッグなど問題点確認のために使う程度にとどめたほうがよい。
ただワールド座標関連などで精度が必要なMaterialなどもあり、
どうしても使用したい場合などもあるので
目安としての負荷も確認。
■描画レベル

なぜこの精度問題がでるか?
■描画レベル

OpenGLESの演算精度の宣言
• 例）
precision medium
• highp 浮動小数点数 32ビット
• Mediump 浮動小数点数 16ビット
• Lowp 固定小数点数 10ビット
■描画レベル

ではなく
• 演算精度はGPUに依存しており異なります。
■描画レベル

Metalの演算精度
• half 浮動小数点数 16ビット
• Float 浮動小数点数 32ビット
■描画レベル

UE4でのAndroidとiPhoneの演算精度の宣言確認
• Android通常時
• Android Full Precision時
■描画レベル
・iPhone通常時
・iPhone Full Precision時

負荷の目安 iPhone6s
Use Full Precisionオフ 16.3ms Use Full Precisionオン 19.6ms
■描画レベル

負荷の目安 iPhone Xs Max
Use Full Precisionオフ 8.4ms Use Full Precisionオン 10.0ms
■描画レベル

MSAA
■描画レベル
こちらではなくこちら

MSAA
■描画レベル
• MobileMSAAは2x 4x 8xと設定があるが
iOSでは8xがそもそも非対応です。
4.21段階ではクラッシュしますが、
4.22以降ですと8xが設定されている場合は4x扱いとなります

負荷の目安 iPhone6s MSAA未使用時 16.3ms
MSAA x2 16.4ms MSAA x4 16.7ms
■描画レベル

負荷の目安 iPhone Xs Max MSAA未使用時 8.4ms
MSAA x2 9ms MSAA x4 9.2ms
■描画レベル

シェーダーコンパイルについて
• iPhone
macでビルドすれば事前にコンパイルされる
※windowsからのリモートビルドだと設定してもうまく作成されない
• Android
PSOキャッシュを使用して
■描画レベル

フォワードレンダリングとディファードレンダリング
• ライティング関連を話をする前に、
フォワードレンダリングと
ディファードレンダリングについて
軽くふれておきます。
■光と影

フォワードレンダリング
主に１ジオメトリ１マテリアルごとにライトの計算し描画していく
■光と影

ディファードレンダリング
最初に各ジオメトリやマテリアルをG-Bufferに描き込みます
その後、G-Bufferの情報をふまえてライトの計算をします
■光と影
＋
ライト計算

フォワードレンダリングとディファードレンダリングの
メリットとデメリット
長くなる上、以下の資料のほうが詳細なのでそちらを御覧ください
• https://www.slideshare.net/SatoshiKodaira/ss-69311865
■光と影

UE4でのレンダリング
• PCや据え置きゲーム機ならディファード
※一応フォワードも使える。（一部ハード）
• モバイルならフォワード
• モバイルでディファード設定はありますん（4.15~4.18)
4.22のiphoneならいける？
■光と影

動的ライトと静的ライトどちらを使えばいいのか？
• Epicの昔の資料だとモバイルだと動的ライトは重いので静的ライトを
使うことを推奨している。
• ただ、最近だとケースバイケースでゲームの内容によって状況はかわるといった
説明になってきている。
• 事実、EpicのFortniteは動的ライトで作成されている。
■光と影

静的DirLit +Character1 2.4ms 動的DirLit＋Character1 8.9ms
■光と影

■光と影

静的DirLit +Character30 6.1ms 動的DirLit＋Character30 15ms
■光と影

■光と影

フォワードレンダリングでの動的ポイントライトの数制限
• Q：数はいくつ置けますか？
• A：デフォルトでは４個までです[Max Movable Point Lights]
• Q:その数字は変えれば増やせれる？
• A:現状だと４以下しか設定できません ※シェーダーとソース変えればいけるかも
■光と影

• Q：4個上限はワールド？レベルごと？
• A：１ジオメトリごと接触上限（あとで補足）
■光と影

• Q：4個以上接触したら？
• A：超過した数だけどれかが無効になります。
■光と影

１ジオメトリの接触と書いたが補足
• ライトの詳細設定のAttenuationRadiusのサイズ
■光と影

• 対象となるアクターのBoundsのサイズが接触した場合計算される
■光と影

• アクターマージなどでBoundsのサイズが巨大になる場合は
ライト配置を注意しよう
■光と影

パーティクルライトの罠
• カスケードのEmitter LightModuleはモバイルだと基本動きません
• HighQualityLightsを有効にすれば動くが
• PointLightになるだけなので先程のべた制限にあたるので注意
■光と影

ディレクショナリーライト(movable)と影
• SM5 • ES3_1
■光と影

• ES3 Distance 20000 • ES3 Distance 2000
■光と影

Distanceで値をせめすぎると
影の長いオブジェクトが途切れ
てしまう。
ゲームのデザイン次第でクォー
タービューなどのカメラ固定に
することによって
見栄えを確保する方法もある。
■光と影

CascadeShadowMap(CSM)
RayTracedDistanceFieldShadows(RTDF)
■光と影

Translucency: LightingMode
• Supported Rendering Featuresで見当たらない
• http://api.unrealengine.com/JPN/Engine/Rendering/Materials/MaterialProp
erties/
• https://www.slideshare.net/com044/ue4translucencyunlit （末尾）
■光と影

モバイルではサポート外なので見た目が
Surface ForwardShadingになる
• SM5 • ES3_1
■光と影

反射関連
• フォワードだとSSRは動きません。
• 基本反射は動的物は映らない。
• 一応PlanarReflectionは動く。
■光と影

モバイルSkylight
■光と影

モバイルSkyLit(movable)実機確認
■光と影
Intensityの変更の確認。

ポストプロセス
■ポストプロセス

MobileHDR
• モバイル版だとこれを有効にしておかないと使えない機能が多数ある
主にポストプロセス関連が有効にならない
その分、負荷は増える

負荷の目安 iPhone 6s
HDRなし 2.4ms HDRあり 4ms

HDRなし 1.7ms HDRあり 2.7ms

G-Buffer
• 先程記述したとおり、フォワードレンダリングの場合は
G-Bufferは使用できないのでご注意ください。

Tonemapper
• r.Mobile.TonemapperFilm 1

Tonemapper
• r.Mobile.TonemapperFilm 0

Tonemapper

DoF ※Depth of field
• SM5

DoF
• ES3_1

DoF
• ES3_1 +High Quality Gaussian ※あとMobileHDR忘れずに

DoF
• ES2 +High Quality Gaussian +HDR

２Dスクリーン
■２Dスクリーン

画面解像度と縦横比
端末解像度縦横比
iPhone XS Max 2,688 x 1,242 2.16:1
iPhone XS 2,436 x 1,125 2.17:1
iPhone XR 1,792 x 828 2.16:1
iPhone X 2,436 x 1,125 2.17:1
iPhone 8 Plus 1,920 x 1,080 16：9
iPhone 8 1,334 x 750 16：9
iPhone 7 Plus 1,920 x 1,080 16：9
iPhone 7 1,334 x 750 16：9
iPhone SE 1,136 x 640 7.1：4
iPhone 6s 1,334 x 750 16：9
Xperia XZ3 2,880×1,440 2：1
Galaxy S9 2,960×1,440 18.5：9
HUAWEI P20 2,240×1,080 18.667：9
AQUOS R2 3,040×1,440 19：9

追記：
• 4k(4096x2160)
• 2k(2560x1440) 絵はでるけど、、
• 1080p(1920x1080) 最新のハイエンドならいけなくもないかな？
• 720p(1280x720) 一応ここらがおすすめらしい
• 配信動画時ですと、読み間違えて180pといっています
ただしくは1080pです、ゴメンナサイゴメンナサイ

カオス

ノッチ

なぜつけた？

レターボックス
参考資料
https://qiita.com/dgtanaka/items/ac8c1cc19fa444dbcd43

Mobile Content Scale Factor

アンカー
画面の左上や右上などを起点に
UMGコンポーネントの配置位置を固定で
きる

アンカー
アンカーは自前で矩形設定できるので、
左上を０，０右下を１，１基準として
設定できる。

アンカー
わかりづらいですが、花びらみたいなマークをドラッグして
サイズの調整もできます。

セーフゾーン使用例ノッチがない時

セーフゾーン使用例ノッチがある時

セーフゾーン使用例危険

UMGアニメーション
赤い丸が青い丸の上を、通るアニメーション

追記：
UMGアニメーションまわりの例はスライドですと
再生されないと思いますので
配信動画のほうで確認してください

画面サイズが変わると、アニメーション位置がズレる

最初のような状況はUMG階層をとくに設定していない場合

UMG階層でSizeBoxやScaleBoxを挟む

画面サイズが変わっても、アニメーション位置がズレない

ジェスチャー
• ダブルタップ
• ロングタップ
• フリック
• スワイプ
• ピンチ
などのジェスチャーのイベントは標準ではありません。
自前で実装するか、
マーケットプレイスにてプラグインを購入する必要があります。

物理とアニメーション
■物理とアニメーション

ボーン制限
• 現状モバイルだとボーン上限が75本となっています。
MAX_GPU_BONE_MATRICES_UNIFOMBUFFER = 75
• ソースコードを変更することによって上限を変更することが可能です。
• これらの上限は端末ごとによって限度となる値が変わるので
対象となる端末のGL_MAX_VERTEX_UNIFORM_VECTORSでの確認などが必要

ボーン制限
• ボーン上限が75本の制限は１DrawCallでの上限なので
1キャラクター内でのBoneが100本であろうと1DrawCallが75本で収まるなら問題
ない
MAX_GPU_BONE_MATRICES_UNIFORMBUFFER = 75
NG OK

ボーン制限
• Compat.MAX_GPUSKIN_BONES
を設定することによって分割してくれる機能がある。
• デフォルトは256に設定されている。
• メッシュインポート時に動作するので設定し直したら再インポートがいる。
MAX_GPU_BONE_MATRICES_UNIFORMBUFFER = 75

物理や揺れ物
• 物理アセット
• AnimDynamics
• RigidBody
• Trail Controller
• ✘NvCloth（モバイルだと不可）
• ?Chaos（モバイルだと不明）

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

UE4モバイルブートキャンプ

More Related Content

What's hot

Similar to UE4モバイルブートキャンプ

More from エピック・ゲームズ・ジャパン Epic Games Japan

UE4モバイルブートキャンプ