How do I add a local image to the loading screen?

Help & Support
1

Hi , I want to add an image at the footer of my loading screen. The image is one that is already used in the project but I’m not sure how to set the image.src to point to a local file.

Anyone know how?
Thanks

2

It’s recommended to use a base64 URI for the image.src https://base64.guru/converter/encode/image

If you are downloading and self hosting, you can make the changes to the loading screen file on the build directly.

3

But how do I point it to a file within the build?

currently its:
logo.src = ‘https://uploads-ssl.webflow.com/6013587219b5e99075735b44/6013587219b5e93607735baf_Signal_Logo%20Solid%20Black-p-500.png’;

but I need something like:
logo.src = ‘file//:myfile.png’

…but clearly that’s just a guess of how I point it to a file within my project. :slight_smile:

4

Example: https://playcanvas.com/editor/scene/1152302

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 = '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);

        // Wait for all assets to be added before we can get the URL
        app.once('preload:start', function () {           
            var logo = document.createElement('img');
            logo.src = app.assets.find('loading-screen.png', 'texture').getFileUrl(); 
            splash.insertBefore(logo, container);
        });
    };

    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);
});

As mentioned before, it is suggested to use a base64 URI as using an asset from the app requires to wait until all the assets are added to the registry.

Due to the fact that assets starts loading as soon as they are added, (https://github.com/playcanvas/engine/issues/3107), the request for the loading screen image may be stuck behind other network requests and won’t show on the loading screen until they have finished loading.

5

Thanks for this. Regarding the Base64 format I’m not exactly sure which output format to choose with the converter. They all spit out .txt formats and once I have that uploaded into my project I’m not sure how to assign to the source to get an image. What ‘type’ should it be?

For example, this gives me a null url error :
warning_node.src = app.assets.find(‘Surgeon_Warning_base64.txt’, ‘texture’).getFileUrl();

6

Example of usage of base64 string for loading images: https://developer.playcanvas.com/en/tutorials/advance-loading-screen/

You need the URI and use that in place of the URL for logo.src. You may need some CSS work to get it on the right place and centered

image
image900×946 86.8 KB