HIKI Tech Blog

yhikishimaのブログ。ゆるくUE4やUnity、web開発の記事を書いてます。

トップ > UE4 > 【UE4】UE4.23以降でHTML5向けにビルド

【UE4】UE4.23以降でHTML5向けにビルド

UE4

f:id:yhikishima:20200606223654j:plain

はじめに

  • UE4.23以降のバージョンでHTML5へのビルドをする方法を調べてみました。

手順

https://github.com/UnrealEngineHTML5/Documentation

↑ドキュメントはgithubで公開されています。

1．UnrealEngineソースコードの取得

 git clone -b 4.24-html5 --single-branch https://github.com/UnrealEngineHTML5/UnrealEngine ue4-r424-html5

今回は4.24-html5のブランチでチェックアウトします。

※できるだけルートに近い場所でCloneする必要があるようです。

※Cloneする場所を気にせず実行して何度も失敗しました。。

2．プロジェクトの生成/ファイルの作成

cloneしたプロジェクトに対してドキュメント通りに以下のコマンドを実行します。

コマンド実行時、時間がかかる場合があるのでご注意を。

  • Setup.bat/Setup.command/Setup.sh - 最大20分

  • HTML5Setup.sh - 1時間程度

  • GenerateProjectFiles.bat/GenerateProjectFiles.command/GenerateProjectFiles.sh - 5分ほど

For Windows

# open git-bash
# or, you can use "File Explorer" and right click on the
# "ue4-r424-html5" folder and select "Git Bash Here"
cd ue4-r424-html5
./Setup.bat

cd Engine/Platforms/HTML5
./HTML5Setup.sh
cd -

./GenerateProjectFiles.bat
# open the generated visual studio solution (UE4.sln)

For Mac

# open a terminal to
cd ue4-r424-html5
./Setup.command

cd Engine/Platforms/HTML5
./HTML5Setup.sh
cd -

./GenerateProjectFiles.command
# open the generated xcode project (UE4.xcworkspace)

For Linux

# open a terminal to
cd ue4-r424-html5
./Setup.sh

cd Engine/Platforms/HTML5
./HTML5Setup.sh
cd -

./GenerateProjectFiles.sh

3．コンパイル

  • ue4-r424-html5 / UE4.sln をでVisual Studioで開きます。

  • Visual Studioで以下の設定にしてください。

Platform : Win64
Configuration -> Development Editor

  • 表示＞ソリューションエクスプローラーを選択してソリューションエクスプローラーを開きます。

  • HTML5LaunchHelperが足りていないようなので

Engine/Platforms/HTML5/Source/Programs/HTML5/HTML5LaunchHelper/HTML5LaunchHelper.csproj

を手動で追加します。（プロジェクトを右クリックして追加＞既存のプロジェクトで追加）

  • 以下の項目を選択して、右クリックで「選択範囲のビルド」を実行します。

f:id:yhikishima:20201105232717p:plain

  • EngineのUE4もビルドします。

コンパイル時のエラー

error MSB3075: コマンド "..\..\Build\BatchFiles\Build.bat -Target="UE4Editor Win64 Development" -Target="ShaderCompileWorker Win64 Development -Quiet" -WaitMutex -FromMsBuild" はコード 5 で終了しました。このコマンドを実行するための十分な権限があるか確認してください。

上記エラーが出た時以下の対応をいれてください。

※一度エラーになった場合、クリーンしてからビルドし直した方がよさそうです。

※リビルドするとエラーがでて進まなかったので、リビルドもしない方がよさそうです。

Engine/Source/Programs/UnrealBuildTool/Platform/Windows/VCToolChain.cs を開いて、236行目に Arguments.Add("/Zc:twoPhase-"); を追記する。

f:id:yhikishima:20201106085658p:plain

  • ./Engine/Plugins/Runtime/Database/ADOSupport/Source/ADOSupport/Private/ADOSupport.cppを開いて、以下の対応。
1. 255行目に移動し、if(ADORecordSet && (ADORecordSet->State & ADODB::adStateOpen))からif(ADORecordSet != nullptr && (ADORecordSet->State & ADODB::adStateOpen))に変更します

