[SOLVED] Hiding a loading screen only after a custom event has fired

[Devortel]

I’m currently using the default loading screen as shown in the docs. It’s working fine, however I’d like to be able hide the loading screen after a custom event is fired. My app sends out a couple of async requests after the engine wide ‘start’ event is fired and I’d like to keep the loading screen visible until all these requests have completed.

In the loading screen script, I’ve tried replacing the default app.start listener with a function that does nothing and then adding a listener for my own custom event like so:

app.on('start', doNothing);
app.on('customEvent', hideScreen);

However, the loading screen is still hidden as soon as the engine wide start event fires and it seems like the removal of the loading screen is handled elsewhere by the engine.

My backup plan is to implement a ‘secondary’ loading screen hud element that’s immediately visible after app start, however it’d be much easier if we could keep the original loading screen visible for just a tiny bit longer.

[Kulodo133]

Hi, that sounds like it should work. Maybe your customEvent is firing sooner than you think? here is an example where I fire the customEvent after 2 seconds. https://playcanvas.com/project/868079/overview/loading-screen-test-1

[Devortel]

Thanks for your example, it shed some light on where I’m going wrong. The loading screen is fine, but it seems like my game is being rendered over the top of it. As as test, I completely disabled the hideSplash function expecting the splash screen to remain visible indefinitely. However, my game is simply rendered on top of it and it’s still visible on transparent layers. Screenshots below.

Is there a way to set the layer on the splash screen? I don’t see any explicit mention of this in the docs or engine source code.

Here is the splash screen:

When the splash screen isn’t hidden, it remains visible through transparent layers:

[Kulodo133]

In the example loadingScreen.js https://playcanvas.com/editor/code/868079?tabs=64833605 the showSplash() function is appending the html div ‘application-splash-wrapper’ to the doc so it obscures the canvas, and hideSplash() removes it. So if you don’t call hideSplash it will remain. And if the div has opacity set to cause it to be transparent you would see that effect when the scene is rendered.

[Devortel]

I ended up solving this by setting the css z-index property on the application-canvas.

Inside showSplash, I added:

let appCanvas = document.getElementById('application-canvas');
if (appCanvas) {
    appCanvas.style.zIndex = -1;
}

And then in hideSplash, I added:

let appCanvas = document.getElementById('application-canvas');
if (appCanvas) {
    appCanvas.style.removeProperty('z-index');
}

In essence, while the splash screen is visible, we are using css to put the application canvas ‘behind’ the splash screen. And then as soon as the splash screen is hidden, we remove the z-index, returning the application canvas back to the way it was before.

I will amend this solution if I discover any pitfalls.