Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Loader

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 ILoadable 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

constructor

Properties

Protected _imageElement

_imageElement: HTMLImageElement

Protected _playButtonElement

_playButtonElement: HTMLButtonElement

Protected _playButtonRootElement

_playButtonRootElement: HTMLElement

Protected _playButtonStyles

_playButtonStyles: string = loaderCss.toString()

Loads the css from Loader.css

Protected _styleBlock

_styleBlock: HTMLStyleElement

backgroundColor

backgroundColor: string = "#176BAA"

eventDispatcher

eventDispatcher: EventDispatcher

Direct access to the game object event dispatcher.

logo

logo: string = logoImg

logoHeight

logoHeight: number = 118

logoWidth

logoWidth: number = 468

playButtonText

playButtonText: string = "Play game"

Get/set play button text

suppressPlayButton

suppressPlayButton: boolean = false

Accessors

Protected _image

  • get _image(): HTMLImageElement

Protected _playButton

  • get _playButton(): HTMLButtonElement

Methods

addResource

  • Add a resource to the loader to load

    Parameters

    Returns void

addResources

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

    Parameters

    • loadables: Loadable[]

      The list of resources to load

    Returns void

draw

  • 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

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

    Parameters

    • eventName: string

      Name of the event to emit

    • eventObject: GameEvent<any>

      Data associated with this event

    Returns void

getData

  • getData(): void

hidePlayButton

  • hidePlayButton(): void

isLoaded

  • isLoaded(): boolean
  • Returns true if the loader has completely loaded all resources

    Returns boolean

load

  • Begin loading all of the supplied resources, returning a promise that resolves when loading of all is complete

    Returns Promise<any>

off

  • off(eventName: string, handler?: function): 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: function

      Event handler for the thrown event

    Returns void

on

  • on(eventName: string, handler: function): 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: function

      Event handler for the thrown event

    Returns void

once

  • once(eventName: string, handler: function): 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: function

      The handler of the event that will be auto unsubscribed

    Returns void

oncomplete

  • oncomplete(): void

onerror

  • onerror(): void

onprogress

  • onprogress(e: any): void

processData

  • processData(): void

setData

  • setData(): void

showPlayButton

  • Shows the play button and returns a promise that resolves when clicked

    Returns Promise<any>

startButtonFactory

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

    Returns HTMLButtonElement

update

  • update(_engine: Engine, _delta: number): void
  • 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.

    Parameters

    • _engine: Engine
    • _delta: number

    Returns void

wireEngine

  • wireEngine(engine: Engine): void

Static extend

  • extend(methods: any): any
  • You may wish to extend native Excalibur functionality in vanilla Javascript. Any method on a class inheriting Class may be extended to support additional functionality. In the example below we create a new type called MyActor.

    var MyActor = Actor.extend({
    
       constructor: function() {
          this.newprop = 'something';
          Actor.apply(this, arguments);
       },
    
       update: function(engine, delta) {
          // Implement custom update
          // Call super constructor update
          Actor.prototype.update.call(this, engine, delta);
    
          console.log("Something cool!");
       }
    });
    
    var myActor = new MyActor(100, 100, 100, 100, Color.Azure);

    In TypeScript, you only need to use the extends syntax, you do not need to use this method of extension.

    Parameters

    • methods: any

      A JSON object contain any methods/properties you want to extend

    Returns any