Tutorial - Making Your WebGL game go LIVE using Dropbox!

UPDATE: Due to new dropbox rules, you can no longer host games on it. :<
Other sites like google drive should work though, just needs to be replaced by the right url!

Have you ever wanted to add your WebGL game to a service like dropbox, or any similar services for others to play in a browser? Me too!
So, i have made a simple tutorial on how to make this work, as if you are playing it locally!

Since in Unity 5.4 WebPlayer will no longer be supported, i have decided to do this in-depth tutorial on how to make your game work in WebGL for everyone to play, step by step.

The first thing to do is go in the Editor and Build your actual game in the WebGL platform in a folder, named appropriately(most commonly your game or company name).


--
After that, we Upload the whole folder in dropbox by copying(or cutting) the folder we have created, with our built WebGL game in it.


--
After the upload is done we copy the .html file's dropbox URL and try out if the link works.

--
But wait! What is this? It seems that our game does not load itself, but gives us a download to our html file.
This is where this tutorial will shine(i really wanted to write that, sorry )

The first thing you need to know, is that dropbox.com is Not our base url we need to be using.
Instead, we need to use dl.dropboxusercontent.com - this is the actual base url for the user to be able to load the files, instead of downloading them!
And if you want to make it a bit cleaner(because we will be using this a lot, you can remove the end of the url: ?dl=0 - it is not required).

--
Now instead of showing us to download it, it loads our html file!
But there is still more work to do!

As you can see, our game is not loading, and there is no window at all, only some text on top and bottom of the page, and our 'created by Unity' text on the very bottom.
For us to fix this, we need to get our hands dirty!

We need to open our .html file that we uploaded with an editing program. Im using Visual Studio for this.


Inside it, we will see some code that most of us dont understand, but there is still some logic we can understand in there!
We need to edit all our file paths, by replacing them with our dropbox files's URL links. First time is always the hardest, but dont worry, it gets easier over time!
Dont forget to use dl.dropboxusercontent.com instead of the original dropbox.com URL.


And in this picture we have our fully edited html file how it should be in order for it to load our game.

Note that where the files have 'gz' at the end in the Release folder in their file type, you must remove the 'gz' part in the edited URL. Otherwise it will give you an error when trying to load the game using our edited URL.

We must do the same for the UnityProgress.js file found in the TemplateData folder.


And when reloading our page that we tried with our edited html link, we see that our game works and its loading!


--
Congratulations!
We successfully managed to build, upload, and edit our WebGL game for the world to play!

And for those who want to try out the WebGL tests game i have made, here it is!

 

All working great, but this error
'Failed to load resource: the server responded with a status of 403 (Forbidden)'
pops up two times. It does not break anything though.
First time is that it cannot find logo.png (NOT progresslogo.png), but I can't seem to find the place where to correct the path...
Second time is the 'codeURL' variable (.jsgz). I specified the correct path without the 'gz' at the end, and he throws the error - adding the gz into the path causes the other two files to throw an error. I can manually download it though when adding the gz.

It's not breaking anything, but not very nice.
If you need to check, this will give you the errors.
Thanks for the tutorial anyway

 

It loads just fine for me. Have you tried using different browser?

 

I tried it in Chrome first, which throws the errors mentioned above. Full log in chrome:

Again, content loads just fine despite these errors.

In IE, this message pops up:

If I continue anyway, IE crashes...
If I wait for it to load before I click ok, I can run it fine with the following log:

So seems to work without the errors mentioned before on IE.

In Firefox, I can't seem to get it to work at all. Curiously, it shows this:

Funny enough, because I do run on Firefox already. It also throws errors that it can't create GL context, which should only appear if my setup is unsupported, but I already checked, it is not marked as unsupported on the firefox pages...

Anyway, my initial problem seems to only appear in Chrome...
I'll try if any of these problems is related to my built or If I experience it in other demos, too.

Edit: All the same for your demo, too (respective errors)
I also get out of ram on IE in your demo...
Atleast it's not strictly my faultxD

 

