Pixi.js: Extending Pixi loader?

Created on 15 Oct 2019  ·  3Comments  ·  Source: pixijs/pixi.js

Is there any way to extend Pixi loader or write custom loader? I want to add SVGZ support which basically means I need to deflate gzipped loaded content to a proper SVG before Pixi would process it.

Most helpful comment

PixiJS v5 introduced registerPlugin to the Loader:
http://pixijs.download/dev/docs/PIXI.Loader.html#.registerPlugin

This allows you to create your own middleware to handle custom media types. Here's a rough example of how you might do this:

const SVGZLoaderPlugin = {
  add() {
    // handle loading SVGZ files as an ArrayBuffer
    PIXI.LoaderResource.setExtensionXhrType(
      'svgz', LoaderResource.XHR_RESPONSE_TYPE.BUFFER);
    PIXI.LoaderResource.setExtensionLoadType(
      'svgz', LoaderResource.LOAD_TYPE.XHR);
  },
  use(resource, next) {
    // deflate SVGZ
    next();
  }
};
PIXI.Loader.registerPlugin(SVGZLoaderPlugin);

You can also refer to https://github.com/englercj/resource-loader for more information about how the Loader works.

Good luck!

All 3 comments

PixiJS v5 introduced registerPlugin to the Loader:
http://pixijs.download/dev/docs/PIXI.Loader.html#.registerPlugin

This allows you to create your own middleware to handle custom media types. Here's a rough example of how you might do this:

const SVGZLoaderPlugin = {
  add() {
    // handle loading SVGZ files as an ArrayBuffer
    PIXI.LoaderResource.setExtensionXhrType(
      'svgz', LoaderResource.XHR_RESPONSE_TYPE.BUFFER);
    PIXI.LoaderResource.setExtensionLoadType(
      'svgz', LoaderResource.LOAD_TYPE.XHR);
  },
  use(resource, next) {
    // deflate SVGZ
    next();
  }
};
PIXI.Loader.registerPlugin(SVGZLoaderPlugin);

You can also refer to https://github.com/englercj/resource-loader for more information about how the Loader works.

Good luck!

Thank you, Matt! So far upgrading from v4 to v5 causes problems with the loader - it writes "PIXI.loaders.Loader class has moved to PIXI.Loader" deprecation warning and shows black rectangle on the screen until all the images are loaded.

Is there any transition guide or examples how to rewrite old Pixi loader to use the new one?

We have a v5 migration guide here: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

There isn't something specific for Loader. That deprecation warning just lets you know that the namespace changed, but it should still work. If there's something more subtle going on, if you could a new issue with an example of what you're seeing with black rectangles, perhaps we can provide a more graceful experience.

I'm going to close this issue because it seems like the plugin question was resolved.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Darker picture Darker  ·  3Comments

courtneyvigo picture courtneyvigo  ·  3Comments

Vardner picture Vardner  ·  3Comments

MRVDH picture MRVDH  ·  3Comments

distinctdan picture distinctdan  ·  3Comments