The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Interactive Objects and Events

Next ►
►

In this section, you’ll learn how to make your Phaser games interactive by responding to player actions such as clicks, touches, and other events. Interactivity is a core part of game development, allowing players to control objects, trigger actions, and engage with your game world.

  1. What Are Interactive Objects?

Interactive objects are game elements that can respond to user input, such as mouse clicks, pointer movement, or touch events. In Phaser, you can make almost any game object interactive, including sprites, images, text, and shapes.

Key Concepts

  • Input Events: Actions from the player, like clicking, tapping, or hovering.
  • Interactive Objects: Game objects that can detect and respond to input events.
  • Event Listeners: Functions that run when a specific event occurs.

  1. Making Objects Interactive

To make an object interactive in Phaser, you use the .setInteractive() method. This enables the object to listen for input events.

Example: Making a Sprite Clickable

// Add a sprite to the scene
let star = this.add.sprite(400, 300, 'star');

// Make the sprite interactive
star.setInteractive();

// Add a pointerdown event listener
star.on('pointerdown', function (pointer) {
    star.setTint(0xff0000); // Change color when clicked
});

Explanation:

  • this.add.sprite(400, 300, 'star'): Adds a sprite at position (400, 300) using the 'star' image.
  • .setInteractive(): Makes the sprite respond to input events.
  • .on('pointerdown', ...): Listens for a click or tap on the sprite and changes its color.

  1. Common Input Events in Phaser

Here’s a table of common input events you can use with interactive objects:

Event Name Triggered When... Example Use Case
pointerdown Mouse/touch is pressed down Button click
pointerup Mouse/touch is released Button release
pointerover Pointer moves over the object Highlight on hover
pointerout Pointer leaves the object Remove highlight
pointermove Pointer moves while over object Dragging

  1. Example: Creating an Interactive Button

Let’s create a simple button that changes appearance when hovered and clicked.

// Add a button image
let button = this.add.image(400, 300, 'button');

// Make it interactive
button.setInteractive();

// Change appearance on hover
button.on('pointerover', function () {
    button.setTint(0x44ff44); // Green tint
});

// Remove tint when not hovered
button.on('pointerout', function () {
    button.clearTint();
});

// Respond to click
button.on('pointerdown', function () {
    button.setTint(0xff4444); // Red tint
    // You can add more actions here, like starting a new scene
});

Explanation:

  • The button changes color when hovered and clicked, providing visual feedback to the player.

  1. Interactive Text Example

You can also make text objects interactive:

let playText = this.add.text(400, 400, 'Play', { fontSize: '32px', fill: '#fff' });
playText.setOrigin(0.5);
playText.setInteractive();

playText.on('pointerdown', () => {
    playText.setStyle({ fill: '#ff0' }); // Change color on click
    // Start the game or another action
});

  1. Passing Data with Events

You can pass data to event handlers using arrow functions or by binding context:

let score = 0;
let coin = this.add.sprite(200, 200, 'coin').setInteractive();

coin.on('pointerdown', () => {
    score += 10;
    coin.destroy(); // Remove coin after collection
});

  1. Exercise: Create an Interactive Collectible

Task:
Create a sprite that disappears and increases the score when clicked.

Starter Code:

let score = 0;
let scoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '20px', fill: '#fff' });

let gem = this.add.sprite(300, 200, 'gem').setInteractive();

// Your code here

Solution:

let score = 0;
let scoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '20px', fill: '#fff' });

let gem = this.add.sprite(300, 200, 'gem').setInteractive();

gem.on('pointerdown', () => {
    score += 50;
    scoreText.setText('Score: ' + score);
    gem.destroy();
});

Common Mistakes & Tips:

  • Forgetting .setInteractive(): The object won’t respond to input without this.
  • Not updating the score display: Remember to update the text after changing the score.
  • Destroying the object before updating: Always update the score before destroying the object.

  1. Summary

  • Interactive objects allow your game to respond to player input.
  • Use .setInteractive() to enable input on game objects.
  • Listen for events like pointerdown, pointerover, and pointerout to create engaging interactions.
  • You can make sprites, images, and text interactive.
  • Practice by creating objects that respond to clicks, change appearance, or trigger game actions.

Next Steps:
In the following module, you’ll learn how to create larger game worlds and control the camera, building on your knowledge of interactive objects to create more dynamic and engaging games.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved