Skip to content

Usage

The Application component will create your PixiJS app and canvas for you.

All Vue3 Pixi elements should be children of Application.

Sprites

Sprite component requires a texture, which can be a Texture object or a path to an image.

PixiJS will load the texture in the background and show it when it’s ready - similar to how an img tag works.

Loader

If you have a bunch of images or other resources, you may wish to show a loading screen until all images have finished loading (rather than have them pop in one after another).

Note: You may want to enable network throttling in your browser dev tools to actually see the loading screen - these are small images!

You can have multiple Loader components as well, which could be useful if you wanted to render a fallbacks at a component-level instead.

Ticker

update loop for the application. The Application component will create one automatically, which means child components can hook into the loop with onTick.

Filter

To use filters, you need to add the filter as a child element to the element where you want to apply the filtering effect.

Render Events

all elements support render event, which allows for flexible manipulation of elements, For example, using on <grahpics /> and <particle-container />

This will set up a watchEffect internally that will automatically call the event handler again if any dependencies on the render method have changed.

Accessing PixiJS Instances

You can bind PixiJS instances through ref, It is like the HTML elements, so you can bind to it if you need to access it.

Using a Custom Instance

You can add custom PIXI instances to the renderer, if you have a custom class (whether that be your own or from a third-party library).

ts
// main.js
import { Text } from 'pixi.js'
import { pathProp as defPathProp, renderer } from 'vue3-pixi'

class YellowText extends Text {
  constructor(text, style) {
    super(text, style)
    this.style.fill = 'yellow'
  }
}

renderer.use({
  name: 'YellowText',
  createElement: props => new YellowText(props.text, props.style),
  pathProp(el, key, prevValue, nextValue) {
    // handle special prop here..

    // or fallback to default
    return defPathProp(el, key, prevValue, nextValue)
  },
})
// main.js
import { Text } from 'pixi.js'
import { pathProp as defPathProp, renderer } from 'vue3-pixi'

class YellowText extends Text {
  constructor(text, style) {
    super(text, style)
    this.style.fill = 'yellow'
  }
}

renderer.use({
  name: 'YellowText',
  createElement: props => new YellowText(props.text, props.style),
  pathProp(el, key, prevValue, nextValue) {
    // handle special prop here..

    // or fallback to default
    return defPathProp(el, key, prevValue, nextValue)
  },
})