I have a Unity webGL game I downloaded from the web. I don't know what version of unity it was made in.
It starts playing in a small canvas with other stuff on the page like Unity logo, there is a button on the page that makes it fullscreen. I would like it to be fullscreen as soon as you load the page..
I tried adding this line to the script in index.html, to click the fullscreen button..
fullscreenButton.click(); But I get a load of errors..
here is the full index.html with the javascript in it. You can see the line I added near the bottom. I just tried clicking the button after unityInstance.SetFullscreen(1) is assigned to its onclick event (or whatever it is (I dunno anything about web). I also tried just calling unityInstance.SetFullscreen(1) but I get the same error. So how can I make it go fullscreen?
<!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 | QTE</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> </head> <body> <div id="unity-container" class="unity-desktop"> <canvas id="unity-canvas" width="100%" height="100%"></canvas> <div id="unity-loading-bar"> <div id="unity-logo"></div> <div id="unity-progress-bar-empty"> <div id="unity-progress-bar-full"></div> </div> </div> <div id="unity-warning"> </div> <div id="unity-footer"> <div id="unity-webgl-logo"></div> <div id="unity-fullscreen-button"></div> <div id="unity-build-title">QTE</div> </div> </div> <script> var container = document.querySelector("#unity-container"); var canvas = document.querySelector("#unity-canvas"); var loadingBar = document.querySelector("#unity-loading-bar"); var progressBarFull = document.querySelector("#unity-progress-bar-full"); var fullscreenButton = document.querySelector("#unity-fullscreen-button"); var warningBanner = document.querySelector("#unity-warning"); // Shows a temporary message banner/ribbon for a few seconds, or // a permanent error message on top of the canvas if type=='error'. // If type=='warning', a yellow highlight color is used. // Modify or remove this function to customize the visually presented // way that non-critical warnings and error messages are presented to the // user. function unityShowBanner(msg, type) { function updateBannerVisibility() { warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; } var div = document.createElement('div'); div.innerHTML = msg; warningBanner.appendChild(div); if (type == 'error') div.style = 'background: red; padding: 10px;'; else { if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; setTimeout(function() { warningBanner.removeChild(div); updateBannerVisibility(); }, 5000); } updateBannerVisibility(); } var buildUrl = "Build"; var loaderUrl = buildUrl + "/WebBuild.loader.js"; var config = { dataUrl: buildUrl + "/WebBuild.data", frameworkUrl: buildUrl + "/WebBuild.framework.js", codeUrl: buildUrl + "/WebBuild.wasm", streamingAssetsUrl: "StreamingAssets", companyName: "Rat Bashers", productName: "QTE", productVersion: "0.1", showBanner: unityShowBanner, }; // By default Unity keeps WebGL canvas render target size matched with // the DOM size of the canvas element (scaled by window.devicePixelRatio) // Set this to false if you want to decouple this synchronization from // happening inside the engine, and you would instead like to size up // the canvas DOM size and WebGL render target sizes yourself. // config.matchWebGLToCanvasSize = false; if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { // Mobile device style: fill the whole browser client area with the game canvas: var meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; document.getElementsByTagName('head')[0].appendChild(meta); container.className = "unity-mobile"; // To lower canvas resolution on mobile devices to gain some // performance, uncomment the following line: // config.devicePixelRatio = 1; canvas.style.width = window.innerWidth + 'px'; canvas.style.height = window.innerHeight + 'px'; unityShowBanner('WebGL builds are not supported on mobile devices.'); } else { // Desktop style: Render the game canvas in a window that can be maximized to fullscreen: canvas.style.width = "1280px"; canvas.style.height = "720px"; } loadingBar.style.display = "block"; var script = document.createElement("script"); script.src = loaderUrl; script.onload = () => { createUnityInstance(canvas, config, (progress) => { progressBarFull.style.width = 100 * progress + "%"; }).then((unityInstance) => { loadingBar.style.display = "none"; unityInstance.SetFullscreen(1); fullscreenButton.onclick = () => { unityInstance.SetFullscreen(1); }; fullscreenButton.click(); }).catch((message) => { alert(message); }); }; document.body.appendChild(script); </script> </body> </html> 
