Preloader for PlayCanvas Application

Hi there,

i would like to know the best practise, if i would like to have some kind of preloading, while the playcanvas application is loading asynchronious in the background.

I would like to show a video or some informations about the application instead of the loading bar (i know you can customize this loadingbar appearence with a custom loading script too) - but the user should be able to skip the video, if the playcanvas app is ready, so a simple navigation has to be included too. When the playcanvas application is loaded and the video is finished or if the user skips the video and the application is ready, a “start experience” button should appear.

So basically its a more interactive waiting area till the experience is ready. How would i achieve this? Is it possible within the playcanvas application? lets say you load a (loading)scene first while the main scene is prepared or would i need to do it outside the playcanvas application?

Thank you very much for your ideas!

how i want the experience to work:
→ user opens app via qr-code / link
→ video shows up (depending on its size with low delay / waiting time)
→ video is skippable, if playcanvas application has finished loading in the backtround and start button appears or when video is done playing.

Hey there,

Take a look at this tutorial, it contains code for creating a loading screen. In your case you’d want to pause the application until the either the video has ended or the user skips it. You can do that by settings app.timeScale = 0;, bare in mind though, that you’ll need to handle the scenario where a user skips the video, but the application still isn’t ready yet. Also you’ll be loading the video in whilst simultaneously loading the playcanvas application, which means the overall loading time will be longer. This might be fine in your use case, but worth knowing.

Hi Mark,

thanks for your reply. I think this is not exactly what i was looking for. I know you can modify the loading screen, but the customer wants to “bridge” the waiting time and show a video instead, which would be skippable (so a user input would be required). Im not sure if this would be achievable within the custom loader, because at this point the PlayCanvas experience / main scene is basically may still loading in the background. Furthermore: right now i cant tell how large the application will be, because i havent get the main assets yet.

I want to achieve:

  • When the preloader starts, the video should be loaded first and when the video is playing the playcanvas container should be loaded with priority 2.

  • The skip button of the preloader video should be visible, if the playcanvas container is ready. If the video is skipped or done, the application should not start, until the user then presses a “start” button which appears.

  • Then the main scene is loaded (which starts a zappar experience)