[SOLVED] Pc is not defined

[khaelou]

Considering I have a custom loading screen, I’m receiving an error stating the PlayCanvas ‘pc’ object is not defined.

Any suggestions to why this may be? I have the loading screen as the #1 script to execute in the execution order settings, only changed the image URL for the logo change.

Reference Script via Loading Screen of User Manual

[Leonidas]

Hmm, script execution order for the loading script doesn’t really matter. Since it’s loaded and executed way before any asset is being added to the assets registry.

Curious about the error you are getting, pc is definitely in the loading script. As you said the default loading script uses that in its very first line:

pc.script.createLoadingScreen(function (app) {

Care to share some code?

[khaelou]

@Leonidas

Curious about the error you are getting, pc is definitely in the loading script

Exactly why I initiated this thread, I’m just as confused. I don’t quite remember getting such error when I first embedded the loading screen months ago. Although the error has been showing for awhile now.

I shared the reference script since it’s pretty much the exact same yet here it is:

Khaelou.js

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/uc?id=1n0nNJHHnxbEF2aJ8ocKvtmA_hTptx_uU';
        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: #000000;',
            '}',

            '#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: #0afc12;',
            '}',
            '@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]

That’s strange. What settings do you here, when selecting the loading script?

@yaustar any idea what the issue is here?

[khaelou]

Hmm good catch @Leonidas, seems that I changed the loading type at some point. I’m guessing it needs to load as an asset as the example you shared huh?

[yaustar]

If it’s loaded before the engine, window.pc would have been defined yet before the engine hasn’t been loaded.

It needs to be an asset or after the engine at least.

[khaelou]

That makes complete sense, silly mistake on my behalf.

Thanks for the help @Leonidas @yaustar indeed