I think your browsers might have some restrictions towards loading content and memory limit. Im sadly not sure which they are, but you could try installing IObit Advanced Systemcare and running a full scan. Theres a free version of each of their program, and they normally have some great value fixes that make your computer run faster.
If with the changes the program did did not work, the best thing you could do is try and research in google as of why its doing this to you.

 

Hm, that seems unlikely to me 16GB Ram, all browsers installed on an SSD, 64Bit versions (except IE which is 64 BBit installed but opens the WebGL demos as 32bit), and I've a relatively good PC overall.
Maybe it's really related to the Graphics driver or even the GPU model or something else... aslong as Chrome runs it's not that important to me

 

Your PC may have 16gb of ram, but the browser's limit might be 1gb, maybe even less.
From what i remember, iobit unlocked my limits(you could probably do it manually but im not sure where the settings are at)

 

nevaran Thanks you very much for your gide .

Hi I am try to set my game in facebook canvas with WebGL following your guide , but i am getting this error "Uncaught SyntaxError: Unexpected token ILLEGAL" see the image.JPG in Creme brouser ,firefox and explorer.

Any helps are appreciated ¡

 

Editing program you are using might be giving wrong symbols, or you missed something in the editing the URLs

 

Thanks navaran

I have using the free drop box , in this don't have compression system . Now i upload to paid server and this work

 

Thats nice to hear Cheers

 

First of all, it works great! Thanks for this post!
Second of all, if you are a completionist like me, there's another link, inside the style.css file, there's the url(logo.png) part. Just put in the full logo path in parentheses (ie. url("https://dl.dropboxusercontent.com/s/blablabla/logo.png")). It shows the WebGL logo on the bottom left

 

Very nice!
Have not noticed it was there
PS: it also works without quotas just tried it out!

 

Cool! Thanks =)

 

Thanks a lot for sharing!

 

Thanks a lot for sharing, great tutorial!
@Efect I got the same error at first attempt, then I read the original post more in depth:

this definitely solved the problem and now a web demo of my game is available at https://dl.dropboxusercontent.com/s/6phaxh1qbsh03s9/index.html

Thanks again!

 

Hi,
You can also upload your WebGL games on a free game hosting site, CheeseGames.net

 

Anywhere is possible as long as it supports links to the files similar to dropboxs'

 

I can't seem to get the dl.dropboxusercontent.com to work and I have no idea what I'm doing wrong. I've tried multiple times (with and without the 's' in https) and it still won't work. Any idea? Thanks

 

I am not absolutely sure, but i think it may have to do with the ability to use public folders? I havent tried putting the WebGL game before ive gotten that, so it may be that.
Have you made sure every single file referenced is set with the url? Note that you must use dl.dropboxusercontent.com to the html file that loads the game also

 

Hey, I have tried this and it works, until now. For some reason, all the games have gone down, it just says "An error occurred running the Unity content on this page. See your browser's JavaScript console for more info. The error was:
SyntaxError: illegal character" and I don't know what to do , I am trying to rebuild the game so I will see if it works then
see ya
EDIT: "Sadly It does not work ;("
-Sinci1

 

Good to hear im not the only one! Something might've happened in the recent updates, maybe? It might be a bug, not a bad idea to report it.

 

hmm maybe? but i dont know how to report
-Sinci1
Edit: I think its because of dropbox, because if you go on another page like http://www.cheesegames.net unity games Will work, hmm this is really strange

 

They might have made it so you cannot do it on dropbox anymore, sadly...But hey, cant blame them! Haha

 

Hey can you report this to unity?
or
Tell me a good dropbox altrnative that supports direct links?

 

Its not unity's fault - the local build works just fine. Its after converting it in dropbox that destroys everything. We could wait for dropbox to fix it or maybe start our own site page thingie using Apache or similar.

 

Hey, I got good news! I found an alternative to dropbox... Google drive!
for a tutorial (not made by me) here it is :

 

Thank you for your response, however i am going to use google drive because it comes with 15 gb space, Thank you again.

 

