Delay Loading Screen

The idea is to show an animated logo on loading and the app should not start until the animation is completed. Or the loading screen could just stay on top and the app loads in the background.
I already use a custom Loading Screen but since the “Start” event is fired from somewhere else, I can not delay it there. Any ideas?

Are you using a custom preloader or the default that PlayCanvas uses?

Is this a 3D animation or a GIF, etc?

Is going from preloader -> custom loader -> ‘app’ an option?

The 3D Animation will be prerendered, therefor in a video format (webm, mp4 or whatever)

Right now I use a custom preloader ( i.e. Settings -> Loading Screen -> splash_screen.js ) that delays the hiding of the splash screen itself.
What do you mean by preloader -> custom loader exactly?

You use the preloader as is or your own preloader to load enough assets to show some part of the app (eg a title screen) while you load the rest of the assets.

For example, preloader loads enough assets for a small mini game that you user can player while the actual game loads in the background. This will mean there is only the minimal loading time for the user before they see something interactive and while they are engaged, you load the bigger assets that you need for the ‘actual’ game.

We did it here with Virtual Voodoo where we load enough for the title screen and the customiser and the user can’t press play until the rest of the game is loaded: https://www.miniclip.com/games/virtual-voodoo/en/

In which case, it should be fine to just do it on the preloader and have it fire a custom event when the video is finished (and the assets have been loaded) that your application is listening for.

So rather than having your application ‘ready’ when the preload is done, it will only ‘start’ when your custom event is fired.

This could be as simple as enabling a parent entity in the scene (e.g Root -> parent entity -> the actual scene entities) that is disabled on start.

Bear in mind that on mobile and some desktop browsers, videos don’t autoplay.

Here is a quick and dirty example of what I mean:
https://playcanvas.com/editor/scene/621554
https://playcanvas.com/editor/code/562866?tabs=13123651,13123671

Thanks a lot for your elaborated answer and the example, it really helped me figuring out a better way to handle this compared to my current solution!

BTW: Virtual Voodoo is a ton of fun :smiley:

1 Like