interaction's Introduction

Interaction

The interaction plugin for pixi.js.

Install

npm i @iro/interaction

Why Use It

Unified event type, Pointer event only.
Pointerout and Pointerupoutside have target value.

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)

interaction's People

Contributors

Stargazers

Watchers

interaction's Issues

Difference to the build-in interaction manager

I found your plugin via pixijs/pixijs#6509 (comment) and I am curious how it differs from the build-in interaction manager and what your plugin's purpose is.

I am asking because I am looking for an alternative way of handling interactions in PIXI. Unfortunately, their system completely breaks down as the number of display objects increases. So I am wondering if your plugin might be an alternative :)