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

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

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

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

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

UE4製モバイルタイトルが国内外で大ヒット！ Hit ～Heros of Incredible Tales ～ • グローバル版が配信から19日で累計300万DL突破 • 国内でも2016年末にリリースされ、 先月に国内ユーザ数が300万を突破 LineageⅡ Revolution • サービス開始から30日間で約200億円の売上 • 8/23（水）に国内でもサービス開始！！！ #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 以上 #UE4CEDEC Wingnut AR ( WWDC 2017 ) https://youtu.be/S14AVwaBF-Y

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

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

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

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