WebGLTemplates Modifying build output and %UNITY_WEBGL_LOADER_GLUE%

bsterling250DI · Apr 16, 2015

So I followed directions from http://forum.unity3d.com/threads/webgl-template-structure-specification-in-b19.290819/ to copy the Minimal and Default build templates to my project.

Now looking at modifying the index.html that gets spit out, i'd like to modify some values, but i'm seeing that there isn't much choice to modify it.

Code (CSharp):

<body>

<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"></canvas>

%UNITY_WEBGL_LOADER_GLUE%

</body>

I need to modify what %UNITY_WEBGL_LOADER_GLUE% the filePackagePrefixURL, memoryInitializerPrefixURL, and the UnityConfig.js and fileloader.js paths to not be relative from the index.html that is loaded but instead a fully qualified url to our cdn where we host these files.

The reason being that we want to be able to host the game files on our own cdn so we can update them as part of our automated pipeline, while still being able to give the index.html file to web portals like kongregate that host our game and they don't have to worry about updates.

Is there a way to modify these values in the template so that I dont have to manually modify them after every build?

I guess i could copy the output of a build into a template and replace the variable, but i'd be worried about Unity updating what the loader glue has at a later date and not getting the changes.

Any ideas?

insmo · Apr 17, 2015

From the default templates you need the following; .js file, mem file and data file. The index.html file will contain some hints on what you need to do to get a WebGL build running *without* the the index.html file. You want to deploy the three mentioned files on your CDN. Then you need to create a window.Module object (undocumented) and fill in some more undocumented functions.

However, there is a big catch. Once you load the js files from your build output it will pollute the global namespace of the browser with 1000+ properties. Everything from SendMessage to variables named "i".

jonas-echterhoff · Apr 20, 2015

The %UNITY_WEBGL_LOADER_GLUE% is replaced with the contents of
WebGLSupport/BuildTools/WebGLLoaderGlue.html from inside your Unity editor installation. The reason is that this setup allows us to change the glue when we update Unity. If you can take care of that yourself, you could replace %UNITY_WEBGL_LOADER_GLUE% in your template with the content of that file - and then just make sure to apply changes to that file (if any) to your template when you update Unity.

bsterling250DI · Apr 20, 2015

thanks exactly what i was wondering

bsterling250DI · Apr 20, 2015

I've also noticed, that if I put the WebGLTemplates folder into my project Assets directory, it shows up in the publish settings, but when it tries to run it looks in my Unity install folder. So I tried copying it to the Unity Install folder, and then i had duplicates showing up in the project publish settings.

Is this something that is intended? Since i have a semi large team and an automated build pipeline with Jenkins, it's inconvenient to have everyone who works on this have to modify their unity installation and then have Templates from every project show up in the editor. This doesn't work very well since we won't be able to have source control manage these files with the project the same way without having to run some sort of script after these files get updated by someone.

jonas-echterhoff · Apr 21, 2015

That is a bug which seems to be happening on windows only. We have a bug report on it and will look into it.

Deleted User · Feb 8, 2017

Dying to know what is WRONG.
The goal: Have the game running inside an average html webpage.

It should be straightforward.
However, I'm not seeing what Unity3D promises if I follow the instructions on docs.unity3D.com

Step 1:
1. Create a WebGLTemplates subfolder in the Assets folder.

Step 2:
1. Build WebGL version, and
2. Drag the contents of the WebGL version into a folder on my Google drive.

