Saturday, June 21, 2014

Building Unreal Engine HTML5

Update: 4.7 has HTML5 publishing all built in now apparently (I've not tested) so the below is old, just nab a new sub from Epic :)

Almost all the information needed is contained in this link https://answers.unrealengine.com/questions/18136/html5-build-firefox-cant-find-the-file-myprojectht.html

It's spread around a bit, but here is the list I ended up with:
Unpack the 4.2 source, required 1/2 and optional files and regenerate the project.
While this is happening, install emscripten (I used the self installing version which set my environment up perfectly) and grab XAMPP install and the Nightly Firefox 64bit build.

Once the source is ready, open it and find HTML5Platform.Automation.cs (Programs/Automation) and change the string in line 36 to read "/c python {0} {1} --preload . --pre-run --js-output={1}.js" as per Ehamloptirans instructions in the main link.

If you don't you may get Windows asking "how do I open a .py file?". Python is installed with emscripten but isn't called correctly (the log will show this when you try and build later if you don't fix it).

Build the development version of UE4.2. This took around 40 minutes on my pc, didn't bother the RAM much but did like the 8 cores a lot.

Now build UnrealFrontend. This is the tool that is actually used to build your HTML5 setup.

Open your project once, cook the content, save it. Go into your projects folders in explorer, into the Config folder and open up DefaultEngine.ini. Here is where you can set your GameDefaultMap, but in order to fix an HTML5 running issue, add this (or just the line if [Plugins] exists.)
[Plugins]
-EnabledPlugins="ExampleDeviceProfileSelector"

I had to search the source code to find that other engine.ini samples remove this specifically. HTML5 version was throwing an error when I attempted to run due to this.

Find Ben Donatelli's comments in that thread, he steps you through the Frontend profile setup.
This takes ~17mins first time for my project and creates these files at the end. Leave the log open or save it. If you don't have these 6, open the log and ctrl+f for file_packager.py. If it looks like it logged a "wrong params, here's proper usage", then clean the Frontend project in Visual Studio, check you made the proper string changes, and then rebuild Frontend):
Tanky.data
Tanky.data.js
Tanky.html
UE4Game.bc
UE4Game.js
UE4Game.js.mem
(these 3 UE4Game files don't appear to be rebuilt rerunning the build process so later builds are faster)

Minor cleanup, open the html file in notepad or such, find the first script reference and add var tstart = Date.now();

Now open the data.js file. You're looking for the references to your .data file. They probably have a file/folder path structure in front that causes an error, you can strip that out so it just reads something like
var PACKAGE_NAME = 'Tanky.data';
datafile_Tanky.data
etc

You can try it out (and it'll crash and load really slowly) here http://www.quiet.net.nz/content/html5/tanky.html

No comments:

Post a Comment