I’m trying to pack a project into an HTML5 version but i can’t make it. I’ve been trying a lot of solutions out there, read a ton of posts about that problem, but nothing seems to work.
First things first :
Following the tutorials, i’ve gathered UE 4.6.1 and built it in order to get the editor. I’ve also installed emscripten 1.25.0 and everything that was needed for Android build.
Using the editor, i created a basic code project named “testweb3” without any Start content.
It opened in VS 2013 ultimate, where i have the “HTML5” target in the dropdown list.
I’ve also built the Unreal Frontend tool and installed Firefox Nightly 38.0a1.
What’s wrong :
Case 1 : If i try to start the project with the “Development Editor / HTML5” configuration, i get the following error in VS :
error : testweb3Editor does not support the HTML5 platform.
Case 2 : If i try to build the project with the “Development / HTML5” configuration, i get the following error in VS :
error root: E:\Boulot\Unreal\Engine\UnrealEngine\Engine\Source\ThirdParty\ICU\icu4c-53_1\HTML5\libicudata.bc: No such file or directory (“E:\Boulot\Unreal\Engine\UnrealEngine\Engine\Source\ThirdParty\ICU\icu4c-53_1\HTML5\libicudata.bc” was expected to be an input file, based on the commandline arguments provided)
Case 3 : If i start the project with the “Development Editor / Win64” configuration, then try to package it to HTML5, i end up with the following error in output log (which seems to be the same as case 2) :
MainFrameActions: Packaging (HTML5):
UnrealBuildTool: [156/156] python.exe
testweb3.js MainFrameActions:
Packaging (HTML5): UnrealBuildTool:
INFO root: (Emscripten: Running
sanity checks) MainFrameActions:
Packaging (HTML5): UnrealBuildTool:
ERROR root:
E:\Boulot\Unreal\Engine\UnrealEngine\Engine\Source\ThirdParty\ICU\icu4c-53_1\HTML5\libicudata.bc:
No such file or directory
(“E:\Boulot\Unreal\Engine\UnrealEngine\Engine\Source\ThirdParty\ICU\icu4c-53_1\HTML5\libicudata.bc”
was expected to be an input file,
based on the commandline arguments
provided) MainFrameActions: Packaging
(HTML5): UnrealBuildTool: -------- End
Detailed Actions Stats
----------------------------------------------------------- MainFrameActions: Packaging (HTML5):
UnrealBuildTool: ERROR: UBT ERROR:
Failed to produce item:
E:\Boulot\Unreal\Projects\testweb3\Binaries\HTML5\testweb3.js
Case 4 : If i open Unreal FrontEnd, go to Project Launcher, select my project and try to launch it with the “Firefox Nightly (64 bit)” profile and the “Development / By the book” configuration, it stops when trying to deploy with the following error :
Project.Package: ********** PACKAGE COMMAND STARTED **********
HTML5Platform.Package: Package E:\Boulot\Unreal\Projects\testweb3\testweb3.uproject
InternalUtils.SafeFileExists: SafeFileExists C:\Program Files\Emscripten\python\2.7.5.3_64bit\python.exe=True
CommandUtils.Run: Run: C:\Program Files\Emscripten\python\2.7.5.3_64bit\python.exe “C:\Program Files\Emscripten\emscripten\1.25.0\tools\file_packager.py” “E:\Boulot\Unreal\Projects\testweb3\Binaries\HTML5\testweb3.data” --preload . --js-output=“E:\Boulot\Unreal\Projects\testweb3\Binaries\HTML5\testweb3.data.js”
CommandUtils.Run: Run: Took 0,35002s to run python.exe, ExitCode=0
BuildCommand.Execute: ERROR: BUILD FAILED
Program.Main: ERROR: AutomationTool terminated with exception:
Program.Main: ERROR: Exception in mscorlib: Impossible de trouver le fichier ‘E:\Boulot\Unreal\Projects\testweb3\Binaries\HTML5\testweb3.js’.
What i tried :
Change the command line of HTML5Platform.Automation.cs as suggested in a post. Re-compiled automation tool and frontend, and got an error message that said that the command line was invalid. I changed it by this :
Tried to build the project with “Development / Win64” configuration, as suggested here or here. I don’t quite understand this solution. Sure the build works but what to do with it then ? Does it just need to be built ? Because if i try to start this build i get the following error, which seems logical :
The global shader cache file ‘E:/Boulot/Unreal/Engine/GlobalShaderCache-PCD3D_SM5.bin’ is missing.
You’re running a version of the application built to load COOKED content only, however no COOKED content was found. Consider cooking content for this build, or build and run the UNCOOKED version of the application instead.
HTML 5 is still experimental I guess but what I do is the following:
Open UnrealFrontend
Switch to the ‘Game Launcher’ tab and choose ‘Advanced’ from the left panel
Create a profile for your build
In the ‘Build’ section check the ‘Do you which to build?’ checkbox
In the ‘Cook’ section select ‘Cook by the Book’ and select the maps you would like to build
In the ‘Package’ section choose ‘Package & Store Locally’, let all fields blank though
In the ‘Deploy’ section select ‘Copy to Device’ and create a new group for HTML5
No click the ‘Launch’ button
The final build will be with the ‘Binaries/HTML5’ engine folder and not in you project folder.
When building and cooking you could also choose shipping which will result in smaller size of you final build.
If still fails (check the browser developer console) try tweaking the assigned heap memory that emscripten uses:
Open HTML5ToolChain.cs
Modify the following line:
Result += " -s TOTAL_MEMORY=1610612736";
To use a 32 bit browser its important to enable gzip on the web server, you can also pre-gzip the files but that requires some tweaking on the server side and some extra steps that you have to do manually (web technologies) not related directly to the engine.
How to reduce the size of the build (compressing the build output). Full thread.
To shrink the size of a HTML5 deployment I recommend you to pre-gzip the content, I was able to get the final size to about 30 MB for the engine and the game for an HTML project (more info at the bottom of the post).
Once you have gzipped your content (apache example: Serving pre-compressed files using Apache) you have two options, always serve gzip or serving both and if the client is able to read gzip content serving the gzipped version. Deciding if the client can handle gzip is easy, just create a .js file, gzip it to .js.gzip (gzip with the -9 option which indicates best compression rates) and try to load it. If you add a variable in that file like var enable_gzip = true; and your client can load that file the enable_gzip will be defined, if not enable_gzip will be undefined and you can change the extension you request from the server.
@Moss :
Here’s my frontend profile (OnlyMap is the name of my map) :
If i try to launch with “Develoment”, i get the same error message that i had with case 2 (libicudata.bc no such file or directory…) and i stops on the “Build game for HTML5” phase.
If i try to launch the same profile and just change the build configuration to shipping, it also stops on the “Build game for HTML5” phase, with these errors (libcudata again) :
I then changed the TOTAL_MEMORY and built the tool as you suggested and tried to launch the same profil in develoment and shipping. I faced the same errors as above. T_T
Also tried to use the existing profile for firefox nightly after changing the total memory but i fall back on case 4 error.
@ :
I tried to use the preconfigured profile for Firefox 32bits and the one i made following Moss guide after changing the deploy target. But i have the same errors.
I have some additional questions, maybe this is where i fail :
What solution configuration do you use to build the engine ? I used Development Editor 64 but maybe this is where i’m wrong ?
What solution configuration do you use to build UFE ? Again, i used Development Editor 64.
Again, thank you for your answers, i really hope we’ll be able to find the solution !
As far i a know, yes, and i’m not really fond of it Plus Unity5 will use WebGL too and my company would rather have all of its projects developped on one engine instead of splitting them.
I’ll make you some screen shots this afternoon so you can check exactly what I have ^^
I Use Shipping for UFE for HTML5, HTML5 can no be build using ‘editor’ because that platform does not support editor builds. And I use ‘Shipping’ instead of ‘Developemnt’ because of the final memory consumption and size of the resulting build.
Btw, try to add comments under one of the valuable answers and not new answers, this way it is easier to follow ^^ You can convert your answer to a comment.
Ok sorry for the mistake, i’m a bit of a noob Moved it under your answer (i hope).
While waiting for your screenshots, i’ll try to build with the Shipping configuration and see what’s going on.
Did you try the 4.7 preview? HTML5 support was improved quite a bit, so even though it is not yet a final release there’s a good chance it’ll work better. Also HTML5 support is part of the binary release for 4.7, so you don’t even have to compile it to test it out.
My setting is identical to yours. Are you using a source build or a build from the launcher? Could you verify that the ICU libs are actually there? If it’s a source build try not to exclude the optional files.
Is the libcudata there? Check the error message. You can use any Editor configuration because there is no HTML5 editor. Could you set the config to Shipping and in the deploy option set ‘Do not deploy’?
Ok i’m reaaaaally stupid.
Had the message error the whole time and never thought about checking if the lib was actualy there… I feel really ashamed
There wasn’t any HTML5 directory in the ICU folder. I launched “Setup.bat” again and this time i had the HTML5 and libicudata inside it. Don’t understand why it wasn’t there the first time. I must have missed a step.
I’ll try to build a project again and let you now.
Ok, guys, I have created an empty project without any content and try to build in HTML(UE4.8). Build procces have been completed fine without any errors. I tried to do it from UnrealEditor and by Frontend tool (with instruction from Moss) but my html file is not working in any browsers(32 or 64 bit). Finally, what have I to do to make it works? Please, give me some help.
Plus Unity5 will use WebGL too and my company would rather have all of its projects developped on one engine instead of splitting them.
Moved it under your answer (i hope).