Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Loader

The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader

const loader = PIXI.Loader.shared; // PixiJS exposes a premade instance for you to use.
//or
const loader = new PIXI.Loader(); // you can also create your own if you want

const sprites = {};

// Chainable `add` to enqueue a resource
loader.add('bunny', 'data/bunny.png')
      .add('spaceship', 'assets/spritesheet.json');
loader.add('scoreFont', 'assets/score.fnt');

// Chainable `pre` to add a middleware that runs for each resource, *before* loading that resource.
// This is useful to implement custom caching modules (using filesystem, indexeddb, memory, etc).
loader.pre(cachingMiddleware);

// Chainable `use` to add a middleware that runs for each resource, *after* loading that resource.
// This is useful to implement custom parsing modules (like spritesheet parsers, spine parser, etc).
loader.use(parsingMiddleware);

// The `load` method loads the queue of resources, and calls the passed in callback called once all
// resources have loaded.
loader.load((loader, resources) => {
    // resources is an object where the key is the name of the resource loaded and the value is the resource object.
    // They have a couple default properties:
    // - `url`: The URL that the resource was loaded from
    // - `error`: The error that happened when trying to load (if any)
    // - `data`: The raw data that was loaded
    // also may contain other properties based on the middleware that runs.
    sprites.bunny = new PIXI.TilingSprite(resources.bunny.texture);
    sprites.spaceship = new PIXI.TilingSprite(resources.spaceship.texture);
    sprites.scoreFont = new PIXI.TilingSprite(resources.scoreFont.texture);
});

// throughout the process multiple signals can be dispatched.
loader.onProgress.add(() => {}); // called once per loaded/errored file
loader.onError.add(() => {}); // called once per errored file
loader.onLoad.add(() => {}); // called once per loaded file
loader.onComplete.add(() => {}); // called once when the queued resources all load.
see

https://github.com/englercj/resource-loader

memberof

PIXI

Hierarchy

  • Loader_2
    • Loader

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new Loader(baseUrl?: string, concurrency?: number): Loader

  • Parameters

    • Optional baseUrl: string
    • Optional concurrency: number

    Returns Loader

Properties

Private _protected

_protected: any

baseUrl

baseUrl: string

The base url for all resources loaded by this loader.

member

{string}

concurrency

concurrency: number

The number of resources to load concurrently.

member

{number}

default

10

defaultQueryString

defaultQueryString: string

A querystring to append to every URL added to the loader.

This should be a valid query string without the question-mark (?). The loader will also not escape values for you. Make sure to escape your parameters with encodeURIComponent before assigning this property.

example

const loader = new Loader();

loader.defaultQueryString = 'user=me&password=secret';

// This will request 'image.png?user=me&password=secret' loader.add('image.png').load();

loader.reset();

// This will request 'image.png?v=1&user=me&password=secret' loader.add('iamge.png?v=1').load();

member

{string}

default

''

loading

loading: boolean

Loading state of the loader, true if it is currently loading resources.

member

{boolean}

default

false

onComplete

onComplete: any

Dispatched when the queued resources all load.

The callback looks like {@link Loader.OnCompleteSignal}.

member

{Signal<Loader.OnCompleteSignal>}

onError

onError: any

Dispatched once per errored resource.

The callback looks like {@link Loader.OnErrorSignal}.

member

{Signal<Loader.OnErrorSignal>}

onLoad

onLoad: any

Dispatched once per loaded resource.

The callback looks like {@link Loader.OnLoadSignal}.

member

{Signal<Loader.OnLoadSignal>}

onProgress

onProgress: any

Dispatched once per loaded or errored resource.

The callback looks like {@link Loader.OnProgressSignal}.

member

{Signal<Loader.OnProgressSignal>}

onStart

onStart: any

Dispatched when the loader begins to process the queue.

The callback looks like {@link Loader.OnStartSignal}.

member

{Signal<Loader.OnStartSignal>}

progress

progress: number

The progress percent of the loader going through the queue.

member

{number}

default

0

Readonly resources

resources: {}

All the resources for this loader by name.

Type declaration

Static Private _plugins

_plugins: any

Collection of all installed use middleware for Loader.

static
member

{Array<PIXI.ILoaderPlugin>} _plugins

memberof

PIXI.Loader

Static Private _shared

_shared: any

Accessors

Static shared

  • A premade instance of the loader that can be used to load resources.

    name

    shared

    static
    memberof

    PIXI.Loader

    Returns Loader

Methods

