PixiJS Interaction — Pointer Events and Event Handling
In this tutorial, you will learn about PixiJS Interaction. We cover key concepts, practical examples, and best practices to help you master this topic.
PixiJS interaction system provides pointer event handling for mouse and touch across all display objects with event propagation and custom hit areas.
What You'll Learn
By the end of this guide, you will handle pointerdown, pointerup, pointermove events, use event propagation with stopPropagation, set custom hit areas with shapes, manage multi-touch with pointer IDs, and build interactive UI components.
Event Types
sprite.on('pointerdown', onDown)
.on('pointerup', onUp)
.on('pointermove', onMove)
.on('pointerover', onOver)
.on('pointerout', onOut)
.on('click', onClick)
.on('tap', onTap);
Custom Hit Area
sprite.hitArea = new PIXI.Circle(50, 50, 40);
sprite.interactive = true;
// Only clicks within the circle register, even if sprite is rectangular
Event Propagation
container.on('pointerdown', function(event) {
console.log('Container clicked');
});
child.on('pointerdown', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Prevents container event
});
Multi-Touch
app.stage.eventMode = 'static';
app.stage.hitArea = app.screen;
var touches = {};
app.stage.on('pointerdown', function(event) {
touches[event.pointerId] = event.global.clone();
});
app.stage.on('pointermove', function(event) {
if (touches[event.pointerId]) {
touches[event.pointerId] = event.global.clone();
}
});
app.stage.on('pointerup', function(event) {
delete touches[event.pointerId];
});
Common Mistakes
1. Not Setting interactive
Display objects are not interactive by default. Set interactive = true.
2. Using Wrong Event Names
PixiJS uses 'pointerdown', not 'mousedown'. Use pointer events for cross-device support.
3. Hit Area Not Matching Visual
A rectangular sprite with a circular hit area will have odd click areas outside the circle.
4. Not Calling stopPropagation
Events bubble up to parent containers. Call stopPropagation to prevent parent handlers.
5. Forgetting eventMode
In PixiJS v7, set eventMode = 'static' or 'dynamic' on containers for event propagation.
Practice Questions
Q1: What property enables interaction on a sprite? A: sprite.interactive = true.
Q2: How do you make a circular hit area? A: Set sprite.hitArea = new PIXI.Circle(cx, cy, radius).
Q3: How do you prevent events from bubbling? A: Call event.stopPropagation() in the handler.
Q4: What is the difference between click and tap? A: click is mouse, tap is touch. Use pointerdown for both.
Q5: How do you track multiple touches? A: Use event.pointerId to identify and track each touch.
Challenge: Build a paint app where touching and dragging draws colored circles on the canvas. Use multi-touch to allow two fingers to draw simultaneously with different colors.
FAQ
Try It Yourself
Create interactive sprites with hover effects.
<!DOCTYPE html>
<html>
<head>
<title>PixiJS Interaction</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Interactive Sprites</h2>
<script>
var app = new PIXI.Application({ width: 400, height: 300, background: 0xf5f5f5 });
document.body.appendChild(app.view);
for (var i = 0; i < 5; i++) {
var g = new PIXI.Graphics();
g.beginFill(0x4ecdc4);
g.drawCircle(0, 0, 30);
g.endFill();
g.x = 60 + i * 80;
g.y = 150;
g.interactive = true;
g.cursor = 'pointer';
g.buttonMode = true;
g.on('pointerover', function() {
this.scale.set(1.3);
this.tint = 0xff6b35;
});
g.on('pointerout', function() {
this.scale.set(1);
this.tint = 0xffffff;
});
g.on('pointerdown', function() {
this.scale.set(0.8);
});
g.on('pointerup', function() {
this.scale.set(1.3);
console.log('Circle at', this.x, this.y, 'clicked');
});
app.stage.addChild(g);
}
</script>
</body>
</html>
What's Next
Use render textures.
Render Textures — Render textures for Caching. Bitmap Text — Bitmap text.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro