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.
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.
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)
right now im on this task and still wondering, if its possible to have a video showing up as loading screen and loading the experience in the background. and if the playcanvas experience is ready showing a skip button or if the video is done at the last frame and the playcanvas experience is ready too, show a start button and then hide the loading / splash container and start the experience as it would do with the standard loader?
would be really nice to have an input for this. Currently im trying to create an external index.html file and load the playcanvas experience at the same time like my custom index.html preloader container. The difficulty here is the communication between those to sections preloader ↔ playcanvas.
So for further projects i would like to know how customizable the loading screen in playcanvas is to maybe avoid creating own “external” loader.
You can study the default loading script and index.html from the build. There is no magic there and pretty self explanatory. Feel free to modify it the way you like. In the end it is just a plain HTML and JavaScript. You can put your video div on top of the application and hide it, when the app is loaded. I wouldn’t do it though, since the main thread will be busy when loading application, so your video will stutter.
