Interaction

Install

npm i @iro/interaction

Why Use It

Usage

// webpack.config.js
plugins: [
 new webpack.ProvidePlugin({
 PIXI: 'pixi.js'
 })
]

import Interaction from '@iro/interaction'
// pixi.js@5
PIXI.Renderer.registerPlugin('interaction', Interaction)
// pixi.js@6
// remove default interaction extensions
for (const x in PIXI.extensions._queue) {
 for (const ext of PIXI.extensions._queue[x]) {
 if (ext.name === 'interaction') {
 PIXI.extensions.remove(ext)
 }
 }
}
// add @iro/interaction
PIXI.extensions.add(
 {
 name: 'interaction',
 ref: Interaction,
 type: [PIXI.ExtensionType.RendererPlugin, PIXI.ExtensionType.CanvasRendererPlugin]
 }
)
renderer.plugins.interaction.on('pointerdown', ev => {})
sprite.on('pointerup', ev => {})
/**
 * - tap
 * - pointerup
 * - pointerout
 * - pointermove
 * - pointerdown
 * - pointerenter
 * - pointerupoutside
*/

Support pointer-events like CSS

interface Sprite extends PIXI.Sprite {
 pointerEvents?: 'auto' | 'none'
}
const a: Sprite = new PIXI.Sprite(texture)
a.pointerEvents = 'none'
const b: Sprite = new PIXI.Sprite(texture)
b.interactive = true
b.on('pointerdown', console.log) // output
stage.addChild(b, a)