[SOLVED] What is the best way to programmatically check if the PlayCanvas loading screen has ended?

Obviously window.onload = function(){} would not work. Is there some sort of function called that I could use when the PlayCanvas loading screen ends and the game is visible?

Hi @Sewbak,

Yes there is an engine wide event fired that the loading screen subscribes to, to hide the loading screen:

app.on('start', hideSplash);

You can listen to this event from your JS code (running on the same window/context as the Playcanvas app):

pc.Application.getApplication().on('start', function(){
   console.log('loading has finished');

@Leonidas thank you so much for the response.
This is a very simple solution.

1 Like

I set my issue to SOLVED without checking if it worked
The function that gets the app is actually pc.Application.getApplication()
So the code would look like this:

MainText.prototype.initialize = function() {
    pc.Application.getApplication().on("start", function(){alert("called");});

But it doesn’t work

Hi @Sewbak,

Thanks for pointing this out, I mistyped the statement above, now it’s fixed.

That function is meant to be called by outside of any Playcanvas script related code, to monitor when the app has finished loading.

From inside Playcanvas all script initialize() callbacks execute after loading has finished, so you don’t need this code at all.

1 Like

Oh, ok.
Projects seem to load faster when they are opened as published builds, and not launches
I had some code that set a timer and the timing drastically changed when I published the build
You know, there is still a small bit of time in which the loading screen is still visible, after the code assets load. It’s probably the hideSplash function that takes a bit.

Sometimes there are blocking processes like shader compilation that may pause rendering the next frame in the browser.

But yes published builds load faster since they contain some optimizations, playcanvas engine build is compressed/minified, and also your scripts are usually concatenated if selected. That will produce much faster loading times.

1 Like

You may want to try waiting for the ‘postrender’ event instead. That will fire every frame after it’s been rendered to the screen.

You can wait for the first ‘postrender’ event to fire to do whatever you need to when the first frame of the app has been rendered.

This event is fired on the the application object.


pc.Application.getApplication().once('postrender', function(){});

Thank you, this is exactly what I wanted.