0
\$\begingroup\$

I create a WebGL game. After building project I discovered that the game doesn't fit the screen size

enter image description here

How you can see the canvas is perfectly scaled but the game didn't

I don't know what I changed but in previous build there wasn't this problem. I tried to undo all my last changes but Unity doesn't remember the very old changes, so I don't know what I changed. But I sure that I changed was only the new created canvas and disabled button

The result which I try to achieve (image was saved from old build, so the position of buttons doesn't make any sense): enter image description here

Here is my current settings:

Unity Editor settings: enter image description here

HTML file

<!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 | Your Snake</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"
        style="
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            transform: none;
        "
    >
        <canvas
            id="unity-canvas"
            width=1080
            height=1920
            style="
                position: absolute;
                width: 100%;
                height: 100%;
                cursor: default;
            "
        ></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">Your Snake</div>
        </div>-->
    </div>
    <script>
        const container = document.querySelector('#unity-container');
        const canvas = document.querySelector('#unity-canvas');
        const loadingBar = document.querySelector('#unity-loading-bar');
        const progressBarFull = document.querySelector('#unity-progress-bar-full');
        //const fullscreenButton = document.querySelector('#unity-fullscreen-button');
        const 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';
            }

            const 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();
        }

        const buildUrl = 'Build';
        const loaderUrl = buildUrl + '/Build.loader.js';
        const config = {
            dataUrl: buildUrl + '/Build.data.unityweb',
            frameworkUrl: buildUrl + '/Build.framework.js.unityweb',
            codeUrl: buildUrl + '/Build.wasm.unityweb',
            streamingAssetsUrl: 'StreamingAssets',
            companyName: 'EzioMercer',
            productName: 'Your Snake',
            productVersion: '0.1.0',
            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:

            const 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;

            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 = '100%';
            canvas.style.height = '100%';
        }*/

        canvas.style.width = '100%';
        canvas.style.height = '100%';

        loadingBar.style.display = 'block';

        const 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>

CSS file

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 { 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 { 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 }
\$\endgroup\$

1 Answer 1

0
\$\begingroup\$

Many thanks to the DMGregory for help in this matter

The problem was that I have a script which manipulate with camera.rect:

using UnityEngine;

public class GameAspectRatio : MonoBehaviour {
    [SerializeField] private new Camera camera;
    [SerializeField] private float targetAspect;

    private void Awake() {
        // determine the game window's current aspect ratio
        float windowAspect = (float) Screen.width / (float) Screen.height;

        // current viewport height should be scaled by this amount
        float scaleHeight = windowAspect / targetAspect;
        float scaleWidth = 1.0f / scaleHeight;

        camera.rect = scaleHeight < 1.0f ?
            //adding letterboxes
            new Rect(0, (1.0f - scaleHeight) / 2.0f, 1, scaleHeight) :
            //adding pillarboxes
            new Rect((1.0f - scaleWidth) / 2.0f, 0, scaleWidth, 1);
    }
}

After this advice I edited my script to this:

using UnityEngine;

public class GameAspectRatio : MonoBehaviour {
    [SerializeField] private new Camera camera;
    [SerializeField] private float targetAspect;

    private void Awake() {
        // determine the game window's current aspect ratio
        float windowAspect = (float) Screen.width / (float) Screen.height;

        // current viewport height should be scaled by this amount
        float scaleHeight = windowAspect / targetAspect;
        float scaleWidth = 1.0f / scaleHeight;

        if (scaleHeight < 1.0f) {
            //adding letterboxes
            camera.rect = new Rect(0, (1.0f - scaleHeight) / 2.0f, 1, scaleHeight);
        }
    }
}

And now everything is working fine:

enter image description here

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .