Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#UE4CEDEC
最新モバイルゲームの実例から見る
UE4のモバイル向け機能・Tipsを全部まるっとご紹介!
Epic Games Japan
岡田和也 星野瑠美子
#UE4CEDEC
自己紹介
• 岡田和也 (@pafuhana1213)
• 株式会社カプコンでエンジン・ゲーム開発を経験し、
2016年にEpicGamesJapanにサポートエンジニアとして入社
• 星野瑠美子
• オートデスク株式会社で...
#UE4CEDEC
講演スライドについて
既に公開済みです!
公式ブログ または
#UE4CEDEC をチェック!
#UE4CEDEC
お品書き
• モバイルゲーム市場におけるUE4の現状
• UE4におけるモバイル向けの機能・Tips紹介
• モバイル向けの最新レンダリング機能の紹介
担当:岡田
担当:星野
#UE4CEDEC
モバイルゲーム市場におけるUE4の現状
#UE4CEDEC
Hit ~Heros of Incredible Tales ~
• グローバル版が配信から19日で累計300万DL突破
• 国内でも2016年末にリリースされ、
先月に国内ユーザ数が300万を突破
LineageⅡ Rev...
#UE4CEDEC
【リネージュ2 レボリューション】トレーラームービー_30sec_ver.
https://youtu.be/DCRYuSDjfmM
#UE4CEDEC
各ストアのランキング第 1 位を獲得!
#UE4CEDEC
さらに、開発中の注目タイトルも多数!
• BladeⅡ The Return of The Evil
• Oceanhom 2 : Knights of the Lost Realm
#UE4CEDEC
さらにさらに、 Epic Games もモバイルタイトルを開発
中!
Battle Breakers
• 戦術ロールプレイゲーム
• 2.5Dアニメーション
• モバイル・PC間の
クロスプラットフォームプレイ
Battle...
#UE4CEDEC
これらのプロジェクトにおける知見や
頂いた要望を満たすための機能が
エンジンにドンドン追加されていってます!
#UE4CEDEC
UE4 + モバイルの波が来てる…!
#UE4CEDEC
LineageⅡ:R 23日国内開始
早くも行列が…
#UE4CEDEC
UE4におけるモバイル向けの機能・Tips紹介
~How to ride this big wave~
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの?
• モバイル開発あるある問題とその対策・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
ここからは更にモバイルに特化した話に…!
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの?
• モバイル開発あるある問題とその対策・Tips紹介
#UE4CEDEC
モバイル向けの最新レンダリング機能の
紹介
#UE4CEDEC
Unreal Engine 4のレンダラは3種類
• ディファードレンダラ
• フォワードレンダラ
(デスクトップフォーワード)
• モバイルレンダラ
#UE4CEDEC
モバイルレンダラの特徴
• フォワードレンダラ
• マテリアルシステムはデスクトップ
と同じ物理ベース
• フルHDRライティングサポート
ライティングやシャドウ
ポストプロセスで一部機能が
制限されていた
機能強化中
ハイエンドモバイル向け設定が追加
• ES_2.0
• ES_2.0からES_3.1までの
端末をターゲット
• スケーラブルな設定
• 互換性重視
• テクスチャサンプル数が8
に制限される
• ES_3.1
• ハイエンドモバイル向け設定
...
#UE4CEDEC
モバイルレンダラでどこまでできる?
• ProtoStarデモ
• SamsungとEpicの共同開発
• 2016年2月発表
• ターゲット:Galaxy S7
• Vulkan API使用
• 1080p、30fps
#UE4CEDEC
モバイルレンダラでどこまでできる?
#UE4CEDEC
インタラクティブな反射表現
• 反射を行う平面を指定
• リフレクションキャプチャ
によってリアルタイムに
反射を表現
#UE4CEDEC
リフラクション(屈折)
• 水やガラスといった光が
屈折するマテリアル表現
• マテリアルで屈折度などの
パラメータを指定
#UE4CEDEC
GPUパーティクル
• パーティクル位置、
速度をGPUで計算
• ベクターフィールド
にも対応
• 注意:コリジョンは
未サポート
#UE4CEDEC
ダイナミックな影描画
• 動くオブジェクトに対する影の描画
• ディレクショナルライト(平行光源)が
シーンに必要
• 2つの手法
• 変調シャドウ
• カスケードシャドウマップ(CSM)シャドウ
#UE4CEDEC
動くオブジェクトの影:
変調シャドウ
固定した平行光源に対する影
影の形状を周りに投影
利点
• 投影する時の色を指定できる
• 処理が軽い
欠点
• シーンに焼きこまれた影とは馴染まない
#UE4CEDEC
動くオブジェクトの影:
CSMシャドウ+固定平行光源
• 事前計算による影と、
動くオブジェクトの影が
馴染むようにブレンド
• ProtoStarデモもこの組
み合わせを使用!
#UE4CEDEC
動くオブジェクトの影:
CSMシャドウ+固定平行光源
• 事前計算による影と、
動くオブジェクトの影が
馴染むようにブレンド
• ProtoStarデモもこの組
み合わせを使用!
#UE4CEDEC
完全にダイナミックな影:
CSMシャドウ+動く平行光源
ライティングをすべて動的に処理
利点
• ランタイム実行時にライト方向、強さなど
を変更可能
• 事前計算のライティングデータがない
• メモリ使用量とパッケージサイズ...
#UE4CEDEC
ダイナミックポイントライトによるライティング
• プロジェクト設定のMax Movable
Point Light(動的ライト最大数)を0よ
り大きくすることで使用可能
• 使用用途例:爆発や閃光といった、
エフェクトのアク...
#UE4CEDEC
ライティングチャンネル
• 同じチャンネルのオブジェクトにのみ選択的
にライトを適用できる
• モバイルでは4.13からサポート
#UE4CEDEC
モバイルで利用できるポストプロセスエフェクト
• ブルーム
• トーンマッパー
• 被写界深度
• 自動露光
• ポストプロセスマテリアル
(カスタムポストプロセス)
• アンチエイリアスなど
#UE4CEDEC
ポストプロセス: 高品質被写界深度
#UE4CEDEC
ポストプロセス: 映画的トーンマッパー
• アーティスティックな表現が可能なカラーグレーディング効果
#UE4CEDEC
ポストプロセス:ポストプロセスマテリアル
• ノードベースの
マテリアルエディタで
新しいポストプロセス
エフェクトを作成可能
#UE4CEDEC
ポストプロセス: カスタムデプス
• 指定したオブジェクト
を独自の深度バッファ
に描画
• カスタムエフェクト例
• アウトライン表示
• 他のオブジェクトで
隠されたメッシュの
描画
#UE4CEDEC
ポストプロセス: カスタムステンシル
• カスタムデプスの拡張の
ようなもの
• 書き込む値を指定可能
• カスタムエフェクト例:
色指定付きアウトライン
表示など
#UE4CEDEC
モバイル向けの最新レンダリング機能まとめ
• ハイエンド向けのES3.1設定
の開発が可能に
• 機能追加が進んでいて、
リッチなグラフィックを
モバイルでも実現できます!
• 反射
• リアルタイムの影
• GPUパーティ...
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル向けの最新レンダリング機能の紹介
• モバイル開発でよく使うあの機能、UE4のどこにあるの?
• モバイル開発あるある問題とその対策・Tips紹介
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4
#UE4CEDEC
モバイルプレビュー機能
モバイル用レンダラをエミュレートし
エディタ上で描画結果を確認
• エディタを再起動することなく
ツールバーから簡単に切替可能
• OpenGL ES3.1, Vulkan, Metalに対応済
公式...
#UE4CEDEC
New! Improvements to "Device Mobile Preview“ (4.18)
特定のデバイスにおけるハード性能・設定をより細かくエミュレート
• 画面解像度
• GPU機能
• デバイスプロファイル...
#UE4CEDEC
対象デバイス設定は自由に編集・追加可能
• Engine¥Content¥Editor¥PIEPreviewDeviceSpecs
実は4.17でコッソリ入ってます
• エディタ設定の
Enable mobile PIE w...
#UE4CEDEC
注意!
最終的なチェックは必ず実機上で行うこと!
• 特定の端末ではエディタと異なる描画結果になる可能性がある
モバイルプレビュー機能は
「作業の方向性の確認」として使うことを推奨
なんかちゃうやん…
よっしゃ、調整完璧や!
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4
#UE4CEDEC
Android / iOS プラットフォーム対応
基本的な機能は全てエンジン側で実装済み!
• Blueprintのノード、C++関数を提供
プラットフォーム・ストアの違いを意識しなくてもいい作りに!
#UE4CEDEC
今回は話さないこと
各プラットフォームにおける登録・設定作業
• Google Play Console ヘルプセンター
• iTunes Connect
UE4側での初期セットアップ・
プラットフォームとの連携作業
• A...
#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を指定する形式
...
#UE4CEDEC
少し補足タイム
(脱線とも言う)
#UE4CEDEC
Firebaseってなに?
Googleが運営しているバックエンドサービス
サポートしている機能
• モバイルアナリティクス
• プッシュ通知
• パフォーマンス解析
• クラッシュレポート などなど
現時点のUE4では未対...
#UE4CEDEC
今のUE4 (4.17) でFirebaseを使うには?
Firebase C++ SDKを自力インテグレートする
• クラウドメッセージ機能を移植した事例があるが…
「Ultimate Mobile Kit Firebas...
#UE4CEDEC
マーケットプレイスのアセットの利用規約について
• すべて商用利用・改変可能
• 利用・共有範囲について
• 購入者(個人・会社)が所属する全プロジェクトで利用可能
• 購入者の所属プロジェクトに関わる開発者・会社間で共有可...
#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://apsal...
#UE4CEDEC
マーケットプレイスで販売されているアセット
• Google Analytics Provider (54.99ドル)
• GameAnalytics (無料)
• Chartboost Plugin (無料)
• Ulti...
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4
#UE4CEDEC
コンテンツの追加・更新について
運営型ゲームにおいて
コンテンツアップデートに掛かるコストは重要!
アセット間の依存関係DLサイズによる負荷人 / 時間的コスト
#UE4CEDEC
まず結論から
プロジェクト・更新内容に適した作業フローを柔軟に構築可能です
• 各パッケージタイプ (Release, Patch, DLC )を組み合わせる形
プロジェクト内の開発者の大半は を気にする必要ありません
• ...
#UE4CEDEC
まず結論から
パッケージの作成・インストールは、専用ツール・機能を用意済みです
• Project Launcher, Http Chunk Installer
• モバイルパッケージングウィザード, Mobile Patc...
#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...
#UE4CEDEC
よくあるユースケース
新キャラクターを追加したい!
#UE4CEDEC
Releaseの場合
• 作るの簡単!アセット間の依存関係問題もなし!
• ストアにアップロードする必要あり
• 大量のダウンロードをユーザに強制
1.0 1.1
1000MB
ダウンロード発生!
#UE4CEDEC
Patchの場合
• 作るの簡単!アセット間の依存関係問題もなし!
• コンテンツアップデートの場合、ストアを経由する必要なし!
• 必要に応じた最小限のダウンロード
1MBだけダウンロード
1.0 1.0.1
1.0 to...
#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 (パッケージング設定) を作成
• 対象となるレベル・バージョン情報 などなど
アセット間の依存関係はこのツールが全て解決
• 指定したレベルに紐づくアセットのみをパッケージ...
#UE4CEDEC
Release, Patch, DLCをインストールするには?
Http Chunk Installer におまかせ!
• Release, Patch, DLC全てに対応
• 必要に応じて、ゲームプレイ中に
バックグランド...
#UE4CEDEC
今日忘れてはいけないこと
#UE4CEDEC
HTTP Chunk Installer is GOD
#UE4CEDEC
公式ブログで後日公開される
紹介記事にご期待下さい!
#UE4CEDEC
あ、言い忘れてました!
#UE4CEDEC
初回リソースダウンロード
必要最小限におさめたパッケージを各ストアにアップし、
初回起動時に残りのコンテンツを別途ダウンロード
50MB
50MB
800MB
#UE4CEDEC
モバイルパッケージングウィザード
初回リソースダウンロード用の
Release、DLC用Profileの作成支援機能
• レベル・テクスチャフォーマットを指定するだけ
• 公式ドキュメントへのリンク
#UE4CEDEC
Mobile Patch Utility ノード
初回リソースのダウンロード・インストール用のBPを用意
用意されている機能、かなり豊富です!
• ダウンロード・インストール開始
• ダウンロード進捗状況の取得
• 各処理の...
#UE4CEDEC
• モバイルプレビュー機能
• Android / iOS の プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• その他
モバイル開発でよく使うあの機能 in UE4
#UE4CEDEC
Webブラウザ
UMGで用意されている
Web Browserウィジェットを使うだけ!
#UE4CEDEC
キーボード
テキストボックスにタッチすると自動的に表示・操作可能に
UE4.16でバーチャルキーボード対応が追加 ( Androidのみ )
• アプリケーション独自のカスタマイズが可能に
#UE4CEDEC
動画再生 ( Media Framework 2.0 )
Android / iOSに標準対応 (もちろん他のプラットフォームにも)
• オーディオ再生 ・ ストリーミング再生にも対応済
• UE4.18で、更に改良された
...
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました!
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました!
• モバイルプレビュー機能
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました!
• モバイルプレビュー機能
• 各プラットフォーム対応
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました!
• モバイルプレビュー機能
• 各プラットフォーム対応
• ゲーム内広告・アナリティクス
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました!
• モバイルプレビュー機能
• 各プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
#UE4CEDEC
ここまでのまとめ
一昔前のUE4が弱かった
モバイル開発特有の機能・サービスへの対応が整いました!
• モバイルプレビュー機能
• 各プラットフォーム対応
• ゲーム内広告・アナリティクス
• コンテンツアップデート
• そ...
#UE4CEDEC
アウトライン
• PC開発環境とモバイル開発環境の違い
• モバイル開発でよく使うあの機能、UE4のどこにあるの?
• モバイル開発あるある問題とその対策・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
• OpenGL ES2 or E...
#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スケーリング
• 解像度に応じた自動スケーリングサポート
• カーブを編集することでスケーリングを調整
アンカー
• 解像度変更時の
配置・ストレッチングのルールを制御
• 用意されたプリ...
#UE4CEDEC
エディタ上でのスクリーンサイズ設定
代表的なデバイスの解像度に応じた
プリセットを用意 ( 縦・横 両対応 )
• 特殊デバイス向けに解像度の指定も可能
#UE4CEDEC
4.17から
ドラッグで動かせて
可視化されるように!
超わかりやすい!
#UE4CEDEC
端末・スペックに応じた設定・調整をするには?
• デバイスプロファイル
• 各ハードに応じたプリセット毎に
各種パラメータ・設定を調整
#UE4CEDEC
端末・スペックに応じた設定・調整をするには?
• デバイスプロファイル
• 各ハードに応じたプリセット毎に
各種パラメータ・設定を調整
• Feature Level Switch / Quality Switch
• 端末...
#UE4CEDEC
端末・スペックに応じた設定・調整をするには?
• デバイスプロファイル
• 各ハードに応じたプリセット毎に
各種パラメータ・設定を調整
• Feature Level Switch / Quality Switch
• 端末...
#UE4CEDEC
バッテリー消費・発熱を抑えたい!
#UE4CEDEC
バッテリー消費・発熱を無視すると…
コンテンツの寿命を大きく縮めることに…!
例えば
• ユーザの継続率への影響
• 熱によりパフォーマンスが低下し…という悪循環
#UE4CEDEC
バッテリー消費・発熱問題を解決するには?
• 端末・スペックに応じた設定・調整を行う
• コンテンツのクオリティを落とさずに
パフォーマンスを改善・維持する最適化方法を、
?
調査し、選択する
#UE4CEDEC
大前提
「最適化」 は
「コンテンツのクオリティを落とすこと」 ではない
適切なプロファイリングを行い、
どんな対応をするか選択しましょう!
#UE4CEDEC
適切なプロファイルのやり方を知りたい…?
#UE4CEDEC
講演スライドについて
既に公開済みです!
公式ブログ または
#UE4CEDEC をチェック!
#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:...
#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.ScreenP...
#UE4CEDEC
UIのキャッシング
#UE4CEDEC
Invalidation PanelによるUMGの負荷軽減
• 子要素をキャッシュすることで
不要な描画・更新処理をキャッシュ(スキップ)
• 子要素毎にキャッシュするか否かを指定することも可能
• Is Volatileフ...
#UE4CEDEC
Battle Breakersにおける高速化事例
Stat slateによる計測
• Invalidation panel使用前
• Processed : 573
• Invalidation panel使用後
• Pro...
#UE4CEDEC
Invalidation Panel用のデバッグ機能
• slate.InvalidationDebugging 1
• Green: キャッシュされたWidget
• Blue : 子要素との
相対的な位置関係もキャッシュ...
#UE4CEDEC
Retainer Boxによる描画負荷の分散
子要素をレンダーターゲットに描画することで、
描画頻度・タイミングを変更可能
#UE4CEDEC
本講演のまとめ
#UE4CEDEC
UE4における基本機能の「一部」をご紹介
• ほぼ全ての機能がモバイル開発でも使える!
• 非エンジニアが 「自分のアイデア」を「自分で実装」できる
#UE4CEDEC
UE4のモバイルレンダラーはどこまでできる?
• 様々な端末・ハードに対応済み
• ES2.0 から ES3.1, Vulkan, Metalまで
• ハイエンドモバイル向けの機能を数多くご用意
#UE4CEDEC
モバイル開発で必須な機能が既に揃っている!
• モバイル特有の機能への対応状況
• モバイル開発向けの作業を支援する様々な機能
#UE4CEDEC
モバイル開発におけるTipsの「一部」をご紹介
• 「端末・スペック」と「バッテリー・発熱」を考慮した
パフォーマンス設定・調整を支援する機能の紹介
• 実際のプロジェクトで使われた最適化・改善テクニックをご紹介
#UE4CEDEC
まだまだ話したいこと沢山ありますが…!
モバイル開発でよく使うあの機能
• LODの自動生成
• テクスチャアトラスの自動生成
• シェーダキャッシュ などなど
最新モバイルARへの対応
• Apple ARKit
• Go...
#UE4CEDEC
最後に
本講演・資料が
「UE4でモバイル開発を進めている方」
「UE4でモバイル開発をすることを検討している方」
のお役に少しでも立てれば幸いです
そして、今後も情報を ガンガン共有し、
開発者の皆さんのサポートできればと...
#UE4CEDEC
#UE4CEDEC
登壇企業 (敬称略)
株式会社スクウェア・エニックス
株式会社
バンダイナムコエンターテインメント
Enhance Games
グーグル合同会社
ソレイユ株式会社
株式会社ポリゴン・ピクチュアズ
株式会社コロプラ
株式会社バ...
#UE4CEDEC
絶賛参加登録受付中!
公式サイト:
https://unrealevent.eventcloudmix.com/
日時:
2017/10/08 (日)
場所:
ここ!
#UE4CEDEC
ご清聴
ありがとうございました!
本講演に関する質問はこちらからどうぞ!
E-mail : kaz.okada@epicgames.com
Twitter : @pafuhana1213
展示ブースにEGJのスタッフがいます...
Upcoming SlideShare
Loading in …5
×

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

