Quark Star Games

Free Online Games

Prev Chapter – Chapter 6: Working with Text and Fonts in Pixi.js

Interactivity is a key component of engaging games and applications. In this chapter, we’ll explore how to handle user input and interaction in Pixi.js, allowing players to control and interact with your creations.

Understanding User Input Events

User input events are actions performed by the player, such as clicking the mouse, tapping the screen, or pressing keys on the keyboard. Pixi.js provides event listeners to capture and respond to these events.

Mouse and Touch Events

Pixi.js offers a set of mouse and touch events, including:

  • mousedown: Triggered when the mouse button is pressed.
  • mouseup: Triggered when the mouse button is released.
  • mousemove: Triggered when the mouse is moved.
  • click: Triggered when a mouse click occurs.
  • touchstart: Triggered when a touch begins.
  • touchend: Triggered when a touch ends.
  • touchmove: Triggered when a touch moves.
  • tap: Triggered when a tap (touch click) occurs.

You can listen for these events on your Pixi.js objects to create interactive experiences.

Keyboard Events

Keyboard events are used for handling input from the keyboard. Pixi.js provides the following keyboard events:

  • keydown: Triggered when a key is pressed down.
  • keyup: Triggered when a key is released.
  • keypress: Triggered when a key is pressed and released.

These events allow you to capture and respond to player keyboard input.

Adding Event Listeners

To listen for user input events, you’ll add event listeners to your Pixi.js objects or the application’s stage. Here’s an example of adding a click event listener to a sprite:

const sprite = new PIXI.Sprite(texture);

// Add a click event listener to the sprite
sprite.on('click', () => {
    console.log('Sprite clicked!');
});

app.stage.addChild(sprite);

In this code, we create a sprite and add a click event listener that logs a message when the sprite is clicked.

Interactive Objects

By default, Pixi.js objects are not interactive, meaning they won’t respond to user input events. To make an object interactive, set its interactive property to true and then add event listeners:

const button = new PIXI.Sprite(buttonTexture);

// Make the button interactive
button.interactive = true;

// Add a click event listener to the button
button.on('click', () => {
    console.log('Button clicked!');
});

app.stage.addChild(button);

In this example, we create an interactive button by setting button.interactive to true. This allows us to add a click event listener to it.

Drag and Drop

Pixi.js makes it easy to implement drag-and-drop functionality for objects. You can use the dragstart, dragmove, and dragend events to handle the entire drag-and-drop process.

Here’s an example of making a sprite draggable:

const draggableSprite = new PIXI.Sprite(texture);

// Make the sprite interactive
draggableSprite.interactive = true;
draggableSprite.buttonMode = true; // Show cursor as a pointer

// Enable dragging
draggableSprite
    .on('mousedown', onDragStart)
    .on('touchstart', onDragStart)
    .on('mouseup', onDragEnd)
    .on('mouseupoutside', onDragEnd)
    .on('touchend', onDragEnd)
    .on('touchendoutside', onDragEnd)
    .on('mousemove', onDragMove)
    .on('touchmove', onDragMove);

function onDragStart(event) {
    // Store the initial pointer position
    this.data = event.data;
    this.dragging = true;
}

function onDragEnd() {
    this.data = null;
    this.dragging = false;
}

function onDragMove() {
    if (this.dragging) {
        const newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x;
        this.y = newPosition.y;
    }
}

app.stage.addChild(draggableSprite);

In this code:

  • We create a draggable sprite by setting draggableSprite.interactive to true.
  • We enable the drag-and-drop functionality by adding event listeners for mouse and touch events.
  • The onDragStart, onDragEnd, and onDragMove functions handle the drag-and-drop behavior.
  • The sprite’s position is updated based on the pointer’s position when dragging.

Multi-Touch and Gesture Support

Pixi.js also supports multi-touch and gesture events for more complex interactions on touch devices. You can listen for events like pinch, rotate, and tap, allowing you to create touch-friendly and responsive applications.

Conclusion

In this chapter, you’ve learned how to handle user input and interaction in Pixi.js. Understanding and utilizing user input events, adding event listeners to objects, and implementing features like drag-and-drop are essential for creating engaging and interactive games and applications.

With the power of user input, you can build dynamic and responsive experiences that captivate and entertain your audience. In the next chapter, we’ll explore audio integration in Pixi.js, adding another layer of immersion to your creations.

Next: Chapter 8: Audio Integration in Pixi.js