Options
All
  • Public
  • Public/Protected
  • All
Menu

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(() => {});

Hierarchy

Implements

Index

Constructors

Properties

_imageElement: HTMLImageElement
_playButtonElement: HTMLButtonElement
_playButtonRootElement: HTMLElement
_playButtonStyles: string = ...

Loads the css from Loader.css

_styleBlock: HTMLStyleElement
backgroundColor: string = '#176BAA'

Gets or sets the background color of the loader as a hex string

canvas: Canvas = ...
data: Loadable<any>[]

Data associated with a loadable

eventDispatcher: EventDispatcher<any>

Direct access to the game object event dispatcher.

loadingBarColor: Color = Color.White

Gets or sets the color of the loading bar, default is Color.White

loadingBarPosition: Vector

Positions the top left corner of the loading bar If not set, the loader automatically positions the loading bar

logo: string = logoImg
logoHeight: number = 118
logoPosition: Vector

Positions the top left corner of the logo image If not set, the loader automatically positions the logo

logoWidth: number = 468
playButtonPosition: Vector

Positions the top left corner of the play button. If not set, the loader automatically positions the play button

playButtonText: string = 'Play game'

Get/set play button text

suppressPlayButton: boolean = false

Accessors

  • get _image(): HTMLImageElement
  • get _playButton(): HTMLButtonElement
  • get playButtonElement(): HTMLButtonElement
  • get playButtonRootElement(): HTMLElement
  • get progress(): number
  • Returns the progress of the loader as a number between [0, 1] inclusive.

    Returns number

Methods

  • addResource(loadable: Loadable<any>): void
  • Add a resource to the loader to load

    Parameters

    • loadable: Loadable<any>

      Resource to add

    Returns void

  • addResources(loadables: Loadable<any>[]): void
  • Add a list of resources to the loader to load

    Parameters

    • loadables: Loadable<any>[]

      The list of resources to load

    Returns void

  • areResourcesLoaded(): Promise<void>
  • dispose(): void
  • Clean up generated elements for the loader

    Returns void

  • draw(ctx: CanvasRenderingContext2D): void
  • 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.

    Parameters

    • ctx: CanvasRenderingContext2D

    Returns void

  • emit(eventName: string, eventObject: any): void
  • Emits a new event

    Parameters

    • eventName: string

      Name of the event to emit

    • eventObject: any

      Data associated with this event

    Returns void

  • hidePlayButton(): void
  • isLoaded(): boolean
  • Begin loading all of the supplied resources, returning a promise that resolves when loading of all is complete AND the user has clicked the "Play button"

    Returns Promise<Loadable<any>[]>

  • markResourceComplete(): void
  • off(eventName: string, handler?: ((event: any) => void)): void
  • 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.

    Parameters

    • eventName: string

      Name of the event to listen for

    • Optional handler: ((event: any) => void)

      Event handler for the thrown event

        • (event: any): void
        • Parameters

          • event: any

          Returns void

    Returns void

  • on(eventName: string, handler: ((event: any) => void)): void
  • Alias for addEventListener. You can listen for a variety of events off of the engine; see the events section below for a complete list.

    Parameters

    • eventName: string

      Name of the event to listen for

    • handler: ((event: any) => void)

      Event handler for the thrown event

        • (event: any): void
        • Parameters

          • event: any

          Returns void

    Returns void

  • once(eventName: string, handler: ((event: any) => void)): void
  • Once listens to an event one time, then unsubscribes from that event

    Parameters

    • eventName: string

      The name of the event to subscribe to once

    • handler: ((event: any) => void)

      The handler of the event that will be auto unsubscribed

        • (event: any): void
        • Parameters

          • event: any

          Returns void

    Returns void

  • showPlayButton(): Promise<void>
  • Shows the play button and returns a promise that resolves when clicked

    Returns Promise<void>

  • startButtonFactory(): HTMLButtonElement
  • Return a html button element for excalibur to use as a play button

    Returns HTMLButtonElement

  • update(_engine: Engine, _delta: number): void
  • wireEngine(engine: Engine): void