Create PixiJS Extensions

As of PixiJS 6.5.0, we have introduced a new extensions API. This can be used for register plugins like Application, Loader or Renderer plugins. The idea is that each extension to PixiJS has a type (i.e., ExtensionType) to define where it goes.

Types of Extensions

Name	Description
Application	Application plugins
CanvasRendererPlugin	Plugins for CanvasRenderer
Loader	Plugins to use with Loader (will be deprecated in v7)
RendererPlugin	Plugins for Renderer
CacheParser	Parsers for Assets cache (i.e., @pixi/assets)
LoadParser	Parsers for Assets loader (i.e., @pixi/assets)
ResolveParser	Parsers for Assets resolvers. (i.e., @pixi/assets)

Custom Extension

Here's an example of simple Renderer plugin.

import { extensions, ExtensionType } from 'pixi.js';

class SayHiPlugin {
  static extension = {
    type: ExtensionType.RendererPlugin,
    name: 'sayHi',
  };
  speak() {
    console.log('Hi!');
  }
}

// Alternatively your plugin could be an object, such as with the @pixi/assets parsers
//  const SayHiPlugin = {
//   extension: {
//     type: ExtensionType.RendererPlugin,
//     name: 'sayHi',
//   },
//   speak() {
//     console.log('Hi!');
//   }
// }

// Make sure to "register" the extension!
extensions.add(SayHiPlugin);

Then when you create a new Renderer, the plugin will be automatically created.

const renderer = new Renderer();
renderer.plugins.sayHi.speak();

Run this code example.

Removing Extensions

The extensions API also allows for removing extensions. This is useful if you want to remove default plugins or behaviors.

import { extensions, AccessibilityManager } from 'pixi.js';


extensions.remove(AccessibilityManager);