add

  • add(name: string, url: string, callback?: OnCompleteSignal): Loader
  • add(name: string, url: string, options?: IAddOptions, callback?: OnCompleteSignal): Loader
  • add(url: string, callback?: OnCompleteSignal): Loader
  • add(url: string, options?: IAddOptions, callback?: OnCompleteSignal): Loader
  • add(options: IAddOptions, callback?: OnCompleteSignal): Loader
  • add(resources: (string | IAddOptions)[], callback?: OnCompleteSignal): Loader

  • Adds a resource (or multiple resources) to the loader queue.

    This function can take a wide variety of different parameters. The only thing that is always required the url to load. All the following will work:

    loader
    // normal param syntax
    .add('key', 'http://...', function () {})
    .add('http://...', function () {})
    .add('http://...')

    // object syntax
    .add({
        name: 'key2',
        url: 'http://...'
    }, function () {})
    .add({
        url: 'http://...'
    }, function () {})
    .add({
        name: 'key3',
        url: 'http://...'
        onComplete: function () {}
    })
    .add({
        url: 'https://...',
        onComplete: function () {},
        crossOrigin: true
    })

    // you can also pass an array of objects or urls or both
    .add([
        { name: 'key4', url: 'http://...', onComplete: function () {} },
        { url: 'http://...', onComplete: function () {} },
        'http://...'
    ])

    // and you can use both params and options
    .add('key', 'http://...', { crossOrigin: true }, function () {})
    .add('http://...', { crossOrigin: true }, function () {});
    function
    variation

    1

    Parameters

    • name: string

      The name of the resource to load.

    • url: string

      The url for this resource, relative to the baseUrl of this loader.

    • Optional callback: OnCompleteSignal

    Returns Loader

    Returns itself.

  • function
    variation

    2

    Parameters

    • name: string

      The name of the resource to load.

    • url: string

      The url for this resource, relative to the baseUrl of this loader.

    • Optional options: IAddOptions
    • Optional callback: OnCompleteSignal

    Returns Loader

    Returns itself.

  • function
    variation

    3

    Parameters

    • url: string

      The url for this resource, relative to the baseUrl of this loader.

    • Optional callback: OnCompleteSignal

    Returns Loader

    Returns itself.

  • function
    variation

    4

    Parameters

    • url: string

      The url for this resource, relative to the baseUrl of this loader.

    • Optional options: IAddOptions
    • Optional callback: OnCompleteSignal

    Returns Loader

    Returns itself.

  • function
    variation

    5

    Parameters

    • options: IAddOptions

      The options for the load. This object must contain a url property.

    • Optional callback: OnCompleteSignal

    Returns Loader

    Returns itself.

  • function
    variation

    6

    Parameters

    • resources: (string | IAddOptions)[]

      An array of resources to load, where each is either an object with the options or a string url. If you pass an object, it must contain a url property.

    • Optional callback: OnCompleteSignal

    Returns Loader

    Returns itself.

destroy

  • destroy(): void

  • Destroy the loader, removes references.

    memberof

    PIXI.Loader#

    method

    destroy

    Returns void

load

  • load(cb?: (...params: any[]) => any): Loader

  • Starts loading the queued resources.

    Parameters

    • Optional cb: (...params: any[]) => any
        • (...params: any[]): any

        • Parameters

          • Rest ...params: any[]

          Returns any

    Returns Loader

    Returns itself.

pre

  • pre(fn: (...params: any[]) => any): Loader

  • Sets up a middleware function that will run before the resource is loaded.

    Parameters

    • fn: (...params: any[]) => any

      The middleware function to register.

        • (...params: any[]): any

        • Parameters

          • Rest ...params: any[]

          Returns any

    Returns Loader

    Returns itself.

reset

  • Resets the queue of the loader to prepare for a new load.

    Returns Loader

    Returns itself.

use

  • use(fn: (...params: any[]) => any): Loader

  • Sets up a middleware function that will run after the resource is loaded.

    Parameters

    • fn: (...params: any[]) => any

      The middleware function to register.

        • (...params: any[]): any

        • Parameters

          • Rest ...params: any[]

          Returns any

    Returns Loader

    Returns itself.

Static pre

  • pre(fn: (...params: any[]) => any): Loader

  • Sets up a middleware function that will run before the resource is loaded.

    static

    Parameters

    • fn: (...params: any[]) => any

      The middleware function to register.

        • (...params: any[]): any

        • Parameters

          • Rest ...params: any[]

          Returns any

    Returns Loader

    Returns itself.

Static registerPlugin

  • Adds a Loader plugin for the global shared loader and all new Loader instances created.

    static
    method

    registerPlugin

    memberof

    PIXI.Loader

    Parameters

    Returns typeof Loader

    Reference to PIXI.Loader for chaining

Static use

  • use(fn: (...params: any[]) => any): Loader

  • Sets up a middleware function that will run after the resource is loaded.

    static

    Parameters

    • fn: (...params: any[]) => any

      The middleware function to register.

        • (...params: any[]): any

        • Parameters

          • Rest ...params: any[]

          Returns any

    Returns Loader

    Returns itself.

Generated using TypeDoc