Update: As of September 1, 2016, Dropbox has discontinued support for rendering HTML content in a browser via shared links or Public Folder. This tutorial is predicated on the fact that Dropbox allowed for rendering HTML content in a browser via share links; which means this method of hosting an HTML5 build of an Unreal Engine 4 game will no longer work. This post will remain online for archival purposes.
Hello, Jon Daley here. I'm the Lead Programmer for Nacelle Games, and also a cofounder. This blog post is going to be a little more technical then our previous blog posts, but I feel it's important to share any knowledge we gain as a studio with other developers. Let's get to it!
Dropbox is great for sharing files. My studio uses it all the time. But, it can cause headaches when trying to host web builds of games. A few years ago I had figured out how to host Unity web builds on Dropbox, which required a bit of editing of the primary HTML file the engine generated, making sure that the files it referenced had the proper Dropbox Share URL in the proper format.
So when I went to host an HTML5 build of a prototype for one of my studio's new games in Unreal Engine 4, I figured it'd just take a bit of modifying; boy was I wrong.
I'm not a web developer, and know next to nothing about JavaScript, but I'm pretty good at debugging. So when I tried to load the HTML file to start playing the prototype, and it didn't load, I opened the JavaScript console in Chrome and got to work.
There were several JavaScript errors, all of which were complaining about being denied access to to files they were trying to load. The main problem was that all of the JavaScript code was expecting the files they referenced to be in file pathways relative to themselves. This isn't the case with Dropbox, because for security reasons every file has a different Share Link URL.
Here's how to get up and running:
About those Dropbox Share Links...
The first thing you need to know is how to get Share Links for files in Dropbox. The easiest way is through right-clicking on the file you want to share inside your Dropbox folder on your computer, and then clicking Share Dropbox Link. This will generate a link, and copy it to your clipboard.
Hold on though; you can't use the link straight away. You have to modify it first. Share links come in the following format by default, where SOMETHING-RANDOM is a series of seemingly random letters and numbers, followed by the file name and extension (file.name), and then a parameter telling your browser not to download the file (?dl=0):
https://www.dropbox.com/SOMETHING-RANDOM/file.name?dl=0
This is what you want to change the link to say:
https://dl.dropboxusercontent.com/SOMETHING-RANDOM/file.name?dl=0
Notice the "www" was replaced by "dl" and "dropbox.com" with "droboxusercontent.com". What this does is force your browser to render the file, meaning your browser will handle the file as if it were a raw file, and not being hosted on Dropbox; this skips the Dropbox interface, and also doesn't force your browser to download the file.
You will have to change every link to the dl.dropboxusercontent.com format in order for these steps to work.
Editing the generated files
What we'll be doing is changing the referenced file names for several important files, and replacing the names with the properly formatted Dropbox Share Links that point to the files.
I edited all of the files using Notepad++ on Windows; but any text editor will do.
First, open the HTML file you need to open to play the game; it should be called YourProject-HTML5-Shipping.html.
Scroll all the way to the bottom, and find where there are 5 calls to a JavaScript function called "loadJavaScriptFile". Each of these functions is referencing another file inside the folder the HTML file was in when you built your project. Replace all the file names with properly formatted Dropbox Share Links for the files listed.
(Note: the file that has "YourProject" in its name, will actually contain the name of your project in Unreal Engine 4.)
Once that's done, open the file "YourProject.data.js". Scroll down to line 19 and find the REMOTE_PACKAGE_BASE variable, it should be set to 'YourProject.data'. Replace that with a properly formatted Dropbox Share Link to the "YourProject.data" file.
This next one was a bit tricky to figure out. After I changed all the above file names, I started getting an unhandled exception, and an error about running out of memory. It turns out the issue was actually the same as above; the .mem file couldn't be loaded, so the game runs out of memory and crashes.
Fixing this is also a bit tricky. You have to find the file name reference for the .mem file, inside the 45+ megabyte UE4Game-HTML5-Shipping.js file; a file with zero whitespace. Control-F to the rescue!
The quickest way to find the file name reference we have to change is to search for "mem", matching case, and searching only for whole words; with those search criteria, if you start at the beginning of the file it should be the first thing the comes up. Be patient when searching, and editing; I used Notepad++ and it was straining to keep up.
Once you find "mem", what you'll be changing is the value for the "memoryInitializer" variable to a properly formatted Dropbox Share Link for the "UE4Game-HTML5-Shipping.js.mem" file:
And we're done!
Once that's done, make sure all of the files you've updated are up-to-date on Dropbox, and you should be good to go. You can use a properly formatted Dropbox Share Link to point to the YourProject-HTML5-Shipping.html file and your game should now load in your favorite WebGL enabled browser.
A few words of caution; you will have to make these changes every time you upload a new build, as any newly built files will be using relative file paths. But at least now you know how to make the necessary changes. And knowing is some fraction of the battle... as I'm writing this it's too early in the morning for fractions.
Disclaimer: this bit of troubleshooting was done using an HTML5 build from the binary version of Unreal Engine 4.7.1; no guarantees this will work on future versions of the engine.