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

Handling Input (Keyboard and Mouse)

Next ►
►

Handling user input is a fundamental part of game development. In Phaser, you can easily capture and respond to keyboard and mouse events, allowing players to interact with your game world. This section will guide you through the basics of input handling, provide practical examples, and offer exercises to reinforce your understanding.

  1. Key Concepts

  • Input Devices: Phaser supports various input devices, including keyboard, mouse, touch, and gamepads. Here, we focus on keyboard and mouse.
  • Event Listeners: Phaser uses event listeners to detect and respond to user actions.
  • Polling vs. Events: You can check input states continuously (polling) or respond to specific events (event-driven).

  1. Keyboard Input

2.1. Listening for Keyboard Events

Phaser provides a simple way to listen for keyboard events using the this.input.keyboard object within a scene.

Example: Moving a Sprite with Arrow Keys

class MyGameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGameScene' });
  }

  preload() {
    this.load.image('player', 'assets/player.png');
  }

  create() {
    this.player = this.add.sprite(400, 300, 'player');
    // Create cursor keys (arrow keys)
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    // Move player based on arrow key input
    if (this.cursors.left.isDown) {
      this.player.x -= 2;
    } else if (this.cursors.right.isDown) {
      this.player.x += 2;
    }

    if (this.cursors.up.isDown) {
      this.player.y -= 2;
    } else if (this.cursors.down.isDown) {
      this.player.y += 2;
    }
  }
}

Explanation:

  • this.input.keyboard.createCursorKeys() creates an object with properties for each arrow key.
  • In the update() method, we check if a key is pressed (isDown) and move the sprite accordingly.

2.2. Listening for Specific Keys

You can listen for any key using this.input.keyboard.addKey().

this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

To check if the spacebar is pressed:

if (this.spaceKey.isDown) {
  // Perform action
}

  1. Mouse Input

3.1. Pointer Events

Phaser uses the term "pointer" to refer to mouse or touch input. You can listen for pointer events like pointerdown, pointerup, and pointermove.

Example: Moving a Sprite to Mouse Click

create() {
  this.player = this.add.sprite(400, 300, 'player');
  this.input.on('pointerdown', (pointer) => {
    this.player.x = pointer.x;
    this.player.y = pointer.y;
  });
}

Explanation:

  • this.input.on('pointerdown', callback) listens for mouse clicks (or screen taps).
  • The pointer object contains the coordinates of the click/tap.

3.2. Making Game Objects Interactive

You can make any game object respond to mouse events by calling .setInteractive().

create() {
  this.button = this.add.sprite(400, 500, 'button').setInteractive();
  this.button.on('pointerdown', () => {
    console.log('Button clicked!');
  });
}

  1. Comparison Table: Keyboard vs. Mouse Input

Feature Keyboard Input Mouse Input (Pointer)
Typical Use Movement, actions, shortcuts Clicking, dragging, aiming
Setup this.input.keyboard this.input
Event Example key.isDown, keydown-SPACE pointerdown, pointermove
Object Interaction Not direct .setInteractive() on game objects

  1. Practical Exercises

Exercise 1: Move a Sprite with WASD Keys

Task:
Modify the example to move a sprite using the W, A, S, and D keys instead of the arrow keys.

Solution:

create() {
  this.player = this.add.sprite(400, 300, 'player');
  this.wKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
  this.aKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
  this.sKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
  this.dKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
}

update() {
  if (this.aKey.isDown) {
    this.player.x -= 2;
  } else if (this.dKey.isDown) {
    this.player.x += 2;
  }

  if (this.wKey.isDown) {
    this.player.y -= 2;
  } else if (this.sKey.isDown) {
    this.player.y += 2;
  }
}

Common Mistake:
Forgetting to call addKey for each key or using the wrong key code.

Exercise 2: Make a Sprite Jump to Mouse Click

Task:
When the player clicks anywhere on the game canvas, move the sprite to that position.

Solution:

create() {
  this.player = this.add.sprite(400, 300, 'player');
  this.input.on('pointerdown', (pointer) => {
    this.player.x = pointer.x;
    this.player.y = pointer.y;
  });
}

Tip:
Remember that pointer.x and pointer.y give you the coordinates of the click relative to the game canvas.

  1. Summary

  • Phaser makes it easy to handle both keyboard and mouse input.
  • Use this.input.keyboard for keyboard events and this.input for mouse/pointer events.
  • You can poll key states or listen for specific events.
  • Game objects can be made interactive to respond to mouse clicks.
  • Practice combining input methods to create more engaging gameplay.

Next Steps:
In the next section, you'll learn how to work with sprites and animation, building on your input handling skills to create interactive and dynamic game elements.

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