モバイルゲームにもっとクオリティを！UE4を使ったハイクオリティなモバイルゲーム制作について

Unreal Fest West ‘17 モバイルゲームにもっとクオリティを！ UE4を使ったハイクオリティな モバイルゲーム制作について Indie-us Games 中村 匡彦

自己紹介 名前 : 中村 匡彦 Twitter : @aizen76 UE4 & VR系を専門とするゲーム制作集団 『Indie-us Games』代表。 UE4のことであればなんでもやります。 関西で一緒にUE4の仕事がしたい方を大募集中！！

今回のテーマは “ハイエンドモバイル”

UE4のモバイルタイトル 韓国でのモバイルゲームが現在とても熱い！ UE4で作られている『リネージュ2:レボリューション』は 韓国人口の5000万人に対して500万人がダウンロード。 売り上げはリリース30日でなんと200億円ほどに。 日本でも恐らく今年中にリリース予定。 (C) NCSOFT Corp. (C) Netmarble Games Corp. & Netmarble Neo Inc. 2016 All Rights Reserved.

UE4のモバイルタイトル 『HIT～Heroes of Incredible Tales～』 日本でも既にリリース済みUE4ハイエンドモバイルゲーム。 韓国だけではなく日本市場でもスマッシュヒット中。 日本向けに声優をキャストしたり、キャラクター絵を 専用に描き下ろしていたりする。 Copyright（C）2016 NEXON Korea Corporation and NEXON Co., Ltd. Copyright（C）2016 Barunson E&A corp. & NAT GAMES. All right reserved.

UE4のモバイルタイトル 『Blade II The Return of The Evil』 韓国製のUE4モバイルゲームの中で恐らく 最もグラフィッククオリティが高いタイトル。 リネージュ2やHITと比べても更に上のクオリティ。 現在も開発継続中。 Copyright 2016 ACTIONSQUARE. All Rights Reserved.

UE4のモバイルタイトル 『Oceanhorn 2: Knights of the Lost Realm』 大ヒットした前作オーシャンホーンの続編。 調べた限りではUE4を利用した、 モバイルゲームの中で最もクオリティが高い。 公式ブログで開発中スクリーショットが見れる。 Oceanhorn 2: Knights of the Lost Realm (C) 2017 Cornfox & Bros. Ltd. All Rights Reserved.

UE4のモバイルタイトル Oceanhorn 2: Knights of the Lost Realm (C) 2017 Cornfox & Bros. Ltd. All Rights Reserved.

モバイルゲームもクオリティが 必須となる時代に…

これまでのクオリティではこの 先生きのこれない…

UE4を使ってハイエンドな モバイルゲームを作ろう！！

モバイルゲーム市場について 今のモバイルOSはAndroidだけで、約66%ほど。 iOSは29%程度で、残りがその他といったところ。 日本に限定するとほぼ数値が反転。 韓国ではAndroidで81%でiOSが18%程度。 http://news.mynavi.jp/news/2017/03/02/194/ より引用

• http://news.mynavi.jp/news/2017/03/02/194/

ハイエンドモバイルを作る前に… iOSは既にMetalというグラフィックAPIがあり、 iPhone 5S以降であれば、UE4でも十分なほどの映像表現が可能。 問題はAndroidの方で、AndroidのバージョンとGPUにより 使える映像表現力が大きく変わるので予めよく調べておく必要あります。

OpenGL ESのバージョン AndroidはOpenGL ESのバージョンにより、 大きく表現力が変わります。 特にOpenGL ES 3.1はDirectX 11に近い 表現力が可能となるので重要。 iOSではMetalがこれに相当します。 OpenGL ES バージョン 他との比較 OpenGL ES 2.0 OpenGL2やDX9に相当 OpenGL ES 3.0 OpenGL3やDX10に相当 OpenGL ES 3.1 OpenGL4やDX11に相当 OpenGL ES 3.2 OpenGL4.5やDX12に相当

