How to customize babylon loading screen

[somnath281]

Anybody knows how to customize babylon loading screen.

[Ahiru]

Did you check this link? http://pixelcodr.com/tutos/preloader/preloader.html

 

With "engine.loadingUIBackgroundColor" and "engine.loadingUIText" you can set easy properties, if you want more have a look into: https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.engine.js

 

Line 1854 the LoadingUI starts, and you can see what you can set  - have fun!

[somnath281]

Thanks

[Dad72]

Full documentation here: http://doc.babylonjs.com/tutorials/How_to_use_AssetsManager#using-loading-screen

[Ahiru]

"FULL" documentation ... Yeah, but the loading-screen part (especially for customisation is a bit ... uhhmmm ... limited??)   

[RaananW]

I was just thinking it would be nice if you could create your own custom loading screen and add it to the engine.

I am pushing a PR right now to allow exactly that, I will have to document it thoroughly.

In general it would be possible to create a different loading screen and set the engine to use it instead of the default one.

[RaananW]

So, https://github.com/BabylonJS/Babylon.js/pull/700 is waiting for approval. I don't want to merge it just yet, as it includes two small breaking changes. 
 
Short documentation:
creating a new ILoadingScreen implementation (TypeScript) or a javascript class with the functions displayLoadingUI() and hideLoadingUI() and setting the loadingScreen variable in the engine will replace the loading screen. 
For example (TypeScript) :
 

export class SillyLoadingScreen implements ILoadingScreen {    public displayLoadingUI(): void {        alert("loading, can't you see?");    }    public hideLoadingUI(): void {        alert("Finished loading, ready!");    }}engine.loadingScreen = new SillyLoadingScreen();

 
To change the text and background color of the loading screen one would need to do that:
TypeScript:
 

var loadingScreen = <DefaultLoadingScreen> engine.loadingScreen;loadingScreen.loadingUIText = "Yo what's up dude, my assets are loading!";loadingScreen.loadingUIBackgroundColor = "theWayILikeMyCoffee"; //or any other CSS conform color

 
 
or JavaScript
 
 

engine.loadingScreen.loadingUIText = "JS < TS or > TS?!";engine.loadingScreen.loadingUIBackgroundColor = "bottleGreenWithABitOfOlive"; //or any other CSS conform color

 
 
And that's about it. The rest will work automatically.

[Dad72]

"FULL" documentation ... Yeah, but the loading-screen part (especially for customisation is a bit ... uhhmmm ... limited??)   

 

Yes, we agree that it is not "Full". "little" then. 

 

RaananW, I think that DK did not want that we can change the default Loading Babylon was the signing of Babylon. his trademark.

[RaananW]

hmmm :-) ok, I can remove the PR. This is why I haven't merged it yet :-)

 

It can be anyhow changed, the functiosn are there and can be altered. Anyone not interested in changing it won't, which will still leave the trademark there, I guess.

[Dad72]

Must see what DK thinks, maybe he'll change of opinion.

[jerome]

The fact a logo is copyrighted or a trademark doesn't mean you can't use another one.

The framework is under the Apache 2.0 Licence, remember. You can do whatever you want as long as you respect this licence.

[Dad72]

Yes Jerome can use another one, but do not modify the existing one in the engine. I  had ask once DK if could change it, he had told no. But that may changed

[RaananW]

I have no intention to do anything against DK's wish. And I will fully understand if he won't want to have something like that in the framework...

 

If not in the main framework, this could anyhow be a nice BJSX extension if people really need it :-) exactly the point of this repo...

[davrous]

Hi,

I've already discussed that with deltakosh. As some people are using Babylon.js without mentioning it sometimes, we'd like to keep our "trademark" visible in a way or another. That said, you can do whatever you like thanks to the licence in the source code. We just want not to have this feature in our main official repo. People who want a custom loader will have to write it themselves

David

[jerome]

clear and legitimate 

[davrous]

Ok, I've just got a phone call with Deltakosh. We've reviewed RaananW's code and it's pretty cool.

 

So, we're going to accept as it doesn't really break what we'd like to do. People will still have to code more or less their own loading screen, which is fine.

 

​If you've got an idea on how to inject a subtle reference somewhere that the current project is running on top of babylon.js, feel free to share . We're still have the hello message in the engine startup. ​

​

David​

[RaananW]

I'll make the adjustment David wanted and commit them soon. I'm happy it all worked out ☺

Made the changes, I want a final look from David before it's merged. Will then update the documentation.

[Flomotion]

Will we be able to use a background image as well? And a progress bar.

 

It seems a bit strange to me that this can't be done because it won't promote BabylonJS enough.

I think a text or logo somewhere on the screen (flexible position, set by user) with 'powered by BabylonJS' could be enough. This can be the top layer that can't be turned off.

 

That will give BabylonJS the attention it deserves and it gives users the option to create their own loading screen design. And place that 'powered by BabylonJS' at a position that agrees with the design.

[Dad72]

I am of the same opinion as Flomotion. I think the loading can receive a layer that we can change at will and another layer that can not be changed for brand Babylon.

It would be really nice to have a loading progress bar with document.createElement("progress") integrate

Raanan I did not find your documentation that or a tutorial to change the loading screen

[RaananW]

Ah!

Yes, that's because it doesn't exist. Will add that page pretty soon.

[RaananW]

http://doc.babylonjs.com/tutorials/Creating_a_custom_loading_screen

Enjoy!

[Flomotion]

I'm trying to implement your example Raanan. But I can't understand this part:

 

To create a new loading screen, you will have to create a simple class, implementing the following interface:

interface ILoadingScreen {  //What happens when loading starts  displayLoadingUI: () => void;  //What happens when loading stops  hideLoadingUI: () => void;  //default loader support. Optional!  loadingUIBackgroundColor: string;  loadingUIText: string;}

It results in an error and I'm not sure how to use it. Could you show it in a little example?

[RaananW]

Hi Flomotion,

 

in the page you found the interface at, you can find two examples - in typescript and javascript.

 

I am not sure what error are you getting. If you are using TypeScript, this is the interface you can implement in order to have a working Loading Screen. Do you want to show what you tried?

[RaananW]

A very quick demo (using the very simple code I wrote for the doc):

 

http://www.babylonjs-playground.com/#1WXS3J

[Flomotion]

I've pasted in your code from the page. But only saw the 'loaded' message. And the standard loading screen didn't disappear. But I think I'll take a good look at the playground example you just made. Thank you very much!

 

 

---

and just found what I did wrong. I placed the loading screen declaration in the wrong place.

 

thanks again!