Loads the css from Loader.css
Gets or sets the background color of the loader as a hex string
Direct access to the game object event dispatcher.
Gets or sets the color of the loading bar, default is Color.White
Positions the top left corner of the loading bar If not set, the loader automatically positions the loading bar
Positions the top left corner of the logo image If not set, the loader automatically positions the logo
Positions the top left corner of the play button. If not set, the loader automatically positions the play button
Get/set play button text
Returns the progess of the loader as a number between [0, 1] inclusive.
Add a resource to the loader to load
Resource to add
Add a list of resources to the loader to load
The list of resources to load
Clean up generated elements for the loader
Loader draw function. Draws the default Excalibur loading screen.
Override logo
, logoWidth
, logoHeight
and backgroundColor
properties
to customize the drawing, or just override entire method.
Emits a new event
Name of the event to emit
Data associated with this event
Returns true if the loader has completely loaded all resources
Begin loading all of the supplied resources, returning a promise that resolves when loading of all is complete
Alias for removeEventListener
. If only the eventName is specified
it will remove all handlers registered for that specific event. If the eventName
and the handler instance are specified only that handler will be removed.
Name of the event to listen for
Event handler for the thrown event
Alias for addEventListener
. You can listen for a variety of
events off of the engine; see the events section below for a complete list.
Name of the event to listen for
Event handler for the thrown event
Once listens to an event one time, then unsubscribes from that event
The name of the event to subscribe to once
The handler of the event that will be auto unsubscribed
Shows the play button and returns a promise that resolves when clicked
Return a html button element for excalibur to use as a play button
Perform any calculations or logic in the update
method. The default Loader
does not
do anything in this method so it is safe to override.
Pre-loading assets
The loader provides a mechanism to preload multiple resources at one time. The loader must be passed to the engine in order to trigger the loading progress bar.
The Loader itself implements Loadable so you can load loaders.
Example: Pre-loading resources for a game
// create a loader var loader = new ex.Loader(); // create a resource dictionary (best practice is to keep a separate file) var resources = { TextureGround: new ex.Texture("/images/textures/ground.png"), SoundDeath: new ex.Sound("/sound/death.wav", "/sound/death.mp3") }; // loop through dictionary and add to loader for (var loadable in resources) { if (resources.hasOwnProperty(loadable)) { loader.addResource(resources[loadable]); } } // start game game.start(loader).then(function () { console.log("Game started!"); });
Customize the Loader
The loader can be customized to show different, text, logo, background color, and button.
const loader = new ex.Loader([playerTexture]); // The loaders button text can simply modified using this loader.playButtonText = 'Start the best game ever'; // The logo can be changed by inserting a base64 image string here loader.logo = 'data:image/png;base64,iVBORw...'; loader.logoWidth = 15; loader.logoHeight = 14; // The background color can be changed like so by supplying a valid CSS color string loader.backgroundColor = 'red' loader.backgroundColor = '#176BAA' // To build a completely new button loader.startButtonFactory = () => { let myButton = document.createElement('button'); myButton.textContent = 'The best button'; return myButton; }; engine.start(loader).then(() => {});