How do I do an animated loading bar between scenes. All I have is an icon that rotates but as the new scene loads everything just freezes until the load is complete.
Is there a way?
I’ll link back to my post in the other thread just in case:
I hope this is helpful.
1 Like
From what you have written, you can’t create the scene in one go. You will have to split it up and create parts of it over a number of frames so it’s not completely frozen on the main thread.
Hmm, not sure I quite understand, but do you mean something like?
this.app.scenes.loadSceneHierarchy(aLittleBitOfTheScene function() LoadTheNextBit);
Even with something like this though, the loading would just be very choppy and would really allow for a rotating load bar to rotate smoothly I guess.
If your worry about going the route I suggested was a round loading bar, you should still be able to achieve this with CSS. Here are a set of some premade CSS loading icons:
Then you can cover your scene while it loads and it shouldn’t be choppy.
Will that work if the main thread is blocked though?
How long is this freeze and how big entity wise is this scene?
It should if you separate the steps nicely. In my projects, I fade the loading screen in, start the scene transition, using the loading screen as a preloader. Then, when all of the assets are loaded, fire an event that fades the loading screen back out. I have noticed no stuttering through the scene changing process.
It takes about 2-3 seconds to load on surface tablet. The new scene has a 3d model with about 10mb of textures and a tiny bit of UI.
I just wanted something moving so that the user knows the app hasn’t just crashed.
When you call loadSceneHierarchy, two steps happen:
- A network call to the get the scene JSON data
- Creation of the scene. This is when it creates entities, components, calling init functions on scripts etc.
-
Is async and doesn’t block the main thread so you can animate icons/graphics etc.
-
However blocks the main thread until it is done. This is what mostly likely causing the freeze in your app.
There are several ways to get around this a bit:
A. What @eproasim has suggested. I was under the impression that it won’t animate as its on the main thread but I’ve never tried it before so chances are that I’m wrong.
B. Create less entities at a time. If the scene is very big and/or has a lot of logic in the initial functions of scripts, I would split it up into small chunks that can be loaded and created over time. So you can load only what the user would see at first first, and then create or load chunks as the user navigates through the scene.
Thinking about this more, is it just the one 3D model? Any physics with custom meshes?
Would be worth profiling in Chrome Devtools to see where all the time is being spent.
Its just one template made up of 6 individual models. It doesn’t animate. Its just a mattress (6 individual layers). Textures are around 10 meg in total and there is really very little else in the scene. No physics etc just a little bit of UI. The load is almost instant on PC but on the surface takes 2-3 seconds.
In which case I suggest using the browser devtools and use the profiler to work out where the time is being spent.