Get progression of loading screen

Questions
1

Hello guys !

I’m trying to implement a custom Loading Screen with ILoadingScreen.

I have my custom logo working, but i would like to have a progression bar/number.

I’m trying to implement the last part of this documentation Create a custom loading screen - Babylon.js Documentation (Getting File Loading Rate)

Actually my file looks like this and run well :

public run(): void {
	this.engine.loadingScreen = new LoadingScreen();
	this.engine.displayLoadingUI(); //We display the loading screen
	
	// Load Scene
	SceneLoader.Load("./scene/Cuisine/", "scene.babylon", this.engine, (scene: Scene) => {
		
		this.scene = scene;
		var data = JSON.parse(window.localStorage.getItem('data'));

		// No camera?
		if (!this.scene.activeCamera) {
			this.scene.createDefaultCamera(true, false, false);
		}

		// Attach camera
		this.scene.activeCamera.attachControl(this.canvas, true);

		// Load extensions
		Tools.LoadFile("./scene/Cuisine/project.editorproject", (data: string) => {
			// Apply extensions (such as custom code, custom materials etc.)
			
			Extensions.RoolUrl = "./scene/Cuisine/";
			Extensions.ApplyExtensions(this.scene, JSON.parse(data));
		});

I don’t find anywhere a working example of what I’m trying to do. Is it possible ?

Thank’s !

2

@Nodragem created a progress bar, and I’m sure they would be happy to explain it to you.

Here is the forum link for a discussion, or here is the playground link.

For some reason, it’s broken again. I’ll just @Nodragem again.

3

Thank you I’ll check his solution !

1 Like
4

:+1:

5

Would be awesome to be able to adjust the logo on the default logo screen on the default loading screen class.
Now only text and background color can be modified - if you want more you need to create a custom loading screen indeed.
In short, the default loading screen could benefit from some standard configuration options like logo, progress bar, maybe even waiting-time music to make the loading more pleasant to keep hanging around until done :wink:

Tip/psychological trick: Counting down works better than counting up toward a total.

1 Like
6

You can :slight_smile:
just set this url to your image:

BABYLON.DefaultLoadingScreen.DefaultLogoUrl = ...
2 Likes
7

For music, just play music with plain js until it’s done loading.

var audio = new Audio('audio_file.mp3');
audio.play();

Then when the scene loads just do

audio.stop();
8

Hi,

@Givo it seems that the code for my progress bar (Babylon.js Playground) is not working on the Playground because I use accessors (get/set) which are only available when targeting ECMAScript 5 and higher. The code should still work outside the the playground.

@Deltakosh is there a way to set up the typescript compiler of the playground? to be able to chose the target and to remove the error checks would be nice, for instance.

1 Like
9

:+1: Good to know that it will work!

10

the PG is targeting es5 already. I’ll check why we have this issue

11

OK I found why…will fix that asap!

1 Like
12

so what was it?

13

pg was not targeting es5 actually :slight_smile:

1 Like