HTML5 プロジェクトの開発

Unreal Engine 4.24 では、HTML5 プラットフォームへのサポートはエンジンから、コミュニティ メンバーによって維持管理および改善することができるパブリックのプラットフォームの拡張機能へ移行されています。HTML5 プラットフォームの拡張機能のドキュメンテーションは GitHub レポジトリ でホストされています。

HTML5 SDK の設定

Unreal Engine 4 (UE4) の HTML5 実装では、 Mozilla から Emscripten ツールチェーンを利用して UE4 の C++ コードを Javascript にクロスコンパイルします。Epic Games Launcher または Epic の GitHub リポジトリから UE4 をダウンロードする場合、HTML5 開発に必要な Emscripten ファイルと Python ファイルがすべて含まれています。つまり、追加の設定作業を行ったり、追加ソフトウェアをインストールしたりしなくても、HTML5 プロジェクトを作り始めることができます。

HTML5 がサポートされている Web ブラウザ

UE4 HTML5 プロジェクトは 32 ビット Web ブラウザで実行できますが、 64 ビット バージョンの Web ブラウザを使用することを強くおすすめします。64 ビット バージョンの Google Chrome と Firefox Web ブラウザは以下のリンク先にあります。

• Google Chrome 64 ビット

• Firefox 64 ビット

マルチ スレッド サポート

実験的なマルチ スレッド サポートを、ソースからビルドした UE4 ビルドで利用できます。 

ブラウザによっては、マルチ スレッド モードでの実行を許可するために特別なフラグを有効にする必要があります。

• Chrome：次のフラグを使用して起動します： --js-flags=--experimental-wasm-threads --enable-features=WebAssembly,SharedArrayBuffer 。また、「WebAssembly スレッド サポート」として chrome://flags/#enable-webassembly-threads で有効/無効にする方法もあります。

• Firefox Nightly は、 about:config で [javascript.options.shared_memory] 設定を｢true｣ に設定することで、[SharedArrayBuffer] を有効にできます。

HTML5 に必要なプロジェクト設定

UE4 を使った HTML5 プロジェクトを適切に動作させるには、 [Project Settings (プロジェクト設定)] で MSAA を無効にする必要があります。これを行うには、 [Project Settings (プロジェクト設定)] > [Rendering (レンダリング)] > [Mobile (モバイル)] の順に移動して、 [Mobile MSAA (モバイル MSAA)] オプションを [No MSAA (MDAA なし)] に設定します。

HTML5 ビルド タイプ

HTML5 プロジェクトのビルドを作成する際には、 開発 ビルド または 出荷 ビルド の作成を選択するオプションがあります。プロジェクトで作成するビルドのタイプは、その目的によって異なります。 

HTML5 開発ビルド： 

• 開発ビルドは、リリース前にプロジェクトのテストやデバッグを行う際に使用します。

• 開発ビルドでは無圧縮ファイルのみをビルドします。

• 開発ビルドはローカル テストでのみ使用します。Web サイトにデプロイするためのものではありません。 

  開発用のプロジェクトのビルドの詳細については、プロジェクトをビルドする際に生成される「Readme.txt」ファイルに記載されています。

HTML5 出荷ビルド：

• 出荷ビルドは、プロジェクトをエンド ユーザーにリリースする準備ができた際に使用します。

• 出荷ビルドは、圧縮ファイルまたは無圧縮ファイルのいずれを使用してもビルドできます。

• 出荷ビルドは、より小さいダウンロード サイズに圧縮できます。

次の操作を行うことで、HTML5 ビルドをリリースするためのファイル圧縮を有効/無効にできます。

1. [Project Settings (プロジェクト設定)] > [Platforms (プラットフォーム)] > [HTML5] > [Packaging (パッケージ化)] の順に移動して、[Compress files during shipping packaging (出荷用パッケージ化中にファイルを圧縮する)] を有効にします。

   クリックしてフルサイズで表示

2. [Use Pak File (Pak ファイルを使用)] オプションを 無効 にすることもお勧めします。これを行うには、 [Project Settings (プロジェクト設定)] > [Packaging (パッケージ化)] > [Packaging (パッケージ化)] の順に移動して、[Use Pak File (Pak ファイルを使用)] というオプション名の隣にあるチェックボックスをオフにします。

   クリックしてフルサイズで表示

   出荷用のプロジェクトのビルドの詳細については、プロジェクトをビルドする際に生成される「Readme.txt」ファイルに記載されています。

HTML5 プロジェクトを起動する

互換性のある Web ブラウザのをインストールしたら、HTML5 プロジェクトをテストできます。これを行うには、 メイン ツールバー に移動して、 [Launch (起動)] オプションの隣にある 詳細オプション ドロップダウンをクリックします。表示されたメニューから、使用したいブラウザをクリックして選択します。

HTML5 プロジェクトをパッケージ化する

Web にデプロイできるパッケージ化された HTML5 プロジェクトを作成するには、以下を行う必要があります。

1. まず、 [File (ファイル)] > [Package Project (プロジェクトをパッケージ化)] に移動して、リストから [HTML5] を選択します。

2. プロジェクトを保存するフォルダを選択し、 [Select Folder (フォルダーの選択)] をクリックしてパッケージ化プロセスを開始します。

3. プロジェクトのパッケージ化が終了したら、プロジェクトのパッケージ化先のフォルダを開き、 「HTML5LaunchHelper.exe」 プログラムを実行します。 
   

4. 「HTML5LaunchHelper.exe」 プログラムによって、localhost 上で圧縮ファイルを処理するように設定された Web サーバーが起動されます。このサーバーの進捗状況は、 「HTML5LaunchHelper.exe」 プログラムの実行中に表示されるコマンドライン ウィンドウで確認できます。

5. 最後に、お好みの 64 ビット Web ブラウザを開いて次の URL を入力します。[Localhost Address]/[ProjectName].html。これで、以下の画像のように UE4 HTML5 プロジェクトが Web ブラウザに読み込まれます。 
   

   入力する URL は、プロジェクト名に基づきます。「ThirdPerson」という名前の上記プロジェクトの場合、入力するアドレスは http://localhost:8000/ThirdPerson.html です。

HTML5 の Readme ファイル

新しい HTML5 プロジェクトを作成すると、UE4 によって 「Readme.txt」 という名前のテキスト ファイルが生成されます。このファイルには、ローカルおよび Web 上で HTML5 プロジェクトを動かす方法に関する追加情報が含まれています。 

HTML5 のファイル タイプ

HTML5 を使用して開発またはデプロイする UE4 プロジェクトをビルドする際、圧縮ファイルを使用するか、無圧縮ファイルを使用するかのオプションがあります。次の表に、無圧縮ビルドに必要なファイルの種類と、各ファイルに含まれる情報の内容を示します。 

無圧縮ファイルのデプロイに必要なファイル - 無圧縮ビルドの作成時に、次のファイルが作成されます。

圧縮ファイルのデプロイに必要なファイル - 圧縮ビルドの作成時に、次のファイルが作成されます。

デプロイに不要なファイル - 次のファイルは、圧縮バージョンと無圧縮バージョンの両方のプロジェクト作成時に作成されます。しかし、プロジェクトの開発時とテスト時以外には、これらのファイルは必要ありません。