AndroidのバージョンとGPUについて OpenGL ES 3.1はAndroid 5.0 (Lollipop)以降の GPUであれば大抵の場合は動く。 例外はSnapdragonチップセットのAdreno 300番台シリーズ。 しかしこれを積んでいるAndroidは2017年現在だと 格安タブレットや、ガラケー型、スマートウォッチ型、デジカメなどに搭載された 変則的なAndroidが多く、ゲーム目的で使うものは非常に少ない。 Android / iOS : 日本で発売されたスマートフォン Tablet 等の全リスト http://dench.flatlib.jp/opengl/devicelist

• http://dench.flatlib.jp/opengl/devicelist

Androidのバージョン別シェア 2017年3月段階でのAndroidのバージョン別シェア。 既にAndroid 5.0 (Lollipop)以降だけで66%ほど。 おそらく後1年もすればAndroid 5.0以降のみで80%を 越える可能性は非常に高い。 ちなみに日本国内だけであれば既に8割越えてるとか。 Dashboards | Android Developers より引用 http://developer.android.com/intl/ja/about/ dashboards/index.html

• http://developer.android.com/intl/ja/about/dashboards/index.html

つまり…

今から開発を始めて 1年後にリリースすると ちょうどいい！！

やるしかない(ﾟ∀ﾟ)

と、いうわけで検証してみた

OpenGL ES 3.1のデモ 検証端末 : Samsung Galaxy S6 Edge 発売時期 : 2015年4月 ※およそ2年前 Android 6.0.1 (Marshmallow) RAM : 3GB CPU : Exynos 7420 GPU : Mali-T760 MP8 既にGalaxyでもかなり前の旧型モデル。 S7は昨年発売しており、S8は2017年4月21日から発売。 Copyright©(C) 1995-2017 SAMSUNG All Rights Reserved.

Sequencer Demo for OpenGL ES 3.1

Showdown Demo for OpenGL ES 3.1

検証結果 両方共解像度は1280x720のHDサイズ。 Sequencer Demo → 一部30fps以下になるものの、かなり30fpsを維持。 Showdown Demo → 全体的に平均で10fpsから15fps程度。 さすがにこのままでは厳しいですが、クオリティは十分に高い！

モバイルの描画性能 描画の性能だけであれば既にDirectX 11とも大差ない。 絵作りによってはPS4に近いクオリティも十分に可能。 モバイルは常に進化し続けており、もはやPS2のローポリ時代や PS3世代のクオリティはとうに越えており、先を見据えたモノ作りが必要です。

みんなが思ってる以上に モバイル端末の性能は高い！

そういえば…

Vulkanってどうなの？

Vulkanについて 次世代OpenGLとも呼ばれるグラフィックスAPI。 OpenGLの設計をリセットしつつ、ハードウェアに近い性能を引き出す。 OpenGL 4.5やOpenGL ES 3.2と同じくらいの描画性能を持ちつつ、 更に実行効率を引き上げて、バッテリーの省電力にもなります。 UE4は既に去年から対応済。

Vulkanについて Vulkanを利用するにはAndroid 7.0 (Nougat) 以降かつ、 GPUがOpenGL ES 3.1以上に対応していないといけない。 現状では、『Nexus Player』『Nexus 6/6P/5X』 『SHIELD Tablet』『SHIELD Android TV』などの ごく一部のハイエンド端末のみが対応しています。 まだモバイルでVulkanはちょっと早いので、数年後の普及に期待。

ハイエンドモバイル 開発時のノウハウ

ハイエンドモバイルプレビュー UE4.15からの新機能。ツールバーの設定から”Preview Rendering Level”で選択。 AndroidのOpenGL ES 3.1やiOSのMetalを PC上でエミュレーションしてくれます。 端末の特性により完璧な再現ではないのですが、 端末に転送せずともほぼ近い絵が出ます。 開発時にはトライ&エラーが重要なので必須。

