Jump to content

How to customize babylon loading screen


Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

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.

Link to comment
Share on other sites

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


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


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

Link to comment
Share on other sites


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 ;)


Link to comment
Share on other sites

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. ​


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...
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

Link to comment
Share on other sites

  • 4 weeks later...

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...