PIXI.Loader
class Loader
The new loader, forked from 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.
Constructor
new PIXI.Loader(baseUrl: string, concurrency: number) → {}
Name | Type | Default | Description |
---|---|---|---|
baseUrl | string | '' |
The base url for all resources loaded by this loader. |
concurrency | number | 10 |
The number of resources to load concurrently. |
Summary
Properties from Loader
PIXI.Loader |
A premade instance of the loader that can be used to load resources. |
ILoaderAdd |
Adds a resource (or multiple resources) to the loader queue. |
string |
The base url for all resources loaded by this loader. |
number |
|
string |
A querystring to append to every URL added to the loader. |
boolean |
Loading state of the loader, true if it is currently loading resources. |
PIXI.Signal<Loader.OnCompleteSignal> |
Dispatched when the queued resources all load. |
PIXI.Signal<Loader.OnErrorSignal> |
Dispatched once per errored resource. |
PIXI.Signal<Loader.OnLoadSignal> |
Dispatched once per loaded resource. |
PIXI.Signal<Loader.OnProgressSignal> |
Dispatched once per loaded or errored resource. |
PIXI.Signal<Loader.OnStartSignal> |
Dispatched when the loader begins to process the queue. |
number |
The progress percent of the loader going through the queue. |
Dict<PIXI.LoaderResource> |
All the resources for this loader keyed by name. |
Methods from Loader
typeof PIXI.Loader |
|
void |
Destroy the loader, removes references. |
this |
|
this |
|
this |
|
this |
|
Public Properties
add: ILoaderAdd
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 () {});
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.
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();
loading: boolean = false
Loading state of the loader, true if it is currently loading resources.
onComplete: PIXI.Signal<Loader.OnCompleteSignal>
Dispatched when the queued resources all load.
onError: PIXI.Signal<Loader.OnErrorSignal>
Dispatched once per errored resource.
onProgress: PIXI.Signal<Loader.OnProgressSignal>
Dispatched once per loaded or errored resource.
onStart: PIXI.Signal<Loader.OnStartSignal>
Dispatched when the loader begins to process the queue.
progress: number = 0
The progress percent of the loader going through the queue.
resources: Dict<PIXI.LoaderResource>
All the resources for this loader keyed by name.
Public Methods
static registerPlugin(plugin: ILoaderPlugin) → {typeof PIXI.Loader}
Use the PIXI.extensions.add API to register plugins.
Name | Type | Description |
---|---|---|
plugin | ILoaderPlugin |
The plugin to add |
Type | Description |
---|---|
typeof PIXI.Loader |
Reference to PIXI.Loader for chaining |
destroy() → {void}
Destroy the loader, removes references.
Type | Description |
---|---|
void |
load(cb: Loader.OnCompleteSignal) → {this}
Starts loading the queued resources.
Name | Type | Attributes | Description |
---|---|---|---|
cb | Loader.OnCompleteSignal |
<optional> |
Optional callback that will be bound to the |
Type | Description |
---|---|
this |
The loader itself. |
pre(fn: ILoaderMiddleware) → {this}
Sets up a middleware function that will run before the resource is loaded.
Name | Type | Description |
---|---|---|
fn | ILoaderMiddleware |
The middleware function to register. |
Type | Description |
---|---|
this |
The loader itself. |
reset() → {this}
Resets the queue of the loader to prepare for a new load.
Type | Description |
---|---|
this |
The loader itself. |
use(fn: ILoaderMiddleware) → {this}
Sets up a middleware function that will run after the resource is loaded.
Name | Type | Description |
---|---|---|
fn | ILoaderMiddleware |
The middleware function to register. |
Type | Description |
---|---|
this |
The loader itself. |