フォワードレンダラー UE4は基本的にディファードレンダラーになりますが、 モバイル時は強制的にフォワードレンダラーになります。 しかし現在モバイルディファードレンダラーも開発中。 モバイルレンダリング設定から切り替えが可能。 Androidの場合はGitHubのコードをビルドする必要あり。

フォワードレンダラーの特性 ・Screen Space系のテクニックが使えない。(SSR、SSAO、Contact Shadows) ・GBufferへアクセスできない。(マテリアルでScene Textureがほとんど利用不可) ・Multisample Anti-Aliasing (MSAA) が利用可能。 特にScreen Space Reflectionによる反射が おかしくなるのが顕著にでてしまいます。 Reflection Capture等を使う時は慎重に。

モバイルのアンチエイリアス Mobile Temporal AAとMobile MSAAの2種類が利用可能。 何も設定しない場合は自動的に Temporal AAが動くようになっています。 モバイル用Temporal AAはPCとは違い、 非常に強いジャダーがでやすい。 フォワードだとMSAAがオススメ。

新トーンマッパーについて UE4.15からトーンマッパーが変わり、物理ベースなポストプロセス設定が追加されました。 これによりブルームを始めとする発色の部分が大きく変わり、 より綺麗な色が出せるHDR表示に対応しましたが、モバイルでは更に顕著な影響あり。 コンソールコマンド『r.TonemapperFilm 0』と入力することで元に戻すことは可能。 常に変える場合にはコンフィグファイル『DefaultEngine.ini』の 『SystemSettings』に『r.TonemapperFilm=0』を追加。

色味の違い 新トーンマッパー 旧トーンマッパー

トーンマッパーとポストエフェクト モバイルのポストエフェクトはPCやPS4などと別のコードパスになっており、 トーンマッパーの設定に強く依存します。 またポストエフェクトを使う際には『Mobile HDR』オプションを有効にする必要あり。 色に関するポストエフェクトでは『r.TonemapperFilm』を「1」にし、 被写界深度などでは逆に「0」を設定しないと効果がありません。 詳しくは以下のドキュメントを参照。 モバイルプラットフォームでポストプロセス エフェクトを使う https://docs.unrealengine.com/latest/JPN/Platforms/Mobile/P ostProcessEffects/index.html

• https://docs.unrealengine.com/latest/JPN/Platforms/Mobile/PostProcessEffects/index.html

ハイエンドモバイル レンダリング最適化

Mobile HDR ポストエフェクトや正しいライティングを行うために必須。 ただし、このオプションを切ると大幅にパフォーマンスがアップ。 ポストエフェクトやライティングがいらないゲームでは切る。 Gear VRで動くEVE GunjackというVR FPSでは、 Mobile HDRを切ったままで綺麗なライティング表現が 実現されており、色々と謎技術。 Copyright©(C) ©2017 CCP hf. All rights reserved.

シェーダー複雑度 PCでは軽いマテリアルでもモバイルではそうではないことがあります。 シェーダー複雑度をプレビューモードを切り替えて見ると違いもハッキリ。 まずはマテリアルが複雑になっていないか、しっかりとチェック。 もちろん必要な表現には多少重くてもやる必要があるので、 どこで妥協をしていくかは常に相談。

シェーダー複雑度 Shader Model 5 OpenGL ES 3.1

デバイスプロファイル UE4はAndroidのGPUを自動的に取得して、それぞれのデバイスに対して固有の プロファイル情報を設定することができます。 『Low』『Middle』『High』と世代別に設定したり、 GPUごとに個別の設定も可能です。

デバイスプロファイル コンフィグファイル『DefaultDeviceProfiles.ini』に記載。 GPU性能に応じてクオリティ設定できるので、 ローエンド、ハイエンドで分けて実行時に負荷を切り替え。 これで古いデバイスでも動かすことが可能に。 モバイル パフォーマンス ヒントとコツ https://docs.unrealengine.com/latest/JPN/Platforms/Mobile/P erformance/TipsAndTricks/index.html