7,792 views

Published on

本資料は旧版です。最新内容は以下のリンクよりご確認をお願いいたします。
https://www.slideshare.net/EpicGamesJapan/cedeckyushu-2017-ue4tips



SlideShare上での表示ですとノードの文字が見えないため、Download推奨です。

2017年8月31日にパシフィコ横浜にて開催されたCEDEC2017の講演資料です。UE4におけるモバイル向け機能・開発時の注意点・Tipsについて説明しています。(Epic Games Japan 岡田 和也)
http://cedec.cesa.or.jp/2017/session/ENG/s59102d4c80be6/

Published in: Engineering
  • Be the first to comment

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

  1. 1. #UE4CEDEC 最新モバイルゲームの実例から見る UE4のモバイル向け機能・Tipsを全部まるっとご紹介! Epic Games Japan 岡田和也 星野瑠美子
  2. 2. #UE4CEDEC 自己紹介 • 岡田和也 (@pafuhana1213) • 株式会社カプコンでエンジン・ゲーム開発を経験し、 2016年にEpicGamesJapanにサポートエンジニアとして入社 • 星野瑠美子 • オートデスク株式会社でソフトウェアエンジニアとして Maya、Softimage等の技術コンサルティング、サポートを担当 2016年7月にEpicGamesJapanに入社
  3. 3. #UE4CEDEC 講演スライドについて 既に公開済みです! 公式ブログ または #UE4CEDEC をチェック!
  4. 4. #UE4CEDEC お品書き • モバイルゲーム市場におけるUE4の現状 • UE4におけるモバイル向けの機能・Tips紹介 • モバイル向けの最新レンダリング機能の紹介 担当:岡田 担当:星野
  5. 5. #UE4CEDEC モバイルゲーム市場におけるUE4の現状
  6. 6. #UE4CEDEC Hit ~Heros of Incredible Tales ~ • グローバル版が配信から19日で累計300万DL突破 • 国内でも2016年末にリリースされ、 先月に国内ユーザ数が300万を突破 LineageⅡ Revolution • サービス開始から30日間で約200億円の売上 • 8/23(水)に国内でもサービス開始!!! UE4製モバイルタイトルが国内外で大ヒット!
  7. 7. #UE4CEDEC 【リネージュ2 レボリューション】トレーラームービー_30sec_ver. https://youtu.be/DCRYuSDjfmM
  8. 8. #UE4CEDEC 各ストアのランキング第 1 位を獲得!
  9. 9. #UE4CEDEC さらに、開発中の注目タイトルも多数! • BladeⅡ The Return of The Evil • Oceanhom 2 : Knights of the Lost Realm
  10. 10. #UE4CEDEC さらにさらに、 Epic Games もモバイルタイトルを開発 中! Battle Breakers • 戦術ロールプレイゲーム • 2.5Dアニメーション • モバイル・PC間の クロスプラットフォームプレイ Battle Breakers – Gameplay Trailer - https://youtu.be/6qr0-d3eDrc
  11. 11. #UE4CEDEC これらのプロジェクトにおける知見や 頂いた要望を満たすための機能が エンジンにドンドン追加されていってます!
  12. 12. #UE4CEDEC UE4 + モバイルの波が来てる…!
  13. 13. #UE4CEDEC LineageⅡ:R 23日国内開始 早くも行列が…
  14. 14. #UE4CEDEC UE4におけるモバイル向けの機能・Tips紹介 ~How to ride this big wave~
  15. 15. #UE4CEDEC アウトライン • PC開発環境とモバイル開発環境の違い • モバイル向けの最新レンダリング機能の紹介 • モバイル開発でよく使うあの機能、UE4のどこにあるの? • モバイル開発あるある問題とその対策・Tips紹介
  16. 16. #UE4CEDEC PC開発環境とモバイル開発環境の違い
  17. 17. #UE4CEDEC UE4の各機能のモバイル対応状況 PC・コンソール開発で使用する機能の殆どは モバイルでも問題なく使うことができます! 対象となるハードの関係で 一部の機能(特に描画機能)には制限が幾つか… • 今後のモバイルデバイスの発展・普及に期待!
  18. 18. #UE4CEDEC 実際の開発タイトルでは… LineageⅡ Revolutionでは UE4の各標準機能を使って開発されています!
  19. 19. #UE4CEDEC Blueprintを使ったビジュアルスクリプティング
  20. 20. #UE4CEDEC ノードベースのMaterialエディタ
  21. 21. #UE4CEDEC UMGによるゲーム内UIの作成
  22. 22. #UE4CEDEC シネマティックカットシーンツール 「シーケンサー」
  23. 23. #UE4CEDEC その他にも便利な機能が多数! • 強力なライティング機能 • ランドスケープによる地形(テレイン)作成 • AI作成用のビヘイビアツリー機能 などなど… 非エンジニアが 「自分のアイデア」を「自分で実装」できる環境を提供!
  24. 24. #UE4CEDEC イテレーションを早く回すために… UE4の理念 「プランナー・アーティストに力を」 • エンジニアの手を借りなくても、自由に製作・調整作業ができる! • エンジニアは自身の作業に専念できる! 開発サイクルが短いモバイル開発においては このイテレーションの早さは特に効果的です!
  25. 25. #UE4CEDEC ここまでのまとめ • UE4で用意されている機能はモバイル開発でも使えます! • 非エンジニアが 「自分のアイデア」を「自分で実装」できる! • 開発サイクルが短いモバイル開発では特に効果的!
  26. 26. #UE4CEDEC PC開発環境とモバイル開発環境の違い おわり
  27. 27. #UE4CEDEC ここからは更にモバイルに特化した話に…!
  28. 28. #UE4CEDEC アウトライン • PC開発環境とモバイル開発環境の違い • モバイル向けの最新レンダリング機能の紹介 • モバイル開発でよく使うあの機能、UE4のどこにあるの? • モバイル開発あるある問題とその対策・Tips紹介
  29. 29. #UE4CEDEC モバイル向けの最新レンダリング機能の 紹介
  30. 30. #UE4CEDEC Unreal Engine 4のレンダラは3種類 • ディファードレンダラ • フォワードレンダラ (デスクトップフォーワード) • モバイルレンダラ
  31. 31. #UE4CEDEC モバイルレンダラの特徴 • フォワードレンダラ • マテリアルシステムはデスクトップ と同じ物理ベース • フルHDRライティングサポート ライティングやシャドウ ポストプロセスで一部機能が 制限されていた 機能強化中
  32. 32. ハイエンドモバイル向け設定が追加 • ES_2.0 • ES_2.0からES_3.1までの 端末をターゲット • スケーラブルな設定 • 互換性重視 • テクスチャサンプル数が8 に制限される • ES_3.1 • ハイエンドモバイル向け設定 • Open GL ES 3.1 • Vulkan(Android) • Metal(iOS) • 使用できるテクスチャサンプル数 が16に増加 • パフォーマンス向上 モバイル向けには2種類の機能レベル(Feature Level)設定を用意
  33. 33. #UE4CEDEC モバイルレンダラでどこまでできる? • ProtoStarデモ • SamsungとEpicの共同開発 • 2016年2月発表 • ターゲット:Galaxy S7 • Vulkan API使用 • 1080p、30fps
  34. 34. #UE4CEDEC モバイルレンダラでどこまでできる?
  35. 35. #UE4CEDEC インタラクティブな反射表現 • 反射を行う平面を指定 • リフレクションキャプチャ によってリアルタイムに 反射を表現
  36. 36. #UE4CEDEC リフラクション(屈折) • 水やガラスといった光が 屈折するマテリアル表現 • マテリアルで屈折度などの パラメータを指定
  37. 37. #UE4CEDEC GPUパーティクル • パーティクル位置、 速度をGPUで計算 • ベクターフィールド にも対応 • 注意:コリジョンは 未サポート
  38. 38. #UE4CEDEC ダイナミックな影描画 • 動くオブジェクトに対する影の描画 • ディレクショナルライト(平行光源)が シーンに必要 • 2つの手法 • 変調シャドウ • カスケードシャドウマップ(CSM)シャドウ
  39. 39. #UE4CEDEC 動くオブジェクトの影: 変調シャドウ 固定した平行光源に対する影 影の形状を周りに投影 利点 • 投影する時の色を指定できる • 処理が軽い 欠点 • シーンに焼きこまれた影とは馴染まない
  40. 40. #UE4CEDEC 動くオブジェクトの影: CSMシャドウ+固定平行光源 • 事前計算による影と、 動くオブジェクトの影が 馴染むようにブレンド • ProtoStarデモもこの組 み合わせを使用!
  41. 41. #UE4CEDEC 動くオブジェクトの影: CSMシャドウ+固定平行光源 • 事前計算による影と、 動くオブジェクトの影が 馴染むようにブレンド • ProtoStarデモもこの組 み合わせを使用!
  42. 42. #UE4CEDEC 完全にダイナミックな影: CSMシャドウ+動く平行光源 ライティングをすべて動的に処理 利点 • ランタイム実行時にライト方向、強さなど を変更可能 • 事前計算のライティングデータがない • メモリ使用量とパッケージサイズの削減 欠点 • すべてのシーン内オブジェクトに対して影計 算を行うため描画コストが増加
  43. 43. #UE4CEDEC ダイナミックポイントライトによるライティング • プロジェクト設定のMax Movable Point Light(動的ライト最大数)を0よ り大きくすることで使用可能 • 使用用途例:爆発や閃光といった、 エフェクトのアクセント • 影は落ちない • シェーダが追加生成されることに 注意
  44. 44. #UE4CEDEC ライティングチャンネル • 同じチャンネルのオブジェクトにのみ選択的 にライトを適用できる • モバイルでは4.13からサポート
  45. 45. #UE4CEDEC モバイルで利用できるポストプロセスエフェクト • ブルーム • トーンマッパー • 被写界深度 • 自動露光 • ポストプロセスマテリアル (カスタムポストプロセス) • アンチエイリアスなど
  46. 46. #UE4CEDEC ポストプロセス: 高品質被写界深度
  47. 47. #UE4CEDEC ポストプロセス: 映画的トーンマッパー • アーティスティックな表現が可能なカラーグレーディング効果
  48. 48. #UE4CEDEC ポストプロセス:ポストプロセスマテリアル • ノードベースの マテリアルエディタで 新しいポストプロセス エフェクトを作成可能
  49. 49. #UE4CEDEC ポストプロセス: カスタムデプス • 指定したオブジェクト を独自の深度バッファ に描画 • カスタムエフェクト例 • アウトライン表示 • 他のオブジェクトで 隠されたメッシュの 描画
  50. 50. #UE4CEDEC ポストプロセス: カスタムステンシル • カスタムデプスの拡張の ようなもの • 書き込む値を指定可能 • カスタムエフェクト例: 色指定付きアウトライン 表示など
  51. 51. #UE4CEDEC モバイル向けの最新レンダリング機能まとめ • ハイエンド向けのES3.1設定 の開発が可能に • 機能追加が進んでいて、 リッチなグラフィックを モバイルでも実現できます! • 反射 • リアルタイムの影 • GPUパーティクル • ポストプロセスの強化
  52. 52. #UE4CEDEC アウトライン • PC開発環境とモバイル開発環境の違い • モバイル向けの最新レンダリング機能の紹介 • モバイル開発でよく使うあの機能、UE4のどこにあるの? • モバイル開発あるある問題とその対策・Tips紹介
  53. 53. #UE4CEDEC • モバイルプレビュー機能 • Android / iOS の プラットフォーム対応 • ゲーム内広告・アナリティクス • コンテンツアップデート • その他 モバイル開発でよく使うあの機能 in UE4
  54. 54. #UE4CEDEC モバイルプレビュー機能 モバイル用レンダラをエミュレートし エディタ上で描画結果を確認 • エディタを再起動することなく ツールバーから簡単に切替可能 • OpenGL ES3.1, Vulkan, Metalに対応済 公式ドキュメント:モバイルプレビュア
  55. 55. #UE4CEDEC New! Improvements to "Device Mobile Preview“ (4.18) 特定のデバイスにおけるハード性能・設定をより細かくエミュレート • 画面解像度 • GPU機能 • デバイスプロファイル(後述) などなど
  56. 56. #UE4CEDEC 対象デバイス設定は自由に編集・追加可能 • Engine¥Content¥Editor¥PIEPreviewDeviceSpecs 実は4.17でコッソリ入ってます • エディタ設定の Enable mobile PIE with preview device launch options New! Improvements to "Device Mobile Preview“ (4.18)
  57. 57. #UE4CEDEC 注意! 最終的なチェックは必ず実機上で行うこと! • 特定の端末ではエディタと異なる描画結果になる可能性がある モバイルプレビュー機能は 「作業の方向性の確認」として使うことを推奨 なんかちゃうやん… よっしゃ、調整完璧や!
  58. 58. #UE4CEDEC • モバイルプレビュー機能 • Android / iOS の プラットフォーム対応 • ゲーム内広告 • コンテンツアップデート • その他 モバイル開発でよく使うあの機能 in UE4
  59. 59. #UE4CEDEC Android / iOS プラットフォーム対応 基本的な機能は全てエンジン側で実装済み! • Blueprintのノード、C++関数を提供 プラットフォーム・ストアの違いを意識しなくてもいい作りに!
  60. 60. #UE4CEDEC 今回は話さないこと 各プラットフォームにおける登録・設定作業 • Google Play Console ヘルプセンター • iTunes Connect UE4側での初期セットアップ・ プラットフォームとの連携作業 • Android クイックスタート • iOS クイックスタート
  61. 61. #UE4CEDEC ログイン・ログアウト Blueprintのみで実装可能!(もちろん、C++でも)
  62. 62. #UE4CEDEC アプリ内課金(In-App Purchase) Blueprintのみで実装可能!(もちろん、C++でも) • 引数に指定するアイテムIDを プラットフォーム間で合わせておくと 実装の共通化が楽! 公式ドキュメント: アプリ内課金の使用方法
  63. 63. #UE4CEDEC リーダーボード Blueprintのみで実装可能!(もちろん、C++でも) • 引数に指定するアイテムIDを Android, iOSで合わせておくと 以下略 公式ドキュメント: モバイルサービスの リーダーボードの使用方法
  64. 64. #UE4CEDEC アチーブメント(実績) Blueprintのみで実装可能!(もちろん、C++でも) • 引数に指定するアイテムIDを 以下略 公式ドキュメント: モバイルサービスの アチーブメントの使用方法
  65. 65. #UE4CEDEC プッシュ通知 (ローカル) Blueprintのみで実装可能!(もちろん、C++でも) • バッジ対応は…現状はiOSのみ
  66. 66. #UE4CEDEC プッシュ通知 (リモート) ゲーム内で必要となる処理・イベントはBlueprint ・ C++で用意 • リモート通知サービスとのやり取りは 各サービスに対応したプラグイン内で行われる
  67. 67. #UE4CEDEC UE4が標準対応しているリモート通知サービス Android • Google Cloud Messaging (UE4.16) • Firebaseコンソールで発行される Legacy Server keyを指定する形式 iOS • Apple Push Notification Service ( Sandbox )
  68. 68. #UE4CEDEC 少し補足タイム (脱線とも言う)
  69. 69. #UE4CEDEC Firebaseってなに? Googleが運営しているバックエンドサービス サポートしている機能 • モバイルアナリティクス • プッシュ通知 • パフォーマンス解析 • クラッシュレポート などなど 現時点のUE4では未対応… • UE4.18で Test Lab( クラウドベースのアプリテスト基盤 ) 機能には対応予定
  70. 70. #UE4CEDEC 今のUE4 (4.17) でFirebaseを使うには? Firebase C++ SDKを自力インテグレートする • クラウドメッセージ機能を移植した事例があるが… 「Ultimate Mobile Kit Firebase」を使う • マーケットプレイスにて 174.99ドル で販売中 • 最新バージョンへの対応が非常に早い • 全ソースコード付き
  71. 71. #UE4CEDEC マーケットプレイスのアセットの利用規約について • すべて商用利用・改変可能 • 利用・共有範囲について • 購入者(個人・会社)が所属する全プロジェクトで利用可能 • 購入者の所属プロジェクトに関わる開発者・会社間で共有可能 • その他 • 著作権に関する問題はEpicGames内でレビュー済み • 記載がない限り、権利表記は不要 (表記すると製作者は嬉しいので是非!) • 公式サイト マーケットプレイス FAQページ
  72. 72. #UE4CEDEC 脱線おわり
  73. 73. #UE4CEDEC • モバイルプレビュー機能 • Android / iOS の プラットフォーム対応 • ゲーム内広告・アナリティクス • コンテンツアップデート • その他 モバイル開発でよく使うあの機能 in UE4
  74. 74. #UE4CEDEC バナー広告 Blueprintのみで実装可能!(もちろん、C++でも) 公式ドキュメント: インゲーム広告の使用方法 え、私の給料少なすぎ!? 話題のスマホRPGが・・・
  75. 75. #UE4CEDEC インターステイシャル広告 (全面広告) Blueprintのみで実装可能!(もちろん、C++でも) • ただし、Androidのみ(iOSは未対応) ダウンロード なう!
  76. 76. #UE4CEDEC 動画広告( Rewarded Video ) 残念ながら未対応… • みなさまの熱いリクエストをお待ちしております! 動画見ると 30コインGet!
  77. 77. #UE4CEDEC 広告表示用プラグインの紹介 Universal Mobile Ads (149.99ドル) • 各広告タイプにAndroid / iOS 両対応 • 最新バージョンへの対応が非常に早い • 全ソースコード付き
  78. 78. #UE4CEDEC インゲーム アナリティクス (解析ツール) ゲーム内で必要となる処理・イベントはBlueprint ・ C++で用意 • サービスとのやり取りは 各サービスに対応したプラグイン内で行われる 公式ドキュメント ブループリントアナリティクスプラグイン
  79. 79. #UE4CEDEC UE4が標準対応しているサービス • Flurry • https://developer.yahoo.com/analytics/ • UE4公式ドキュメントの解説ページ • Apsalar • https://apsalar.com/ • UE4公式ドキュメントの解説ページ • Adjust • https://www.adjust.com/
  80. 80. #UE4CEDEC マーケットプレイスで販売されているアセット • Google Analytics Provider (54.99ドル) • GameAnalytics (無料) • Chartboost Plugin (無料) • Ultimate Mobile Kit Firebase (174.99ドル)
  81. 81. #UE4CEDEC • モバイルプレビュー機能 • Android / iOS の プラットフォーム対応 • ゲーム内広告・アナリティクス • コンテンツアップデート • その他 モバイル開発でよく使うあの機能 in UE4
  82. 82. #UE4CEDEC コンテンツの追加・更新について 運営型ゲームにおいて コンテンツアップデートに掛かるコストは重要! アセット間の依存関係DLサイズによる負荷人 / 時間的コスト
  83. 83. #UE4CEDEC まず結論から プロジェクト・更新内容に適した作業フローを柔軟に構築可能です • 各パッケージタイプ (Release, Patch, DLC )を組み合わせる形 プロジェクト内の開発者の大半は を気にする必要ありません • 通常通りの、アセットベースのリソース管理で問題ありません コンテンツ開発中にパッケージをビルド・DL・解凍する必要はありません • ユーザにコンテンツを配信するためにパッケージを作る人と DLC内のアセットを間接参照する人 だけ気にして下さい
  84. 84. #UE4CEDEC まず結論から パッケージの作成・インストールは、専用ツール・機能を用意済みです • Project Launcher, Http Chunk Installer • モバイルパッケージングウィザード, Mobile Patch Utility Battle Breakersにおける実績 • 海外の一部地域にて配信中( 約半年 ) • ストアを介さずに 新キャラクターの追加を実現済み
  85. 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. 86. #UE4CEDEC よくあるユースケース 新キャラクターを追加したい!
  87. 87. #UE4CEDEC Releaseの場合 • 作るの簡単!アセット間の依存関係問題もなし! • ストアにアップロードする必要あり • 大量のダウンロードをユーザに強制 1.0 1.1 1000MB ダウンロード発生!
  88. 88. #UE4CEDEC Patchの場合 • 作るの簡単!アセット間の依存関係問題もなし! • コンテンツアップデートの場合、ストアを経由する必要なし! • 必要に応じた最小限のダウンロード 1MBだけダウンロード 1.0 1.0.1 1.0 to 1.1
  89. 89. #UE4CEDEC さらにキャラクタを追加する場合 Patch に対して Patchを適用することはできません 1.0.1 1.0.2 1.0.1 to 1.2
  90. 90. #UE4CEDEC さらにキャラクタを追加する場合 前回のPatchを含むPatchを Releaseに適用 1.0 1.0.2 1.0 to 1.2 Patchを含んだReleaseに差し替え 1.0 1.2
  91. 91. #UE4CEDEC DLCの場合 • コンテンツアップデートの場合、ストアを経由する必要なし! • 必要に応じた、最小限のダウンロード • より自由度の高い作業フローを構築可能! 1.0 1.0 + DLC a1.0 DLC a1.0
  92. 92. #UE4CEDEC DLCの注意点 「Release が持つアセット」から 「DLCが持つアセット」 をハード(直接)参照することはできません Asset Registryを使って DLCが持つアセットをソフト(間接)参照する!
  93. 93. #UE4CEDEC Asset Registry さん はありますか? あるよ~どうぞ! やった! ないよ~ こんなイメージ ダウンロード! 公式ドキュメント アセットの参照 公式ドキュメント アセットレジストリ
  94. 94. #UE4CEDEC 各パッケージの利点・欠点を把握し 各プロジェクトにとって適切な手法を選びましょう!
  95. 95. #UE4CEDEC Release, Patch, DLCを作るには? Project Launcherを使う!
  96. 96. #UE4CEDEC Project Launcher Profile (パッケージング設定) を作成 • 対象となるレベル・バージョン情報 などなど アセット間の依存関係はこのツールが全て解決 • 指定したレベルに紐づくアセットのみをパッケージに Patch( DLC ) の作成で必要となる、 Releaseとの差分関係もこのツールが全て解決 • 指定バージョンから 変更・追加したアセットのみをパッケージに
  97. 97. #UE4CEDEC Release, Patch, DLCをインストールするには? Http Chunk Installer におまかせ! • Release, Patch, DLC全てに対応 • 必要に応じて、ゲームプレイ中に バックグランドでダウンロード・インストール可能 残念ながら、ドキュメントがまだ用意されていません… • Battle Breakersにおける活用例が UE4公式ブログにて後日紹介される予定です!
  98. 98. #UE4CEDEC 今日忘れてはいけないこと
  99. 99. #UE4CEDEC HTTP Chunk Installer is GOD
  100. 100. #UE4CEDEC 公式ブログで後日公開される 紹介記事にご期待下さい!
  101. 101. #UE4CEDEC あ、言い忘れてました!
  102. 102. #UE4CEDEC 初回リソースダウンロード 必要最小限におさめたパッケージを各ストアにアップし、 初回起動時に残りのコンテンツを別途ダウンロード 50MB 50MB 800MB
  103. 103. #UE4CEDEC モバイルパッケージングウィザード 初回リソースダウンロード用の Release、DLC用Profileの作成支援機能 • レベル・テクスチャフォーマットを指定するだけ • 公式ドキュメントへのリンク
  104. 104. #UE4CEDEC Mobile Patch Utility ノード 初回リソースのダウンロード・インストール用のBPを用意 用意されている機能、かなり豊富です! • ダウンロード・インストール開始 • ダウンロード進捗状況の取得 • 各処理の成功・失敗イベント • 空き容量・Wifi接続の確認 などなど 公式ドキュメント Mobile Patch Utilityノード
  105. 105. #UE4CEDEC • モバイルプレビュー機能 • Android / iOS の プラットフォーム対応 • ゲーム内広告・アナリティクス • コンテンツアップデート • その他 モバイル開発でよく使うあの機能 in UE4
  106. 106. #UE4CEDEC Webブラウザ UMGで用意されている Web Browserウィジェットを使うだけ!
  107. 107. #UE4CEDEC キーボード テキストボックスにタッチすると自動的に表示・操作可能に UE4.16でバーチャルキーボード対応が追加 ( Androidのみ ) • アプリケーション独自のカスタマイズが可能に
  108. 108. #UE4CEDEC 動画再生 ( Media Framework 2.0 ) Android / iOSに標準対応 (もちろん他のプラットフォームにも) • オーディオ再生 ・ ストリーミング再生にも対応済 • UE4.18で、更に改良された Media Framework 3.0をリリース予定 公式ドキュメント Media Framework
  109. 109. #UE4CEDEC ここまでのまとめ 一昔前のUE4が弱かった モバイル開発特有の機能・サービスへの対応が整いました!
  110. 110. #UE4CEDEC ここまでのまとめ 一昔前のUE4が弱かった モバイル開発特有の機能・サービスへの対応が整いました! • モバイルプレビュー機能
  111. 111. #UE4CEDEC ここまでのまとめ 一昔前のUE4が弱かった モバイル開発特有の機能・サービスへの対応が整いました! • モバイルプレビュー機能 • 各プラットフォーム対応
  112. 112. #UE4CEDEC ここまでのまとめ 一昔前のUE4が弱かった モバイル開発特有の機能・サービスへの対応が整いました! • モバイルプレビュー機能 • 各プラットフォーム対応 • ゲーム内広告・アナリティクス
  113. 113. #UE4CEDEC ここまでのまとめ 一昔前のUE4が弱かった モバイル開発特有の機能・サービスへの対応が整いました! • モバイルプレビュー機能 • 各プラットフォーム対応 • ゲーム内広告・アナリティクス • コンテンツアップデート
  114. 114. #UE4CEDEC ここまでのまとめ 一昔前のUE4が弱かった モバイル開発特有の機能・サービスへの対応が整いました! • モバイルプレビュー機能 • 各プラットフォーム対応 • ゲーム内広告・アナリティクス • コンテンツアップデート • その他の痒い所への対応
  115. 115. #UE4CEDEC アウトライン • PC開発環境とモバイル開発環境の違い • モバイル開発でよく使うあの機能、UE4のどこにあるの? • モバイル開発あるある問題とその対策・Tips紹介
  116. 116. #UE4CEDEC 端末・スペックに応じた設定・調整をするには?
  117. 117. #UE4CEDEC モバイル開発における大きな悩みの一つ ユーザに注目されるよう、よりハイクオリティ・高グラフィックに…! VS より多くの人に遊んでもらえるよう、様々な端末・スペックに対応…! VS 何故かいつもスケジュールに余裕がない…
  118. 118. #UE4CEDEC なので 各端末・スペックに応じて 適切な設定・調整を より簡単かつ効率的に行う必要があります UE4にはそれを支援する機能が 用意されています!
  119. 119. #UE4CEDEC 端末・スペックに応じた設定・調整をするには? • デバイスプロファイル • Feature Level Switch / Quality Switch • UMGの解像度別対応
  120. 120. #UE4CEDEC デバイスプロファイル GPU, SoC, デバイスモデル別のプリセット毎に 各種パラメータ・設定を調整可能 • CVar( Console Variables ) • Texture LOD Group
  121. 121. #UE4CEDEC CVar ( Console Variables ) 各機能の設定・クオリティを調整 例えば • 解像度のスケーリング係数 • 各ポストプロセスのクオリティ • ネットワーク同期回数の上限設定 • デバッグ表示のONOFF
  122. 122. #UE4CEDEC CVarのリスト・検索ページ エディタから開くことが可能
  123. 123. #UE4CEDEC Texture LOD Group テクスチャのLOD( MipMap )の設定をグループ毎に一括変更
  124. 124. #UE4CEDEC 端末・スペックに応じた設定・調整をするには? • デバイスプロファイル • Feature Level Switch / Quality Switch • UMGの解像度別対応
  125. 125. #UE4CEDEC Feature/Quality Level に応じたマテリアル最適化 Feature / Quality Level 毎に 異なるマテリアルを組むことが可能 • Feature Level • OpenGL ES2 or ES3.1 • Quality Level • Low, Medium, Highの 3段階
  126. 126. #UE4CEDEC 注意 マテリアルに配置されたテクスチャは ゲーム内での使用・未使用問わず cookされます ( =パッケージに含まれます ) 全てパッケージに含まれる!
  127. 127. #UE4CEDEC Quality Switchの落とし穴 各Quality Levelにおけるシェーダが「全て」メモリに載ります • 使用していない Quality Levelのシェーダは載せない設定があるけど… シェーダのロード時間は改善されないので注意
  128. 128. #UE4CEDEC Feature / Quality Level Switchを使う際は Switchによる処理分けが本当に必要なのか要検討 • プロファイルして、その判断が適切か確認! • デバイスプロファイルによる調整では不十分なのか? 落とし穴を理解した上で、運用フローを構築する! • レギュレーションの策定 • 定期的なチェック作業
  129. 129. #UE4CEDEC 端末・スペックに応じた設定・調整をするには? • デバイスプロファイル • Feature Level Switch / Quality Switch • UMGの解像度別対応
  130. 130. #UE4CEDEC 解像度に応じたUIの調整機能 DPIスケーリング • 解像度に応じた自動スケーリングサポート • カーブを編集することでスケーリングを調整 アンカー • 解像度変更時の 配置・ストレッチングのルールを制御 • 用意されたプリセット or カスタマイズ
  131. 131. #UE4CEDEC エディタ上でのスクリーンサイズ設定 代表的なデバイスの解像度に応じた プリセットを用意 ( 縦・横 両対応 ) • 特殊デバイス向けに解像度の指定も可能
  132. 132. #UE4CEDEC 4.17から ドラッグで動かせて 可視化されるように! 超わかりやすい!
  133. 133. #UE4CEDEC 端末・スペックに応じた設定・調整をするには? • デバイスプロファイル • 各ハードに応じたプリセット毎に 各種パラメータ・設定を調整
  134. 134. #UE4CEDEC 端末・スペックに応じた設定・調整をするには? • デバイスプロファイル • 各ハードに応じたプリセット毎に 各種パラメータ・設定を調整 • Feature Level Switch / Quality Switch • 端末・スペック・設定に応じたマテリアル調整
  135. 135. #UE4CEDEC 端末・スペックに応じた設定・調整をするには? • デバイスプロファイル • 各ハードに応じたプリセット毎に 各種パラメータ・設定を調整 • Feature Level Switch / Quality Switch • 端末・スペック・設定に応じたマテリアル調整 • UMGの解像度別対応 • DPIスケーリング, アンカー • スクリーンサイズ
  136. 136. #UE4CEDEC バッテリー消費・発熱を抑えたい!
  137. 137. #UE4CEDEC バッテリー消費・発熱を無視すると… コンテンツの寿命を大きく縮めることに…! 例えば • ユーザの継続率への影響 • 熱によりパフォーマンスが低下し…という悪循環
  138. 138. #UE4CEDEC バッテリー消費・発熱問題を解決するには? • 端末・スペックに応じた設定・調整を行う • コンテンツのクオリティを落とさずに パフォーマンスを改善・維持する最適化方法を、 ? 調査し、選択する
  139. 139. #UE4CEDEC 大前提 「最適化」 は 「コンテンツのクオリティを落とすこと」 ではない 適切なプロファイリングを行い、 どんな対応をするか選択しましょう!
  140. 140. #UE4CEDEC 適切なプロファイルのやり方を知りたい…?
  141. 141. #UE4CEDEC 講演スライドについて 既に公開済みです! 公式ブログ または #UE4CEDEC をチェック!
  142. 142. #UE4CEDEC とあるプロジェクトで選択された バッテリー消費・発熱問題への対策を紹介 (モバイル特化版)
  143. 143. #UE4CEDEC 60fps上限ではなく、30fps上限にする
  144. 144. #UE4CEDEC GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices 発熱を抑えるためのスロットリングが発生
  145. 145. #UE4CEDEC GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices
  146. 146. #UE4CEDEC 60fps上限ではなく、30fps上限にする 高フレームレートを上限にした場合 消費電力・温度向上により、フレームレートを不安定になる • 「30fpsに抑えると,60fpsに対して40%も消費電力が低減できる」 http://www.4gamer.net/games/999/G999902/20150307011/ UE4で30fps上限を設定するには ConsoleVariables 「 t.MaxFPS 30 」
  147. 147. #UE4CEDEC GDC2015 Sustained Gaming Performance in Multi-Core Mobile Devices 30fps上限にしても、最終的には発熱がひどくなってくる…
  148. 148. #UE4CEDEC バッテリー消費・発熱を考慮したゲームデザイン 動的なシーン(アクション部分など)の後に 静的なシーン(リザルトなど)」 を 少し 挟むことで デバイスを冷却! t.MaxFPS 30 冷 → 熱 t.MaxFPS 10 熱 → 冷
  149. 149. #UE4CEDEC 描画解像度 と UI解像度を分ける
  150. 150. #UE4CEDEC 描画:低解像度 UI:高解像度 スマホの画面は高解像度ですが、画面自体の大きさは小さい • 描画解像度を下げて、その分を演出強化した方が見栄えがいい(場合がある) r.ScreenPercentage 10r.ScreenPercentage 100
  151. 151. #UE4CEDEC UIのキャッシング
  152. 152. #UE4CEDEC Invalidation PanelによるUMGの負荷軽減 • 子要素をキャッシュすることで 不要な描画・更新処理をキャッシュ(スキップ) • 子要素毎にキャッシュするか否かを指定することも可能 • Is Volatileフラグ あまり変化しない部分は 積極的にInvalidation Panelでキャッシュする • 変化する箇所はIs Volatileフラグを有効に
  153. 153. #UE4CEDEC Battle Breakersにおける高速化事例 Stat slateによる計測 • Invalidation panel使用前 • Processed : 573 • Invalidation panel使用後 • Processed : 231 • Cached:342 2倍以上の高速化を実現!
  154. 154. #UE4CEDEC Invalidation Panel用のデバッグ機能 • slate.InvalidationDebugging 1 • Green: キャッシュされたWidget • Blue : 子要素との 相対的な位置関係もキャッシュ • Dashed: キャッシュしないWidget • Red: invalidated widgets
  155. 155. #UE4CEDEC Retainer Boxによる描画負荷の分散 子要素をレンダーターゲットに描画することで、 描画頻度・タイミングを変更可能
  156. 156. #UE4CEDEC 本講演のまとめ
  157. 157. #UE4CEDEC UE4における基本機能の「一部」をご紹介 • ほぼ全ての機能がモバイル開発でも使える! • 非エンジニアが 「自分のアイデア」を「自分で実装」できる
  158. 158. #UE4CEDEC UE4のモバイルレンダラーはどこまでできる? • 様々な端末・ハードに対応済み • ES2.0 から ES3.1, Vulkan, Metalまで • ハイエンドモバイル向けの機能を数多くご用意
  159. 159. #UE4CEDEC モバイル開発で必須な機能が既に揃っている! • モバイル特有の機能への対応状況 • モバイル開発向けの作業を支援する様々な機能
  160. 160. #UE4CEDEC モバイル開発におけるTipsの「一部」をご紹介 • 「端末・スペック」と「バッテリー・発熱」を考慮した パフォーマンス設定・調整を支援する機能の紹介 • 実際のプロジェクトで使われた最適化・改善テクニックをご紹介
  161. 161. #UE4CEDEC まだまだ話したいこと沢山ありますが…! モバイル開発でよく使うあの機能 • LODの自動生成 • テクスチャアトラスの自動生成 • シェーダキャッシュ などなど 最新モバイルARへの対応 • Apple ARKit • Google Tango • Google ARCore
  162. 162. #UE4CEDEC 最後に 本講演・資料が 「UE4でモバイル開発を進めている方」 「UE4でモバイル開発をすることを検討している方」 のお役に少しでも立てれば幸いです そして、今後も情報を ガンガン共有し、 開発者の皆さんのサポートできればと思っています…という所で…
  163. 163. #UE4CEDEC
  164. 164. #UE4CEDEC 登壇企業 (敬称略) 株式会社スクウェア・エニックス 株式会社 バンダイナムコエンターテインメント Enhance Games グーグル合同会社 ソレイユ株式会社 株式会社ポリゴン・ピクチュアズ 株式会社コロプラ 株式会社バイキング 株式会社プラスシグナル 株式会社ヒストリア Indie-us Games EPIC GAMES JAPAN
  165. 165. #UE4CEDEC 絶賛参加登録受付中! 公式サイト: https://unrealevent.eventcloudmix.com/ 日時: 2017/10/08 (日) 場所: ここ!
  166. 166. #UE4CEDEC ご清聴 ありがとうございました! 本講演に関する質問はこちらからどうぞ! E-mail : kaz.okada@epicgames.com Twitter : @pafuhana1213 展示ブースにEGJのスタッフがいますので モバイル以外の質問も是非どうぞ!

×