Why is the loading interface suddenly black?

chuxinhao · July 8, 2020, 2:53am

I changed the style of the load interface,
But all of a sudden when I load it, it goes black and I change it

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';
        // splash.style.visibility="hidden";
        // splash.style.display = 'block';

        var logo = document.createElement('img');
        
        logo.src = 'https://azh5.oss-cn-shanghai.aliyuncs.com/azimgs/UI_PIC_Loading.png';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
           
            //logo.style.visibility="hidden";
        };

        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 = [
            'html {',
            '   height: 100%;',
             '   background-color: transparent;',
            '}',
            'body {',
             '   background-color: transparent;',
            '}',

            '#application-splash-wrapper {',
            // '    background-color: #009AB6;',
            '   background-color: transparent;',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-size: cover;',
            '}',

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

Leonidas · July 8, 2020, 7:28am

Hi @chuxinhao,

Your question is why it goes black for just an instant before it shows the white background / loading bar, right?

I think that’s the point where Playcanvas loads and parses your custom loading screen/CSS and I am not sure if there is any way around it.

yaustar · July 8, 2020, 7:33am

In the CSS, try changing the background-color of the body and html to a solid colour instead of using transparent.

Leonidas · July 8, 2020, 7:44am

I’ve tried that on a loading screen of my own, but still got the black background for an instant.

chuxinhao · July 9, 2020, 7:04am

I also think the engine loads the way it preloads the interface and then parses my custom CSS.

LeXXik · July 9, 2020, 1:11pm

Not sure which black screen you guys refer to. Are you referring to this screen?:

Leonidas · July 9, 2020, 1:29pm

Hi @LeXXik,

I think @chuxinhao is referring to that momentary black screen showing for an instant, when Playcanvas starts loading and before the custom splash screen is rendered.

I think given the splash screen is a .js file that requires loading/parsing, the current system makes that unavoidable.

LeXXik · July 9, 2020, 5:44pm

I feel like I don’t see something obvious here Is it visible on the video from the original post? I even downloaded it to go frame by frame… Nevertheless, I think all the custom loader does is it injects a div element, as a wrapper and then removes it. Are you saying there is a black screen appearing after the JS code inserts the div and before it is actually drawn on the screen? But how is that possible? I mean the injected div should inherit the CSS properties of the parent (<body>?). What am I missing? Also, I don’t see a black screen in my app (my eyes could be old, though, and miss some frames ).

Leonidas · July 9, 2020, 6:52pm

This frame, not a black screen to be accurate, playcanvas grey:

LeXXik · July 9, 2020, 8:41pm

Ah, thank you, @Leonidas! I see now. Well, for that one, it should be enough to change the CSS properties of body and application-splash-wrapper, I think.

I’ve just tried with a simple project
The app: a fullscreen yellow 2D element.
The loading screen: white color.

            'body {',
            '    background-color: #FFFFFF;',
            '}',

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

As you can see, I don’t have that grey color. The white loading screen appears, and after that the yellow app starts.

Also, if I remember correctly, some browsers read CSS transparent as a black color with opacity 0. Not sure if it is related, but I think @chuxinhao you would want to use a fixed color code instead. Perhaps white #FFFFFF?

Leonidas · July 9, 2020, 8:44pm

Well, on a local project it makes sense that it will load in the same instant, there is no fetch/loading time for the resources.

I’ve tried it again on an editor project using a custom splash screen, and I get the black/grey background for an instant.

LeXXik · July 9, 2020, 9:56pm

That actually makes sense, might be due to fetching files. I am on personal account, so I don’t have access to the custom splash screen feature. Probably, as you mentioned, there is no way around it then.

chuxinhao · July 10, 2020, 2:02am

Yes, that’s what I’m trying to say

chuxinhao · July 10, 2020, 6:14am

Is there a way to solve this problem now?

yaustar · July 10, 2020, 7:30am

Unlikely if what Leonidas said is correct.

You would have to download the build and change the original index.html style.

I’m wondering if it’s possible to add an external script to the settings and see if that gets added soon enough to change the css

chuxinhao · July 10, 2020, 8:28am

It should be his influence

yaustar · July 10, 2020, 8:48am

Yes, that’s right. You will need to change that to get rid of the flash of the grey/black screen.

gaoyong · May 28, 2021, 9:26am

How to modify, I also encountered this problem when developing and previewing the web page

chuxinhao · May 31, 2021, 2:49am

设置成你想要的颜色就可以

smokys · June 9, 2021, 5:13pm

这不是中文频道请说英语 (better to speak english please)