• https://docs.unrealengine.com/latest/JPN/Platforms/Mobile/Performance/TipsAndTricks/index.html

コンテンツスケール 『r.MobileContentScaleFactor』に数値を渡すと解像度が変化します。 デバイスごとに起動時に解像度を設定するので、必要に応じて設定。 「0」→ デバイスネイティブ解像度 「1」→ Android 1280x720 iOS システムでRetina未満の解像度に設定 「2」→ Android 2560x1440 iOS 一部端末でフルネイティブ解像度 「3」→ iOSのiPhone 6+でフルネイティブ解像度

Material Quality Level デバイスプロファイルやコンソールコマンドで、 『r.MaterialQualityLevel』に「0～2」を設定すると、 マテリアル上でクオリティスイッチができます。 エディター上で確認する時はスケーラビリティ設定から 『Material Quality Level』の切り替えが可能です。

Feature Level Switch マテリアルで『Feature Level Switch』ノードを使うと 端末に合わせて実行可能なシェーダーをスイッチ可能。 『ES3_1』はiOSのMetalにも対応しています。 『ES2』までの場合は軽いシェーダーで動作させます。

モバイルレンダリング設定 モバイルでレンダリングする際の各種設定。 Mobile HDRや頂点フォグの無効化、カスケードシャドウマップの最大数の設定や、 モバイル用のMSAAを有効化することが可能です。 MSAAはサンプルカウント数を上げると、 より綺麗になりますが処理負荷も上昇します。

モバイル用シェーダーの削減 利用するシェーダーのみをコンパイルし、 マテリアルサイズの削減を行います。 最終的なパッケージサイズも減ります。 ロード時間の高速化と省メモリーに。 全て切ると影周りの表現が貧弱になってしまうので、 ひとつひとつ慎重に選んで切ること。

カスケードシャドウと変調シャドウ どちらも落ちる影という意味では同一の影です。 しかし変調シャドウ(Modulated Shadows)には、カスケードシャドウにはない制約が 増えた分、負荷の低い影として利用できるようになり、 モバイル向けに利用しやすくなっています。 丸い影に比べると変調シャドウはとてもリアリティがでるのでオススメです。 モバイル プラットフォーム向けのライティング https://docs.unrealengine.com/latest/JPN/Platforms/Mobile/L ighting/index.html

• https://docs.unrealengine.com/latest/JPN/Platforms/Mobile/Lighting/index.html

カスケードシャドウと変調シャドウ カスケードシャドウ 変調シャドウ

マテリアルクオリティオーバーライド デバイスレベルごとにマテリアルクオリティを上書き可能。 マテリアルの出力を無視して、強制的にフルラフネス(反射なし)化したり、 強制的にメタリックをゼロにして光の輝きなどの効果を発生させなくします。 PC上のプレビューモードでも効果あり。 とても効果は高いですが、平凡な表現になります。

最適化してみた

最適化 ここまでの最適化を実際に入れてみました。 基本的には削減する方向なので、より綺麗になることはありません。 実際に取捨選択する際には必要な表現と相談してください。

Sequencer Demo for DirectX 11

Sequencer Demo for OpenGL ES 3.1

Sequencer Demo for OpenGL ES 3.1

Showdown Demo for DirectX 11

Showdown Demo for OpenGL ES 3.1

Showdown Demo for OpenGL ES 3.1

検証結果 両方共解像度は1280x720のHDサイズ。 Sequencer Demo → 30fpsを完全に維持し、40～50fps程度が平均に。一部は60fpsに。 Showdown Demo → 15fpsから20fps程度に平均が少し上昇。少しだけ30fpsに届くことも。 Sequencer Demoは既に十分なfpsが確保できるように。 Showdown Demoは思った以上にfpsが上がらなかった。

