[SOLVED] Set background image in PlayCanvas loading screen

Help & Support
1

Hello!

I’m working on a custom loading screen in PlayCanvas and I’m facing a problem loading the background image.

The picture is loaded and displayed, but it is not set as the background for the #application-splash element. Can you please tell me how I can make this picture become the background image for #application-splash and not be displayed as a separate element? I’ve already tried replacing the image with a background image using style.backgroundImage , backgroundSize , backgroundPosition and other CSS properties, but it didn’t work.

Here’s the project: PlayCanvas 3D HTML5 Game Engine

2

I’ve managed to solve the issue with setting the background image for the #application-splash element in a custom loading screen. Instead of adding the image as a separate <img> element, I applied it directly as a background image using CSS and JavaScript. To achieve this, I ensured that the #application-splash element stretched to cover the entire screen and used the backgroundImage property to set the image once it was loaded. Additionally, CSS properties like backgroundSize: cover; and backgroundPosition: center; ensured the image scaled proportionally and remained centered. Here’s the working code:

pc.script.createLoadingScreen(function (app) {
    var showSplash = function () {
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';
        document.body.appendChild(wrapper);

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        wrapper.appendChild(splash);
        splash.style.display = 'none';

        var logo = document.createElement('img');

        // Wait for the loading image to be added to the registry
        const registry = pc.Application.getApplication().assets;
        registry.once('add:208822309', (asset) => {
            logo.src = asset.getFileUrl();
        });

        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };

        var container = document.createElement('div');
        container.id = 'progress-bar-container';
        splash.appendChild(container);

        var bar = document.createElement('div');
        bar.id = 'progress-bar';
        container.appendChild(bar);
    };

    var hideSplash = function () {
        var splash = document.getElementById('application-splash-wrapper');
        splash.parentElement.removeChild(splash);
    };

    var setProgress = function (value) {
        var bar = document.getElementById('progress-bar');
        if (bar) {
            value = Math.min(1, Math.max(0, value));
            bar.style.width = value * 100 + '%';
        }
    };

    var createCss = function () {
        var css = [
            'body {',
            '    background-color: #283538;', // Spare background color
            '}',

            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-color: #283538;', // Spare color until the image is uploaded
            '}',

            '#application-splash {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    width: 100%;',
            '    height: 100%;', // Stretch the container to full screen
            '}',

            '#application-splash img {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    width: 100%;',
            '    height: 100%;', // Full screen image
            '    object-fit: cover;', // Proportional fit
            '}',

            '#progress-bar-container {',
            '    position: absolute;',
            '    bottom: 10%;',
            '    left: 50%;',
            '    transform: translateX(-50%);',
            '    width: 80%;',
            '    height: 10px;',
            '    background-color: #1d292c;',
            '    border-radius: 5px;',
            '}',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: #f60;',
            '    border-radius: 5px;',
            '}',
            '@media (max-width: 480px) {',
            '    #progress-bar-container {',
            '        width: 90%;',
            '    }',
            '}'
        ].join("\n");

        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }

        document.head.appendChild(style);
    };

    createCss();
    showSplash();

    app.on('preload:end', function () {
        app.off('preload:progress');
    });
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);
});