@svgaplus/renderer.pixi

SVGAPlus PixiRenderer

You are able to use PIXI.js to render SVGA graphics.

Just doing a few steps and you are gonna be on 🔥!

This version is for PIXI.JS v7. If you want to use v5, please install 1.x.

Setup

1. Install PIXI.js v7 to your project:

npm install pixi.js --save

2. Install PixiRenderer:

npm install @svgaplus/renderer.pixi --save

3. Rock and roll:

import { SVGAPlus } from '@svgaplus/core'
import { PixiRenderer } from '@svgaplus/renderer.pixi' 

const player = new SVGAPlus({
  ...
  renderer: PixiRenderer
})

Done! Now you have everything from PIXI.js!

Customize your PIXI Renderer

You can access all pixi stuffs from here:

const player = new SVGAPlus({
  ...
  renderer: PixiRenderer
})

player.renderer  // Pixi is so 🔥! 

And you might want to know:

player.renderer.pixiApp        // Pixi Application.
player.renderer.pixiContainer  // Everything has been put in this container.

For an example, this is the way to use pixi filters:

import { SVGAPlus } from '@svgaplus/core'
import { PixiRenderer } from '@svgaplus/renderer.pixi' 
import * as Filters from 'pixi-filters'

const player = new SVGAPlus({
  ...
  renderer: PixiRenderer
})

await player.init()

// Set your favourite filters.
// Just doing this after calling "init()".
player.renderer.pixiContainer.filters = [
  new Filters.RGBSplitFilter()
]

Check out PIXI.js for more information.