Step 3:
1. Now, get the links for all the files which are in Release, etc folders generated from the successful build process.
2. Open the code given as the Unity3D minimal example in my editor (scroll down on https://docs.unity3d.com/Manual/webgl-templates.html) and begin correcting any and all references to files with their corresponding weblinks to files named in the minimal-code , so that it will run them instantly on the html page, providing an embedded game right away.

Result:
Nothing but the usual header and footers texts, and a question-icon.

I do not know html but I can assume that whatever was supposed to happen with the GLUE bit is the problem.
Maybe there is something else .

Worse, there is nothing after I build the product inside the golden WebGLTemplates sub-folder.
It sits as empty as my dog's dinner bowl or Donald Trump's list of true-facts (I'll let you choose).

May I ask what I am missing?
I am learning with the most basic example...

I hope my description will help others looking forward to this, especially on the holographic launch in 5.5, just like me too.

Hugs!!

I'd be so truly grateful.

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Office</title>
<link rel="stylesheet" href="https://drive.google.com/open?id=0B2EzFGqcL9RXMHJPQ05IaTNUV00">
<link rel="shortcut icon" href="https://drive.google.com/open?id=0B2EzFGqcL9RXem5GNlZxWEpKdzQ" />
<script src="https://drive.google.com/open?id=0B2EzFGqcL9RXZ1IzdXphVlR3NEE"></script>
</head>
<body class="template">
<p class="header"><span>Unity WebGL Player | </span> Office</p>
<div class="template-wrap clear">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"></canvas>
<div class="logo"></div>
<div class="fullscreen"><img src="https://drive.google.com/open?id=0B2EzFGqcL9RXS25kNVpHSERyLW8" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
<div class="title">Office</div>
</div>
<p class="footer">« created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> »</p>
%UNITY_WEBGL_LOADER_GLUE%
</body>
</html>

Schubkraft · Feb 8, 2017

I don't quite get your issue, but in order to make a new template you have to:

Make the webgl template folder in assets

make a subfolder in there named "my template name"

add at least an index.html file into that folder (for example the minimal template html listed in the docs page)

select your "my template name" in the player settings

make a build which will now use your template

you can also find the two templates and their files (default and minimal) under "<editor install folder>\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates".

Deleted User · Feb 8, 2017

Schubkraft said: ↑

I don't quite get your issue, but in order to make a new template you have to:

Make the webgl template folder in assets

make a subfolder in there named "my template name"

add at least an index.html file into that folder (for example the minimal template html listed in the docs page)

select your "my template name" in the player settings

make a build which will now use your template

you can also find the two templates and their files (default and minimal) under "<editor install folder>\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates".
Click to expand...

Dying to try that! I'm on my macbook and Unity does not give any executable it just turns into a texteditor window)

So clearly I did not make an "Office" subfolder in the WebGLTemplates subfolder in Assets folder.
I will do that as soon as I get back to my iMac.

Then, I will add the minimal template html and save it as an "index.html" , and stick it inside the new Office subfolder.
And then , I will run to build hte product which, as you say, will now use my template.

As soon as this is built successfully, I will search fo the two templates and their files and copy the link to them in a file folder which should appear called Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates (in my google drive)
Then, I will copy their html codes into my webpage.
I hope this works.
I hope I understand you exactly.

I can't wait to tryit.
Thank you million for that!! Wahoo.

Schubkraft · Feb 9, 2017

fhc888 said: ↑

As soon as this is built successfully, I will search fo the two templates and their files and copy the link to them in a file folder which should appear called Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates (in my google drive)
Click to expand...

No need to do this. This is only where Unity stores the templates it uses to make a build. I just mentioned it in case you wanted to uses these to start your own template.

sevensails · Mar 30, 2017

%UNITY_WEBGL_LOADER_GLUE% does not works anymore on Unity 5.6?

It seems a bug :

https://issuetracker.unity3d.com/is...is-not-properly-replaced-with-custom-template

Schubkraft · Mar 30, 2017

5.6 uses a new embedding scheme which doesn't use that tag anymore. See https://forum.unity3d.com/threads/new-unity-webgl-embedding-api-white-paper.430909/

Thaina · Apr 23, 2017

Unity document never have update webgl changed and that so disappointed

Should remove all misleading deprecated information

Search Unity

WebGLTemplates Modifying build output and %UNITY_WEBGL_LOADER_GLUE%

bsterling250DI

insmo

jonas-echterhoff

Unity Technologies

bsterling250DI

bsterling250DI

jonas-echterhoff

Unity Technologies

Deleted User

Guest

Schubkraft

Unity Technologies

Deleted User

Guest

Schubkraft

Unity Technologies

sevensails

Schubkraft

Unity Technologies

Thaina

Search Unity

Unity ID

Useful Searches

WebGLTemplates Modifying build output and %UNITY_WEBGL_LOADER_GLUE%

Unity Technologies

Unity Technologies

Guest

Unity Technologies

Guest

Unity Technologies

Unity Technologies