HTML5 プロジェクトの開発

HTML5 プラットフォーム開発のために UE4 を設定します。

Windows
MacOS
Linux

Unreal Engine 4.24 では、HTML5 プラットフォームへのサポートはエンジンから、コミュニティ メンバーによって維持管理および改善することができるパブリックのプラットフォームの拡張機能へ移行されています。HTML5 プラットフォームの拡張機能のドキュメンテーションはhttps://github.com/UnrealEngineHTML5/Documentation の 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 ブラウザは以下のリンク先にあります。

マルチ スレッド サポート

実験的なマルチ スレッド サポートを、ソースからビルドした 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_Select_Web_Browser.png

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

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

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

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

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

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

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

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

HTML5 の Readme ファイル

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

HTML5_ReadMeHelp.png

HTML5 のファイル タイプ

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

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

ファイル タイプ

説明

<project>.js

メインのプロジェクトの Javascript コード。

<project>.wasm

メインのゲーム コード。

<project>.data

ゲーム コンテンツの Javascript ドライバ。

<project>.html

ランディング ページ。

<project>.symbols

シンボル (オプション:デバッグで使用)。

Utility.js

ユーティリティの Javascript コード。

.htaccess

分散コンフィギュレーション ファイル。

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

ファイル タイプ

説明

<project>.jsgz

圧縮されたメインのプロジェクトの Javascript コード。

<project>.wasmgz

圧縮されたメインのゲーム コード。

<project>.datagz

圧縮されたゲーム コンテンツ。

<project>.data.jsgz

圧縮されたゲーム コンテンツの Javascript ドライバ。

<project>.symbolsgz

圧縮されたシンボル (オプション:デバッグで使用)。

Utility.jsgz

圧縮されたユーティリティの Javascript コード。

圧縮バージョンのファイルを使用する場合は、無圧縮バージョンの .htaccess ファイルと .html ファイルも含める必要があります。

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

ファイル名

説明

HTML5LaunchHelper.exe

Windows ベースの PC でプロジェクトをローカルに表示するためのローカル Web サーバーの作成に使用されます。

RunMacHTML5LaunchHelper.command

Mac でプロジェクトをローカルに表示するためのローカル Web サーバーの作成に使用されます。

Readme.txt

HTML5 の UE4 プロジェクトのデプロイに関する追加情報が含まれています。

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信