Failed to load custom loading screen

Hello,

I’ve just export my projet and download it for self hosting. However, I’ve got an error message :

But my “custom_loading_screen.js” is defined in “loading screen” section.
Do you have any idea about the origin of the problem?
Moreover, I can’t find the file in the downloaded .zip.

Thanks !

Antony

Odd.

Can you post the contents of the custom_loading_screen.js just to cross check what’s in it please?

Is this file in the PlayCanvas Editor project in the asset panel? Can you screenshot it please?

Are you using it as described on this page? Loading Screen | Learn PlayCanvas Can you post a screenshot of the project loading screen section please?

I didn’t chnage the content of this script :

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');
        logo.src = 'https://playcanvas.com/static-assets/images/play_text_252_white.png';
        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;',
            '}',
            '',
            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-color: #283538;',
            '}',
            '',
            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 28px);',
            '    width: 264px;',
            '    left: calc(50% - 132px);',
            '}',
            '',
            '#application-splash img {',
            '    width: 100%;',
            '}',
            '',
            '#progress-bar-container {',
            '    margin: 20px auto 0 auto;',
            '    height: 2px;',
            '    width: 100%;',
            '    background-color: #1d292c;',
            '}',
            '',
            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: #f60;',
            '}',
            '',
            '@media (max-width: 480px) {',
            '    #application-splash {',
            '        width: 170px;',
            '        left: calc(50% - 85px);',
            '    }',
            '}'
        ].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);
});

This file is present in the asset panel :
image

And the screenshot of the project loading screen section
image

Odd, can you add ‘yaustar’ to be read only on the project please and I will take a closer look

Done !

I’ve forked the project and downloaded it for self hosting but don’t see any errors in console

Looking at the error you’ve posted, the script that is set to be the custom loading script in project settings is not included in the assets and instead turning into __loading__.js during the build/publish step.

The error sounds like the script was attached to an Entity somehow in the scene?

Arf, the script isn’t attached to an Entity in the scene.

In the meantime, I juste add a custom loading script at the same level as “index.html”. In “index.html” I change the path of the loading script.
It works but it’s a temporary solution.

That’s really odd as it works out of the box for me. No changes needed.

Can you send me the zip of your build please? (DM me a link)

Thanks for the project. I see what the issue is and it’s an odd one but doesn’t affect the project negatively.

There’s a bug where if the project is built/published with concatenation of scripts disabled AND the custom loading script is set to preload, you will get the error.

If preload is disabled on the custom loading script or concatenation of scripts is enabled, then you won’t get the error.

In either case, the custom loading script does get added and loaded correctly :slight_smile:

I will report the issue on the Editor repo

Bug: https://github.com/playcanvas/editor/issues/613