UE4でモバイル向けアプリを開発した時の参考記事集

UE4でモバイル向けの開発をした際に参考になった記事、注意点、パッケージ時の設定項目などを書き連ねていく。

同じようにUE4でモバイル向けアプリを開発される方の参考になれば(追記できるトピックがあれば更新予定)。

本記事ではおもに開発時参考にした記事・リンクを紹介し、次の記事ではAdmob広告利用時のあれこれやiOSAndroid パッケージ時の設定を紹介したい。

目次


リリースしたアプリの紹介(ダイマ

iOS

ツモリコロリ

ツモリコロリ

  • Jun Obara
  • Games
  • Free
apps.apple.com

Androidplay.google.com

株式会社ヒストリア様主催のゲームコンテストである「第11回UE4ぷちコン」に応募した作品をブラッシュアップしてモバイル向けアプリとしてリリースしたもの。

私の場合、C++はサッパリなので全てBlueprintの機能で完成させている。

当時のアプリ開発環境はWindows10でUE4.24、iOSアプリのリモートビルド用にMacmacOS Catarina)とXcode11.5を使用。エディタの項目や機能は日本語環境のもの。

以下の記述は、UEのバージョンアップやAndroid / iOSSDKアップデート、Google Playストア・App Storeといったモバイルプラットフォーム側の仕様変更により無効、または別の手順になる可能性もあるのでご注意を(その場合はお知らせいただけると助かります)。

UE4でモバイルアプリを開発する際の参考リンク

iOSAndroidも公式ドキュメントの流れを参考にすることになる。

開発環境の準備からパッケージまでの流れが網羅されており、各項目を熟読すれば大抵の問題は解決する(ハズ)。

docs.unrealengine.com

docs.unrealengine.com

特にiOS向けアプリの開発では証明書・プロビジョニング関係、MacWindowsのリモートビルド環境のセットアップ・UE4でのビルド関係の手順で躓きやすいので、以下のそらまめゲームスさんの記事が非常に大きな助けになってくれる。

soramame-games.com

各プラットフォーム上に登録する際の参考リンク

各モバイルプラットフォーム上にアプリを登録するための準備・手順も決して楽な道のりではないので、以下の記事が役立つ。

iOS

下記記事のApp Store Connect にアプリを登録する流れを参考に、新規 iOS App の登録まで終えたらアプリのアップロードにはXCodeを使わず、 Mac上のアプリ「Transporter」を使用することで、UE4でパッケージした.ipaファイルを直接AppStoreConnectにアップロードできる。

i-app-tec.com

i-app-tec.com

qiita.com

Android

AndroidUE4でパッケージングした.apkファイルないし.OBBをGooglePlayConsoleにてアップロードすれば良いので比較的簡単。

以下のリンクでアップロードの流れや登録時の項目記入例について解説されている。 qiita.com

studiofun.site

モバイル開発での注意点・躓いた箇所

モバイル上でポストプロセス エフェクト効果を乗せたい

デフォルト設定ではUE4上のモバイルプレビューやモバイル実機上で起動したときに被写界深度やブルーム、LUTといったポストプロセスエフェクトが乗らないので、以下の公式ドキュメントを参考に、プロジェクトフォルダ>Confing>DefaultEngine.iniをメモ帳などで開き、 [/Script/Engine.RendererSettings]の セクションに以下のコマンドを追記してトーンマッパを有効にする必要がある。

r.mobile.tonemapperfilm=1

docs.unrealengine.com

UIと画面比率

Androidには様々な画面比の端末があり、iOSも6.5 インチ(iPhone XS、11)の19:9と5.5 インチ(iPhone 6、7,8, Plus)の16:9、それに加えiPadの4:3など、端末それぞれで画面比が異なるため、モバイル向けアプリを作る際はどのプラットフォーム向けであれ、どんな画面比率にも対応できるUIを用意するのが望ましい。

私の場合ウィジェットBPのCanvas Panelにボタンなりテキストなりを貼り付けただけになってしまいがちで、結果UIが見切れてしまう端末があり、App Storeの審査でリジェクトされる要因になったりした。

また、ゲーム中チュートリアルで次の操作方法を示すピクトグラムCanvas Panelに貼り付けて表示させて逐次操作説明を行っていたため、後にこれの画面比率対応するハメになりその作業で1日が潰れてしまった。

こうならない為の具体的な対策としてはDPI Scaling 機能を活用したり、ウィジェットBPのHorizontalBox、VerticalBox、GridPanelなどとSpacer、ScaleBoxを駆使し、CollumnやRowを設定して、縦横長さの画面割合から表示場所を設定できるような割り方を設定してあげることで、いかなる画面比でも破綻しないようにUIを作ることが可能だ。

HorizontalBoxとVerticalBoxを活用して様々な画面比率に対応したUIの例

DPI Scaling機能についての公式ドキュメント docs.unrealengine.com

HorizontalBoxなどを使用したウィジェット階層構造の参考に

www.slideshare.net

モバイル上での透過マテリアル

モバイルで透過マテリアルを使用してモデルを重ねた時、表示が怪しくなるのでなるべく使わないようにする(パフォーマンス的にも良くない)。

カメラ手前に来たオブジェクトなどどうしても透過させたいものがある時は、オパシティマスクと「Dither Temporal AA」ノードを使うことで軽量で擬似的な半透過表現ができるのでオパシティから置き換えることも可能。

Dither Temporal AAについての解説記事(もんしょさん) monsho.blog63.fc2.com

ディザリングのマテリアルBPについて解説されている記事(ほげたつさん) hogetatu.hatenablog.com

上記記事を参考にDither Temporal AAを使ったマテリアルの例

ビルドエラー

パッケージ時や実機実行のためのデプロイ時などに出たエラー対応にはかなりの忍耐を要求される。

アウトプットログの終行へ飛び、そこから上の行を探索して「error」箇所があれば直後の記述をコピーし検索すると、ほとんどの場合同じ問題がAnswerHubに投稿されている。

そのトピックへのベストアンサーや回答があれば、DeepL翻訳などにかけてひとつづつ検証してみる。とにかく検索しまくる…。ど

うしても無理ならアンサーハブのJapaneseセクションで質問を投稿する。

パッケージングに失敗する

プロジェクトフォルダ内の「Intermediate」フォルダのパッケージしたいOSのフォルダ(「Android」か「iOS」フォルダ)を削除すると解決することがある。

また、私の環境ではアウトプットログをコンテンツブラウザとタブで切り替え表示しているが、そのアウトプットログを表示させたままパッケージング開始するとUE4ごとクラッシュする(おま環の可能性有り)。そ

れ以外のパッケージング失敗については上記同様アウトプットログを参照のこと。



UE4でモバイル向けアプリでのAdmob利用あれこれ・パッケージ設定の記事へ続く

nasvic.hateblo.jp