2. 328行目に到達し、if( DataBaseConnection && (DataBaseConnection->State & ADODB::adStateOpen))からif( DataBaseConnection != nullptr && (DataBaseConnection->State & ADODB::adStateOpen))に変更します
  • ビルド完了！！

f:id:yhikishima:20201107234409p:plain

  • ./Engine/Binaries/Win64/UE4Editor.exe -log を実行

初回起動は十数分程度かかります。。

4． Unreal Project Browser から適当なUEプロジェクトを作り HTML5 出力を試す

  1. プロジェクトを作成

  2. プロジェクト設定＞プラットフォーム＞HTML5 / Compress files during shipping packaging を ON

  3. プロジェクト設定＞プロジェクト＞パッケージ化＞ Packファイルを使用をON

  4. ファイル＞プロジェクトをパッケージ化＞HTML5にてプロジェクトをビルド

数十分待ち。。。。

エラー！！！！！！

WARNING: Library 'D:\work\UnrealEngine\ue4-r424-html5\Engine\Platforms\HTML5\Source\ThirdParty\ICU\icu4c-64_1\lib-1.39.0-fc-mt\libicu_O2.bc' was not resolvable to a file when used in Module 'ICU', assuming it is a filename and will search library paths for it. This is slow and dependency checking will not work for it. Please update reference to be fully qualified alternatively use PublicSystemLibraryPaths if you do intended to use this slow path to suppress this warning.
WARNING: Library 'D:\work\UnrealEngine\ue4-r424-html5\Engine\Platforms\HTML5\Source\ThirdParty\PhysX3\PhysX_3.4\lib-1.39.0-fc-mt\PhysX3_O2.bc' was not resolvable to a file when used in Module 'PhysX', assuming it is a filename and will search library paths for it. This is slow and dependency checking will not work for it. Please update reference to be fully qualified alternatively use PublicSystemLibraryPaths if you do intended to use this slow path to suppress this warning.
WARNING: Library 'D:\work\UnrealEngine\ue4-r424-html5\Engine\Platforms\HTML5\Source\ThirdParty\PhysX3\PhysX_3.4\lib-1.39.0-fc-mt\PhysX3Common_O2.bc' was not resolvable to a file when used in Module 'PhysX', assuming it is a filename and will search library paths for it. This is slow and dependency checking will not work for it. Please update reference to be fully qualified alternatively use PublicSystemLibraryPaths if you do intended to use this slow path to suppress this warning.
WARNING: Library 'D:\work\UnrealEngine\ue4-r424-html5\Engine\Platforms\HTML5\Source\ThirdParty\PhysX3\PhysX_3.4\lib-1.39.0-fc-mt\PhysX3Cooking_O2.bc' was not resolvable to a file when used in Module 'PhysXCookingLib', assuming it is a filename and will search library paths for it. This is slow and dependency checking will not work for it. Please update reference to be fully qualified alternatively use PublicSystemLibraryPaths if you do intended to use this slow path to suppress this warning.

https://usagi.hatenablog.jp/entry/2020/07/03/205200

こちらの記事を参考にさせていただき、Linux向けに一度ビルド＆rsyncで作業ディレクトリにコピー。

したのだが、またしても HTML5にてプロジェクトをビルド でエラー。。。

他色々試したのだがどうしようもなくなり、今度はCloneする位置をルートに近い位置でプロジェクトをCloneし直ししてみると、無事にパッケージのビルドに成功！！！！！！！

f:id:yhikishima:20201118095603p:plain

githubにあげてgh-pagesでビルドしたパッケージを確認できるようにしました。

yhikishima.github.io

リポジトリ

GitHub - yhikishima/UnrealHtml5 at gh-pages

まとめ

githubのドキュメント通りやっていたのですが、エラーが多々発生し非常に苦戦しました。

UE4.23以降でHTML5ビルドしたいという方の参考になれば幸いです。

参考

GitHub - UnrealEngineHTML5/Documentation

HTML5 ゲームの開発 | Unreal Engine ドキュメント

UE-4.23以降でHTML5ターゲット(wasm+webgl1)をWindowsの開発機から使うメモ; UE-4.24, Emscripten-1.39.0 - C++ ときどき ごはん、わりとてぃーぶれいく☆

html5 in unreal engine 4.24 - package unreal engine games for the web. - YouTube