Animated Loading Screen with sounds

is there a way/script to change the canvas loading screen with a video or gif and once the loading screen starts it plays a sound

Yes. Ideally you have the image/video hosted from an external source otherwise you would have to wait till the app registry is loaded until you can get the URL of the asset.

See this page for more details: https://developer.playcanvas.com/en/user-manual/designer/loading-screen/

In terms of playing a sound, you would have to use the WebAudio API directly as it is a plain HTML page.

Alternatively, you can have a very simple app preloader and create a more ‘rich’ loader in the PlayCanvas app and that will allow you do use the Engine to play sounds, play animations etc. eg https://developer.playcanvas.com/en/tutorials/load-assets-with-a-progress-bar/

1 Like

So what would be a example script of that do i need to put the gif file in the script?

Or i just need a url of the gif

An animated gif url added to an html image element will work just fine.

so like this?

// 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('https://i.kym-cdn.com/photos/images/newsfeed/000/528/363/2f0.gif');

heres the whole 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: #283538;',
        '}',

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

        '#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: #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();

// 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('https://i.kym-cdn.com/photos/images/newsfeed/000/528/363/2f0.gif');
    
    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

Hi @DerpySlurrpe,

If you are hosting the remote gif in your server, no need to search in the Playcanvas registry.

Just replace the current img logo element, src attribute. Here is an example from the default Playcanvas splash screen:

        var logo = document.createElement('img');
        logo.src = 'https://i.kym-cdn.com/photos/images/newsfeed/000/528/363/2f0.gif';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };

@Leonidas is there a way also to resize it in any way and move it

Well, since it’s an HTML element you can resize/move it using regular CSS:

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