Start Unity Player on Button click

At the moment, Player starts as soon as test page is loaded. I want user to click on the button on webpage to start loading unity content. I tried editing UnityLoader.js but only managed to break it.

 

b

 

Thanks for reply, it works good.

Do you think in the future UnityLoader.js could have some starting function that can be commented out and called at later stage? Is there some issues with this approach that Im not seeing?

 

I just can't find the %UNITY_WEBGL_LOADER_GLUE% , did you mean %UNITY_WEBGL_LOADER_URL% ? I just replaced the html template with provided content, but it did not work. Im not a Java/HTML Expert, may you can give some more detailed instructions where to replace it.



Unity Version: 2017.3.0p1

 

Would alex solution prevent asm.js to be compiled before the button is pressed? Can please anyone explain what purpose the module has and why there is a canvas used?


Here is my working example, that I understand. Sorry im a designer..do laugh.. ^^

the gameInstance var will be declared outside to make it global.

if you compile it with the default template this is how to :

Code (csharp):

1. <!-- insert this to your websites body by replacing it with the existing webgl-content div -->
2.  
3. <div class="webgl-content">
4.       <div id="gameContainer" style="width: 960px; height: 600px"></div>
5.       <button type="button" style="z-index:10000" onclick="runUnityLoader(); style.display='none';">Play</button>
6.       <div class="footer">
7.         <div class="webgl-logo"></div>
8.         <div class="fullscreen" onclick="window.gameInstance.SetFullscreen(1)"></div>
9.         <div class="title">Name of the game</div>
10.       </div>
11.     </div>
12.  
13.  
14.  
15.  
16. <!-- paste this after the body -->
17.  
18. <script>
19. var gameInstance;
20.  
21. function runUnityLoader() {
22.   gameInstance = UnityLoader.instantiate("gameContainer", "Build/portalsweb.json", {onProgress: UnityProgress});
23. }
24. </script>
25.  

 

Hello,
I am looking some what similiar way,once the progress bar is completely loaded,a play button will appear and when the user click on the play button on webpage, it should start loading unity content. Is this possible???

 

This template sadly doesn't work in 2019.4.

 

I came across this from a search result. If anyone else is trying to achieve this in 2021, here's how I went about it:

Add

<button id="unity-load-button">start loading</button>

somewhere on your page (I put it just after the #unity-canvas). Use CSS to place it somewhere nice like right above the default loading bar. Example CSS:

Code (CSharp):

1. #unity-load-button {
2.     display: inline-block;
3.     position: absolute;
4.     top: 40%;
5.     left: 50%;
6.     transform: translate(-50%,-50%);
7.     z-index: 10;
8. }

Then modify the default javascript which calls createUnityInstance() so it only calls *after* you press the button, and then disable & hide the button once loading starts.

To do this, I just changed this:

Code (CSharp):

1. script.onload = () => {
2.         createUnityInstance(canvas, config, (progress) => {
3.           progressBarFull.style.width = 100 * progress + "%";
4.         }).then((unityInstance) => {
5.           loadingBar.style.display = "none";
6.           fullscreenButton.onclick = () => {
7.             unityInstance.SetFullscreen(1);
8.           };
9.         }).catch((message) => {
10.           alert(message);
11.         });
12.       };

into this:

Code (CSharp):

1. loadButton.addEventListener("click", function() {
2.                   createUnityInstance(canvas, config, (progress) => {
3.                     progressBarFull.style.width = 100 * progress + "%";
4.                   }).then((unityInstance) => {
5.                     loadingBar.style.display = "none";
6.                     loadButton.style.display = "none";
7.                     loadButton.disabled = true;
8.                     fullscreenButton.onclick = () => {
9.                       unityInstance.SetFullscreen(1);
10.                     };
11.                   }).catch((message) => {
12.                     alert(message);
13.                   });
14.                 });

(where loadButton was previously defined as

var loadButton = document.querySelector("#unity-load-button");

)


Working example: https://michaelcassidy.net/post/testing-custom-hugo-page-template-for-unity-webgl-builds/

Hope this helps someone.


EDIT: actually you probably want to disable the load button as soon as it's clicked, in case someone spam clicks it.

So put this somewhere in the script too:

Code (CSharp):

1. loadButton.addEventListener("click", function() {
2.     loadButton.disabled = true;
3. });

 

I ended up writing a quick blog post about this:

https://michaelcassidy.net/post/load-unity-webgl-player-only-after-user-clicks-a-button/

 

Here is a fix for @jukka_j solution. I think was a refence problem to the button. Thanks everyone for the help

Code (JavaScript):

1. <!DOCTYPE html>
2. <html lang="en-us">
3. <head>
4.     <meta charset="utf-8">
5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6.     <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
7. </head>
8. <body style="text-align: center">
9.     <button id='loadbutton' value='load'>Load</button>
10.     <canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: {{{ WIDTH }}}px; height: {{{ HEIGHT }}}px; background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"></canvas>
11.     <script src="Build/{{{ LOADER_FILENAME }}}"></script>
12.     <script>
13.         document.getElementById('loadbutton').addEventListener('click', function () {
14.             document.getElementById("loadbutton").disabled = true;
15.      
16.       createUnityInstance(document.querySelector("#unity-canvas"), {
17.         dataUrl: "Build/{{{ DATA_FILENAME }}}",
18.         frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
19.         codeUrl: "Build/{{{ CODE_FILENAME }}}",
20. #if MEMORY_FILENAME;
21.         memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
22. #endif
23. #if SYMBOLS_FILENAME
24.         symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
25. #endif
26.         streamingAssetsUrl: "StreamingAssets",
27.         companyName: "{{{ COMPANY_NAME }}}",
28.         productName: "{{{ PRODUCT_NAME }}}",
29.         productVersion: "{{{ PRODUCT_VERSION }}}",
30.         // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
31.         // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
32.         });
33.       });
34.     </script>
35. </body>
36. </html>