Loading Screen Change the background picture

edit example of default script:

Hi @chuxinhao,

From what I see in line 16 you have already changed the logo src, isn’t that working for you?

  • The picture of the background I changed is not the logo

Right, you can easily do so by updating some CSS, for example:

            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-image: url(http://photographyblogger.net/wp-content/uploads/2017/06/Alberta-wilderness-near-Banff.jpg);',
            '    background-size: cover;',
            '}',
1 Like

Thank you very much. That’s what I want.I still have a question, how do I convert urls in CSS to resource addresses in the editor

You can do it but really it’s easier to host it yourself as the loading screen is considered to be outside of the PlayCanvas application.

Here’s an example on how you could change the logo with an asset in the PlayCanvas project but it has to wait till the engine is ready which can be a bit late: https://developer.playcanvas.com/en/tutorials/advance-loading-screen/

Relevant code:

    // 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.jpg');
        
        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';
            };
        }
    });
1 Like

This is to modify the logo, if it is to modify the background picture, how to do?

You can change the CSS in the same way as changing the logo by modifying the CSS to use the URL from the asset.

Is this the way to write it?I don’t know if I wrote it right but the background doesn’t change.

    app.on('preload:start', function() {
        var wrapper = document.getElementById('application-splash-wrapper');

        var bgAsset = app.assets.find('bg.png');

        if (bgAsset) {
            var bg = document.createElement('img');    
            bg.src = bgAsset.getFileUrl();

            // Insert DOM before the progress bar
            if (wrapper.childNodes.length > 0) {
                wrapper.insertBefore(bg, wrapper.childNodes[0]);
            } else {
                wrapper.appendChild(bg);
            }

            bg.onload = function () {
                wrapper.style.display = 'block';
            };
        }
    });

I’m going to do that and I’m going to load it up, but how do I get the background image to go full screen?

This method of writing loads much slower than changing url in CSS. Why

Hi @chuxinhao,

The following should be sufficient to add the image asset as a CSS property:

    app.on('preload:start', function(){
        var wrapper = document.getElementById('application-splash-wrapper');
        
        var bgAsset = app.assets.find('Alberta-wilderness-near-Banff.jpg');
        wrapper.style.backgroundImage = "url('"+bgAsset.getFileUrl()+"')";        
        wrapper.style.backgroundSize = 'cover';
    });

It should be fast, depending on the size of your image file.

1 Like

Because it has to wait for Playcanvas to parse and start loading the assets. Hosting the file on an external server will always be faster.

2 Likes
  • Oh, I see. Thank you very much
1 Like