Pixijs Events
Implement pointer, touch, wheel, and drag interactions on PixiJS v8 display objects with correct eventMode and propagation.
Overview
pixijs-events is an agent skill for the Build phase that teaches PixiJS v8 federated pointer, touch, wheel, and drag event handling.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-eventsWhat is this skill?
- Documents eventMode values: none, passive, auto, static, dynamic
- FederatedEvent types with propagation, capture phase, and stopPropagation
- Drag pattern using globalpointermove while pointer is down
- hitArea, interactiveChildren, cursor, and cursorStyles configuration
- eventFeatures config for tuning federated input behavior
- Covers 5 eventMode values: none, passive, auto, static, dynamic
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your PixiJS canvas clicks miss sprites, drags break off-target, or children steal input because eventMode and propagation are misconfigured.
Who is it for?
Indie game or interactive canvas devs on PixiJS v8 implementing buttons, draggable pieces, or scroll-like wheel handlers.
Skip if: Non-Pixi renderers, PixiJS v7-only codebases, or projects that only need HTML DOM events without the scene graph.
When should I use this skill?
eventMode, FederatedPointerEvent, pointerdown, click, tap, globalpointermove, drag, hitArea, cursor, stopPropagation in PixiJS v8.
What do I get? / Deliverables
You ship predictable tap, drag, and wheel behavior with static/dynamic modes, global moves, and hit areas that match your game UI.
- Correct event handlers for tap, drag, and wheel
- Configured hit areas and cursor behavior
Recommended Skills
Journey fit
How it compares
Canvas federated events skill—not a general DOM React event guide or input abstraction library.
Common Questions / FAQ
Who is pixijs-events for?
Solo builders using PixiJS v8 for games or rich canvas apps who need correct pointer and touch handling on containers and sprites.
When should I use pixijs-events?
During build frontend work when adding clicks, taps, drags, wheels, cursors, or debugging hit testing on the Pixi stage.
Is pixijs-events safe to install?
It is documentation-style guidance; check this page’s Security Audits panel before adding any third-party skill repo to your agent.
SKILL.md
READMESKILL.md - Pixijs Events
PixiJS's federated event system mirrors DOM events on the scene graph. Set `container.eventMode = 'static'` to opt an object in, then listen with `.on()`, `addEventListener()`, or `onEventName` property handlers. Move events fire only over the listening object; use `globalpointermove` for drag. ## Quick Start ```ts const button = new Sprite(await Assets.load("button.png")); button.eventMode = "static"; button.cursor = "pointer"; app.stage.addChild(button); button.on("pointertap", (event) => { console.log("clicked at", event.global.x, event.global.y); }); let dragging = false; button.on("pointerdown", () => { dragging = true; }); button.on("pointerup", () => { dragging = false; }); button.on("pointerupoutside", () => { dragging = false; }); button.on("globalpointermove", (event) => { if (dragging) button.parent.toLocal(event.global, undefined, button.position); }); ``` **Related skills:** `pixijs-accessibility` (screen reader + keyboard), `pixijs-scene-dom-container` (HTML overlays), `pixijs-performance` (event-heavy scenes). ## Core Patterns ### eventMode values ```ts import { Sprite } from "pixi.js"; const sprite = new Sprite(); // No interaction at all; children also ignored sprite.eventMode = "none"; // Default. Self not interactive; interactive children still work sprite.eventMode = "passive"; // Hit tested only when a parent is interactive sprite.eventMode = "auto"; // Standard interaction: receives pointer/mouse/touch events sprite.eventMode = "static"; // Like static, but also fires synthetic events from the ticker // when the pointer is stationary (for animated objects under cursor) sprite.eventMode = "dynamic"; ``` Use `'static'` for buttons, UI elements, and drag targets. Use `'dynamic'` only for objects that move under a stationary cursor and need continuous hover updates. Use `isInteractive()` to check whether an object can receive events: ```ts sprite.eventMode = "static"; sprite.isInteractive(); // true sprite.eventMode = "passive"; sprite.isInteractive(); // false ``` ### Event types Pointer events (recommended for cross-device compatibility): `pointerdown`, `pointerup`, `pointerupoutside`, `pointermove`, `pointerover`, `pointerout`, `pointerenter`, `pointerleave`, `pointertap`, `pointercancel`. Mouse events: `mousedown`, `mouseup`, `mouseupoutside`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `click`, `rightdown`, `rightup`, `rightupoutside`, `rightclick`, `wheel`. Touch events: `touchstart`, `touchend`, `touchendoutside`, `touchmove`, `touchcancel`, `tap`. Each touch carries `altKey`, `ctrlKey`, `metaKey`, and `shiftKey` copied from the native `TouchEvent`, so modifier keys work the same as with mouse or pointer events. Global move events: `globalpointermove`, `globalmousemove`, `globaltouchmove`. These fire on every pointer movement regardless of whether the pointer is over the listening object. Container lifecycle events (no `eventMode` required): `added`, `removed`, `destroyed`, `childAdded`, `childRemoved`, `visibleChanged`. ### Listening styles ```ts import { Sprite } from "pixi.js"; const sprite = new Sprite(); sprite.eventMode = "static"; // EventEmitter style (recommended) const handler = (e) => console.log("clicked"); sprite.on("pointerdown", handler); sprite.once("pointerdown", handler); // one-time sprite.off("pointerdown", handler); // DOM style sprite.addEventListener( "click", (event) => { console.log("Clicked!", event.detail); }, { once: true }, );