Loading screen script is too slow

linelineline · September 4, 2020, 9:25am

hi everyone

Ive used a script for changing the loading screen, however it doesnt show my logo and the loading bar till a bit in. is there a way to display it immedeatly?

this is the 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 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: #df0f4d;',
        '}',

        '#application-splash-wrapper {',
        '    position: absolute;',
        '    top: 0;',
        '    left: 0;',
        '    height: 100%;',
        '    width: 100%;',
        '    background-color: #df0f4d;',
        '}',

        '#application-splash {',
        '    position: absolute;',
        '    top: calc(50% - 132px);',
        '    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: #3e0918;',
        '}',

        '#progress-bar {',
        '    width: 0%;',
        '    height: 100%;',
        '    background-color: #feef02;',
        '}',
        '@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();

// Use an image from the assets in the project via the asset registry
// More information: http://developer.playcanvas.com/en/api/pc.AssetRegistry.html
app.on('preload:start', function() {
    var splash = document.getElementById('application-splash');
    
    var logoAsset = app.assets.find('logo.png');
    
    if (logoAsset) {
        var logo = document.createElement('img');    
        logo.src = logoAsset.getFileUrl();

        // Insert DOM before the progress bar
        if (splash.childNodes.length > 0) {
            splash.insertBefore(logo, splash.childNodes[0]);
        } else {
            splash.appendChild(logo);
        }
        
        logo.onload = function () {
            splash.style.display = 'block';
        };
    }
});
    
app.on('preload:end', function () {
    app.off('preload:progress');
});
app.on('preload:progress', setProgress);
app.on('start', hideSplash);

});

Leonidas · September 4, 2020, 9:36am

Hi @linelineline,

Good thinking in using preload:start to load the logo asset from your assets and use it as logo. I’ve simplified the code to load it even more, using the default Playcanvas splash screen below. But there will always be a delay to show the logo, since it takes some time to prepare the assets and make them available for loading.

If you would like to be faster you need to host the image file on a server of yours and use that remote url as logo.src.

pc.script.createLoadingScreen(function (app) {
    
    var logo;
    
    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';

        logo = document.createElement('img');        
        //logo.src = 'https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/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:start', function(){
        var logoAsset = app.assets.find('logo.jpg');
        
        logoAsset.ready( function(){
            logo.src = logoAsset.getFileUrl();
        } ); 
    });
        
    app.on('preload:end', function () {
        app.off('preload:progress');
    });
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);
});

LeXXik · September 4, 2020, 10:02am

Another option is to include the logo as a base64 encoded string, then it will be available immediately.

Leonidas · September 4, 2020, 10:15am

That’s a good option, though be careful with big base64 encoded images, since then your splash-screen.js file will take a while to load. And the only thing you will see is a black screen.

A good strategy is to use to remote links for images, and show a gradually loading splash screen with fade in images/effects.

linelineline · September 13, 2020, 6:34am

hi Leonidas!
thanks for the script-editing!

i tried hosting my image on a server but now im getting an error:

“Cannot read property ‘ready’ of undefined”

any leads?

linelineline · September 13, 2020, 6:37am

the logo shows immediately but the progress bar doesnt get anywhere?

linelineline · September 13, 2020, 7:07am

@Leonidas

yaustar · September 13, 2020, 8:01am

Can you post your current loading screen code please?

linelineline · September 13, 2020, 8:07am

basically I just used the one you posted and put in my own image under the logo.src

linelineline · September 13, 2020, 8:07am

i tried now using the default from playcanvas but this doesnt allow me to change the bacground color

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

    var logo = document.createElement('img');
    // replace with your logo
    logo.src = 'http://static.playcanvas.com/images/logo/play.png';
    splash.appendChild(logo);

    // progress bar
    var container = document.createElement('div');
    container.id = 'progress-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');
    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 = [
        '#application-splash {',
        '    position: absolute;',
        '    top: 42%;',
        '    width: 10%;',
        '    left: 45%;',
        '}',

        '#application-splash img {',
        '    width: 100%;',
        '}',

        '#progress-container {',
        '    width: 100%;',
        '    height: 2px;',
        '    position: absolute;',
        '    background-color: #444;',
        '}',

        '#progress-bar {',
        '    width: 0%;',
        '    height: 100%;',
        '    background-color: white;',
        '}'
    ].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);

});

linelineline · September 13, 2020, 8:56am

sorry it wasnt your code but @leonidas, but its the one he posted above

yaustar · September 13, 2020, 8:57am

I’ve just tried it myself here and it seems fine with a base64 image converted from base64-image.de

https://playcanvas.com/project/718694/overview/base64-in-loading-screen

linelineline · September 13, 2020, 9:02am

When im using the one posted by Leonidas its giving me the error
“Cannot read property ‘ready’ of undefined”

Now when im using the default script (the one I also just posted), I cant change the background color?

linelineline · September 13, 2020, 9:03am

the default script is working but when I copy paste the css from leonidas script for changing background color it just removes the loading bar…

yaustar · September 13, 2020, 9:05am

Change the CSS background colour in the loading script:

linelineline · September 13, 2020, 9:18am

yes thanks I allready tried that but its not working

linelineline · September 13, 2020, 9:21am

when I put this in it just removes the progress bar instead and only shows the logo

var createCss = function () {
var css = [

         'body {',
        '    background-color: #df0f4d;',
        '}',
        
            '#application-splash {',
        '    position: absolute;',
        '    top: 42%;',
        '    width: 20%;',
        '    left: 30%;',
        '}',

        '#application-splash img {',
        '    width: 200%;',
        '}',

        '#progress-container {',
        '    width: 200%;',
        '    height: 2px;',
        '    position: absolute;',
        '    background-color: #444;',
        '}',

        '#progress-bar {',
        '    width: 0%;',
        '    height: 100%;',
        '    background-color: white;',
        '}'
    ].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);
};

yaustar · September 13, 2020, 9:22am

Can you post the full script so I can try it on my local project please or link to your project so I can fork it?

linelineline · September 13, 2020, 9:27am

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

        var logo = document.createElement('img');
        logo.src = 'https://noissue.dk/logo.png';
        splash.appendChild(logo);

        // progress bar
        var container = document.createElement('div');
        container.id = 'progress-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');
        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: #df0f4d;',
            '}',
            
                '#application-splash {',
            '    position: absolute;',
            '    top: 42%;',
            '    width: 20%;',
            '    left: 30%;',
            '}',

            '#application-splash img {',
            '    width: 200%;',
            '}',

            '#progress-container {',
            '    width: 200%;',
            '    height: 2px;',
            '    position: absolute;',
            '    background-color: #444;',
            '}',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: white;',
            '}'
        ].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);
});

yaustar · September 13, 2020, 9:41am

Works fine for me:

https://playcanvas.com/project/718694/overview/base64-in-loading-screen

I do suggest using a base64 image in the loading script so that your logo is shown before the loading is completed.

There reason where it’s on half shown is because the browser has to do a separate request to download the image.

As long as the logo is fairly small, using a base64 string for the image.src means that it is already ‘loaded’ when the loading.js is ready.