Can't change loading screen

Help & Support
1

I am having an issue with linking a source image to my playcanvas loading screen. Here is the code im using. The results currently produce a blank screen. I am hosting the image on Google Drive and the image is file type PNG.

https://launch.playcanvas.com/1337241?debug=true&ministats=true

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 logo = document.createElement('img');
        logo.src = 'https://drive.google.com/file/d/1LZSxRn-CWNlRpLoX6sdG1vTuYFFXfs30/view?usp=sharing';
        splash.appendChild(logo);
        logo.onload = function () {
            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);

    };

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

I think the problem is that the image didn’t loaded

image
image1377Ă—961 3.2 KB

logo.src is from your gdrive, but it’s only sharing a link/url not the image, try change it to this
https://lh5.googleusercontent.com/-6lLODXlSiM2uHWo8laqH9wgr04EuAuVhwsAynaw7WwFC2UymbgrSRR_GXi1LzI1dwj2qahLeAFJ8HFkIp7U=w1920-h961-rw

it shows you the image, it’s different with your gdrive sharable link.

3

i dont think it works with google drive like that
it basically of a link to DOWNLOAD not to show?

try using gyzao or imigur

1 Like
4

he can still use gdrive to host, but he need to get the exact url of that image like this

image
image1909Ă—871 239 KB

5

I found another url you can try.

6

i think it’ll be the same, since the url is not the “image” url rather its a sharable link to view the image on some kind of gdrive image viewer, no?

7

The url below is to the image itself.

https://doc-0o-94-docs.googleusercontent.com/docs/securesc/lf3pqaea006jpciogombombckovo9oh5/o4g2i0e6pnk1e6jm4b30i11r1ut5j6ng/1645119150000/18275551064946855141/05934173793347952540Z/1LZSxRn-CWNlRpLoX6sdG1vTuYFFXfs30

1 Like
9

image
image1920Ă—748 13.1 KB

hosting an image on gdrive is tricky, due to permissions/authorization. the link i mentioned above give me the image itself, yours shows me that i don’t have permission. Eventhough i think my solution is works for me, but if i open on different device it tells me that my device didn’t have the permission to open it.

last word, dbass-clark should host it on their own hosting/server or using public image host like DerpySlurrpe suggest. cmiiw

1 Like
10

if u REALLY want to use google drive
maybe trying coding in the authorization or from google’s API and import
or include something to load or access files like a password or KEY
but maybe not possible

11

wait…
can’t you just import it in the editor
download the image
then put the image name in the script
u might to code where the file is depending if root or not
i think that might work also