[SOLVED] Preloading screen shows up very late

Help & Support
1

Hi, I used a script found on playcanvas tutorial sites.

However, in a current project it takes up to 30 seconds or so until logo and loading bar appear. the loading bar shows then just a fraction of the remaining load.

A. Desired: Loading screen should be there immediately.
B. Is: Although the script is in loading order in the editor No 1 it takes long time to show up.

Code for loading screen:
// More information on creating custom loading screens can be found here
// http://developer.playcanvas.com/en/user-manual/designer/loading-screen/

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: #fff;',
            '}',

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

            '#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: #000099;',
            '}',

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

Hello @Marjan!
Here is a thread that might help. PlayCanvas team - Lag

3

If you don’t understand, so basically if you take online assets (like from sketchfab) sometimes they are too much pixels (i think) then when you put collision on that asset, it lags. So if you had done that then try put it box or sphere collision.

4

Thanks for your input, but I only have box and sphere colliders. And one mesh collider for the ground but that one is an octagon with two extrusions so vertices should be… let me calculate… arg anyways, very little.

I used Basis compression on pretty much any texture. Seems to make everything worse though. Safari and Chrome are reloading the page on an iPhoneX very soon…

But that’s not related to a loading bar not showing up when things need to load,

1 Like
5

I don’t think the loading screen script is the problem. I use it all the time, no errors. Must be

  1. Something wrong with models
6

ok, but in your projects: Is the loader bar showing up immediately as number one? Or just later, sometime?

Hard to say as one would need a somewhat big project. Nobody can see that by just adding a cube or so.

1 Like
7

It takes about 5 - 10 seconds.

8

just to be unprecice, if I make a build of my project it would be around 140 mb.
However all textures are basis compressed so, the download to the client should be a fraction.

But whatever, a loader bar has to be there first.

1 Like
9

This has never happened before. :thinking: Can I take a look at your project (send a link) please.

10

If the loading splash screen is showing up late, I would profile it in the browser profiler devtools and see what is taking up the time.

1 Like
11

excuse me guys, I am no expert in debugging.

However on a Mac I used google chrome and opened developer tools showing Network.

There I see that all Bitmap assets are loaded and after they are loaded the loader scene kicks in.
Which is not really helpful, as the load should show progress from the beginning or not?

1 Like
12

Can you share a project link please? Someone on the forum could take a closer look.

I’m wondering if this happens in a new project with the same project or if it’s project related rather than the script.

1 Like
13

makes no sense to me to show a loader bar if stuff was already loaded.

1 Like
14

It’s very possible that one of the assets in the project is blocking the loading or processing of the loading script :thinking:

15

yaustar: i am not allowed. however do you have a dm link? I guess we need professional help from playcanvas anyways.

1 Like
16

Yes, this is correct @yaustar. This has happened to me but im not sure what you are trying to say. @Marjan

17

If you add yaustar to the project, I can have a peek

18

@Marjan
@yaustar is a ‘‘professional’’ in PlayCanvas (he is from the PlayCanvas team)

19

It’s very odd that it shows up so late :thinking:

The loading script should be executed before the app start loading any assets.

1 Like
20

yaustar: unfortunately I can not do anything without you - or anybody helping out - signing an nba.

1 Like