原因 Showdown Demoは単純に描画しているポリゴン数が多かった。 Sequencer Demoは多くても30万程度に一瞬なる程度で、 Showdown Demoは最初のタイミングからしばらく110万程度のポリゴンが描画。 様々な処理を削っても、そこまでは軽く ならなかったので単純に描いているポリゴンが かなり多かったということ。

その他の最適化

Precomputed Visibility プレイヤーが移動可能な 範囲内にボリュームを配置し、 ビルド時に最適なカリング用の オクルージョン情報を生成します。 事前に移動可能な範囲から確実にカメラに 映るオブジェクトのみを描画。

Cull Distance Volume Draw Callを減らすことが目的。 ボリューム内にあるオブジェクトを サイズと距離に応じてカリングします。 カリングされてほしくないものには、 『Allow Cull Distance Volume』というチェックを外しておきます。

Merge Actors Draw Callを減らすことが目的。 複数のアクターを選択して、 各オプションをチェックしてマージします。 分かれているメッシュを強制的に メッシュを結合することでDraw Callが 少なくなるので高速化が可能。

自動LOD生成 UE4.14から自動でLODを生成できるように。 LOD Groupからプリセットを選択。 あとは自動的にLODが生成されます。 各LODごとにリダクション設定が細かく可能。 現状はスタティックメッシュのみ。 Simplygonを使うと更に細かい調整ができます。

ふと疑問…

ハイエンドモバイルゲームの グラフィックがすごいのは わかったけど…

バッテリーが すぐ切れるんじゃないの？

HITを遊んでみた 既にリリース済みのHITを遊んでみた。 HITはフル3Dでエフェクトもバンバンでます。 Copyright（C）2016 NEXON Korea Corporation and NEXON Co., Ltd. Copyright（C）2016 Barunson E&A corp. & NAT GAMES. All right reserved.

HITを遊んでみた ピッタリ1時間プレイ。 ほとんどが3Dのバトルシーン。 熱を持ちやすいGalaxy S6 Edgeでバッテリーは 100%→70% まで消費。 ずっと遊んでも3時間以上もつ計算。 Copyright（C）2016 NEXON Korea Corporation and NEXON Co., Ltd. Copyright（C）2016 Barunson E&A corp. & NAT GAMES. All right reserved.

思ったよりは 減ってないでしょ？

その他モバイルの機能

サードパーティデバッガーの統合 UE4.15からの新機能。 最適化時に最も役立つ専用GPU用に グラフィックスデバッガーが統合。 AndroidのMaliやAdrenoシリーズのGPUを 直接プロファイリングできるように。 ギリギリまでチューニングしたい場合には必須。

DLC & パッチ ブループリントのみで簡単に使える、 DLC & パッチ機能が4.14から入りました。 とても簡単に使えます！ パッケージングも含めた解説をしているので、 ぜひ以下のURLを参考に実装してみてください。 実はPCでも使えます。 モバイルDLC&パッチ処理について http://unrealengine.hatenablog.com/entry/2016/12/04/000000

• http://unrealengine.hatenablog.com/entry/2016/12/04/000000

GPSロケーションサービス 4.15からiOS & Android共通のモバイル用の GPSロケーションサービスが利用可能に。 ブループリントから使えます。 某ゲームのようなものが比較的作りやすく…？ こちらも以下のURLを参考に。 モバイル用GPSロケーションサービスを使ってみる http://unrealengine.hatenablog.com/entry/2017/04/13/220000

• http://unrealengine.hatenablog.com/entry/2017/04/13/220000

結論

快適にアクションゲームを 遊ぶなら描画ポリゴン数は 10万から20万くらいが理想

OpenGL ES 3.1は 豪華なシェーダーが 意外と綺麗に動く

バッテリー消耗も 最適化次第で実用レベル

最新のUE4を使えば ハイエンドモバイルゲームを “比較的” 楽に作れます！

作るなら、イマですよ！