Hey! Thanks for explaining the problem - i got to the same conclusion but didnt knew how to fix it.
Your demo works but for some reason mine doesnt do the same. Im using unity 5.3.x
You can try it out here: https://dl.dropboxusercontent.com/s/9ccs5r2hesmbd33/ModernFPSKitDEMO.html

 

Very nice! I have tried the first trick and works like a charm.
Many thanks for resolving this issue!
Cheers

PS: removing the 'gz' in the url file types or leaving them alone doesnt seem to matter, or does it?

 

Alright, gotcha - thanks a lot for helping out!

 

THIS IS MINT!!! takes about a tenth the time, and no matter how hard my school tries, they cant block google drive!

 

hello. I didi all part except removing "gz", was not able to find it.. actualy found "gz" in unityloader.js and made it like a comment (//url += "gz"; ) but i think it is wrong way. pls can u help to solve problem.
Here is screen what i am geting with dropbox link

 

Thank you! I will try it

 

I am having a problem with my game, I tried all the fixes above.
https://dl.dropboxusercontent.com/s/tb6x6vhkzm7lm4k/index.html

Any idea how to fix it?

 

Thanks for the reply I will try as soon as I get home

 

It seems that Dropbox has changed the way their system handles files and this method no longer works. For kicks, I reverted to the www.dropbox.com default on the main index page and it served the basic html and styling without the player, however, attempting to revert the other links within the webGL build borked the whole thing (as expected). Hopefully someone with more experience and/or knowledge can sort this out and it's not the death of Dropbox hosting for testing purposes.

 

@alexsuvorovdv - all I did was revert to the default www share link instead of the dl.usercontent on the index page. This will get it to serve the basic HTML and style sheets, so the other dl.usercontent changes suggested still appear to be handled decently, but it doesn't load the webGL player at all. I tried this change with 3 projects to make sure it wasn't a fluke and can get the index.html to load in the same way. You should be able to do it with any of yours as well, but here's a link to one of mine that I made the change with anyway, just to demonstrate it serving the page. https://www.dropbox.com/s/mg28irei14czoxl/index.html

*** EDIT ***

I'm guessing it has something to do with this error that shows up in console on inspect of the loaded html

"chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js:346 Blocked script execution in 'https://dl.dropboxusercontent.com/c...DRnG3FRVdE6k1MT8Bvr2io6hsV347YHlOFmHZhR9/file' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."

*** EDIT 2 *** It seems that the link I provide now returns a "can not preview" download interface, so I'm at a loss.

As a side-note, I'm using my personal, temporary solution so I don't lose testing workflow. By moving an unchanged copy of the index.html files for my projects to another cloud (mega.nz) and using the "stream" feature on their desktop client, I can load and test projects that are found in dropbox. Not a perfect solution, but as a solo hobbyist it keeps things moving.

Hopefully Dropbox can be sorted out or we (the community) can come up with an alternative soon. I know I'll be keeping an eye on this thread as I have since it was created, haha.

 

Hi... i wanted do upload and run a webgl demo from DropBox, however i wasn't able... i went through the posts and i see that there are some changes about dropbox... Any way now to run a WebGL demo from DropBox ( using Unity 5.4.1 and up) or is there any other alternative to dropbox i can put the demo on...!?

 

Ok, it's now clear.
And thanks for suggestions

 

Yeah, I got an email from Dropbox around the time I posted to this thread that said that. Sort of annoying, but not the end of the world. I don't suppose you've experimented with Nextcloud/Owncloud in an effort to replicate the former HTML rendering of Dropbox? I know in most situations it might seem pointless, but I can think of several where this would be an adequate solution. I'm just not sure how much work would go into it, and it's not exactly something I have much knowledge in.

 

Hi, just upload the index.html file, templatedata folder, and release folder to cheesegames.net. Then demo or share the URL of the game from there. You can continue updating the game build files and then remove it after you're done. It's also quite interesting to check out the Unity3D games that other developers are showing off or testing there.