tutorials

Creating a custom loading screen


Starting with Babylon.js 2.3 the loading screen (the screen used when loading assets or a scene) can be changed by the developer.

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

In plain JavaScript, your loader code will look like this:

function MyLoadingScreen( /* variables needed, for example:*/ text) {
  //init the loader
  this.loadingUIText = text;
}
MyLoadingScreen.prototype.displayLoadingUI = function() {
  alert(this.loadingUIText);
};
MyLoadingScreen.prototype.hideLoadingUI = function() {
  alert("Loaded!");
};

In TypeScript the same will look like this:

class MyLoadingScreen implements ILoadingScreen {
  //optional, but needed due to interface definitions
  public loadingUIBackgroundColor: string
  constructor(public loadingUIText: string) {}
  public displayLoadingUI() {
    alert(this.loadingUIText);
  }

  public hideLoadingUI() {
    alert("Loaded!");
  }
}

The usage is the same in both languages:

var loadingScreen = new MyLoadingScreen("I'm loading!!");
//Set the loading screen in the engine to replace the default one
engine.loadingScreen = loadingScreen;