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

794 Views

October 30, 17

スライド概要

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



2017年10月28日に九州産業大学にて開催されたCEDEC+KYUSHU 2017の講演資料です。UE4におけるモバイル向け機能・開発時の注意点・Tipsについて説明しています。(Epic Games Japan 岡田 和也)

http://cedec-kyushu.jp/2017/session/30.html

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

UE4 + モバイルの波が来てる…! #UE4CEDEC

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

NEW! Desktop-Class Forward Renderer on iOS (実験段階) 既存のモバイルレンダラよりも 高クオリティな表現が可能なForwardレンダラ • UE4.18より実験的機能として追加 • サポート環境 • iOS10.3以降, A9 以上 • 推奨環境: • iOS11, A10X 以上 #UE4CEDEC Wingnut AR ( WWDC 2017 ) https://youtu.be/S14AVwaBF-Y

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

ログイン・ログアウト Blueprintのみで実装可能!(もちろん、C++でも) #UE4CEDEC

62.

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

63.

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

64.

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

65.

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

66.

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

67.

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

68.

少し補足タイム (脱線とも言う) #UE4CEDEC

69.

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

70.

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

71.

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

72.

脱線おわり #UE4CEDEC

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

UE4におけるパッケージの種類 Release (本体) Patch (差分・上書) 1.0 to 1.1 1.0 1.1 #UE4CEDEC 1.2 1.1 to 1.2 1.0 to 1.2 DLC (差分・拡張) 1.2 + DLC a1.0

86.

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

87.

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

88.

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

89.

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

90.

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

91.

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

92.

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

93.

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

94.

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

95.

Release, Patch, DLCを作るには? Project Launcherを使う! #UE4CEDEC

96.

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

97.

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

98.

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

99.

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

100.

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

101.

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

102.

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

103.

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

104.

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

105.

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

106.

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

107.

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

108.

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

109.

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

110.

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

111.

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

112.

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

113.

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

114.

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

115.

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

116.

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

117.

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

118.

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

119.

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

120.

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

121.

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

122.

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

123.

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

124.

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

125.

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

126.

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

127.

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

128.

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

129.

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

130.

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

131.

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

132.

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

133.

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

134.

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

135.

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

136.

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

137.

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

138.

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

139.

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

140.

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

141.

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

142.

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

143.

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

144.

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

145.

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

146.

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

147.

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

148.

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

149.

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

150.

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

151.

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

152.

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

153.

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

154.

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

155.

各ハードウェア会社が提供しているツール 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

156.

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

157.

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

158.

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

159.

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

160.

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

161.

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

162.

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

163.

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

164.

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

165.

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

166.

UIのキャッシング #UE4CEDEC

167.

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

168.

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

169.

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

170.

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

171.

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

172.

本講演のまとめ #UE4CEDEC

173.

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

174.

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

175.

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

176.

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

177.

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

178.

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