当前位置：首页 > article >正文

【Unity】WebGL全屏问题

article 2024/12/5 10:39:11

1 前言

WebGL项目打包时不可避免的需要面对全屏化问题，或者说是占满网页的问题。这里讨论一下此问题。

2 全屏化

2.1 打包模板

WebGL在打包时可以选择不同的打包模板，其会影响最终打包好的项目在网页中的展现形式。可以在“Project Setting/Player/Setting for WebGL/Resolution and Presentation/WebGL Template”处选择模板。Unity 2022.3.0版本有三种模板可选：Default、Minimal、PWA。这里只讨论Default和PWA，Minimal我看了下没看出来什么特殊的，暂时懒得研究了。

2.2 Default模板

此模板下，打开网页会发现Unity内容只显示在一个内部窗口中，虽然提供了全屏按钮，但这种方式也不是我们想要的，我们希望打开后就是占满网页的。全屏化需要修改打包后项目中的两个文件：index.html、style.css。修改后的文件如下，就不详细展开了，打包项目后可以打开文件对比下文件内容。

index.html

<!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 | ExplodedViewForWeb</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
    <div id="unity-container" style="width: 100%;height:100%">
        <canvas id="unity-canvas" style="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>
        <!--将下部的一些Unity自带内容隐藏-->
        <!--<div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">ExplodedViewForWeb</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 + "/1.loader.js";
        var config = {
            dataUrl: buildUrl + "/1.data",
            frameworkUrl: buildUrl + "/1.framework.js",
            codeUrl: buildUrl + "/1.wasm",
            streamingAssetsUrl: "StreamingAssets",
            companyName: "DefaultCompany",
            productName: "ExplodedViewForWeb",
            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";
            canvas.className = "unity-mobile";

            // To lower canvas resolution on mobile devices to gain some
            // performance, uncomment the following line:
            // config.devicePixelRatio = 1;


        } else {
            // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

            canvas.style.width = "100%";
            canvas.style.height = "100%";
        }

        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";
                //由于上面将全屏按钮隐藏了，所以后续关于全屏按钮的代码也要注释掉-第二部分
                //fullscreenButton.onclick = () => {
                //  unityInstance.SetFullscreen(1);
                //};
            }).catch((message) => {
                alert(message);
            });
        };

        document.body.appendChild(script);

    </script>
</body>
</html>

style.css

body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
/*#unity-footer { position: relative }*/
.unity-mobile #unity-footer { display: none }
/*#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }*/
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
/*#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }*/
/*#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }*/

/*上面隐藏的内容为index.html中隐藏的下部内容对应的style设置，因为本体已经隐藏所以这里style也没用了，故隐藏。*/


/*完成之前的隐藏操作后会在屏幕下部多出白色条纹、右侧也会因此有滑动条，以下设置可以隐藏白条与滑动条，实现较好的全屏效果。*/
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.webgl-content {
    width: 100%;
    height: 100%;
}

.unityContainer {
    width: 100%;
    height: 100%;
}