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

Creating Buttons and Menus

Next ►
►

In this section, you’ll learn how to create interactive buttons and menus in Phaser, which are essential for building user interfaces (UI) such as main menus, pause screens, and in-game options. We’ll cover the basics of button creation, handling button events, and organizing menu layouts.

  1. Why Are Buttons and Menus Important?

  • User Navigation: Allow players to start, pause, or exit the game.
  • Game Options: Provide access to settings, instructions, or level selection.
  • Feedback: Give visual and audio feedback for user actions.

  1. Creating a Simple Button

Phaser provides several ways to create buttons. The most common approach is to use images or sprites and make them interactive.

Step-by-Step Example: Image Button

1. Load Button Image

First, preload the button image in your scene’s preload method:

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

2. Add and Make the Button Interactive

Add the button to the scene and enable interactivity:

create() {
  // Add the button image at position (400, 300)
  const playButton = this.add.image(400, 300, 'playButton');

  // Make the button interactive
  playButton.setInteractive();

  // Listen for pointer (mouse/touch) events
  playButton.on('pointerdown', () => {
    console.log('Play button clicked!');
    // Start the game or switch scenes here
  });
}

Explanation

  • setInteractive(): Makes the image respond to input events.
  • pointerdown: Event triggered when the button is pressed.

  1. Adding Visual Feedback

It’s good practice to provide feedback when a button is hovered or pressed.

Example: Button Hover and Click Effects

create() {
  const playButton = this.add.image(400, 300, 'playButton').setInteractive();

  playButton.on('pointerover', () => {
    playButton.setTint(0x44ff44); // Green tint on hover
  });

  playButton.on('pointerout', () => {
    playButton.clearTint(); // Remove tint when not hovered
  });

  playButton.on('pointerdown', () => {
    playButton.setScale(0.95); // Slightly shrink on click
  });

  playButton.on('pointerup', () => {
    playButton.setScale(1); // Restore size
    // Start the game or perform action
  });
}

  1. Creating Text Buttons

You can also use text as a button:

create() {
  const startText = this.add.text(400, 300, 'Start Game', {
    fontSize: '32px',
    color: '#ffffff',
    backgroundColor: '#0000ff',
    padding: { x: 20, y: 10 }
  }).setOrigin(0.5).setInteractive();

  startText.on('pointerdown', () => {
    console.log('Start Game clicked!');
  });
}

  1. Building a Simple Menu

Menus are usually groups of buttons or text options. You can organize them using containers or by positioning elements manually.

Example: Main Menu Scene

class MainMenu extends Phaser.Scene {
  preload() {
    this.load.image('playButton', 'assets/play_button.png');
    this.load.image('optionsButton', 'assets/options_button.png');
  }

  create() {
    // Play Button
    const playButton = this.add.image(400, 250, 'playButton').setInteractive();
    playButton.on('pointerdown', () => {
      this.scene.start('GameScene');
    });

    // Options Button
    const optionsButton = this.add.image(400, 350, 'optionsButton').setInteractive();
    optionsButton.on('pointerdown', () => {
      this.scene.start('OptionsScene');
    });

    // Title Text
    this.add.text(400, 150, 'My Phaser Game', {
      fontSize: '48px',
      color: '#fff'
    }).setOrigin(0.5);
  }
}

Explanation

  • Each button is positioned vertically.
  • Clicking a button switches to a different scene.

  1. Organizing Menus with Containers

Phaser’s Container allows you to group multiple elements and move or scale them together.

Example: Grouping Menu Items

create() {
  const playButton = this.add.text(0, 0, 'Play', { fontSize: '32px', color: '#fff' }).setInteractive();
  const optionsButton = this.add.text(0, 60, 'Options', { fontSize: '32px', color: '#fff' }).setInteractive();

  const menu = this.add.container(400, 250, [playButton, optionsButton]);

  playButton.on('pointerdown', () => { /* ... */ });
  optionsButton.on('pointerdown', () => { /* ... */ });
}

  1. Table: Button Creation Methods

Method Description Example Use Case
Image Button Uses an image as a button Main menu, icons
Text Button Uses text as a button Simple menus, labels
Sprite Button Uses a sprite with animations Animated buttons
Container Groups multiple UI elements Complex menus, popups

  1. Exercise: Create a Pause Menu

Task:
Create a pause menu with two buttons: "Resume" and "Quit". When "Resume" is clicked, the game resumes. When "Quit" is clicked, return to the main menu.

Solution

class PauseMenu extends Phaser.Scene {
  create() {
    // Resume Button
    const resumeButton = this.add.text(400, 250, 'Resume', {
      fontSize: '32px', color: '#fff', backgroundColor: '#008800', padding: { x: 20, y: 10 }
    }).setOrigin(0.5).setInteractive();

    resumeButton.on('pointerdown', () => {
      this.scene.stop(); // Stop pause menu
      this.scene.resume('GameScene'); // Resume game
    });

    // Quit Button
    const quitButton = this.add.text(400, 320, 'Quit', {
      fontSize: '32px', color: '#fff', backgroundColor: '#880000', padding: { x: 20, y: 10 }
    }).setOrigin(0.5).setInteractive();

    quitButton.on('pointerdown', () => {
      this.scene.stop('GameScene'); // Stop game scene
      this.scene.start('MainMenu'); // Go to main menu
    });

    // Menu Title
    this.add.text(400, 180, 'Paused', {
      fontSize: '40px', color: '#fff'
    }).setOrigin(0.5);
  }
}

Common Mistakes & Tips:

  • Forgetting setInteractive(): Without this, buttons won’t respond to clicks.
  • Incorrect Scene Names: Ensure you use the correct scene keys in start, stop, and resume.
  • Button Overlap: Position buttons with enough space to avoid accidental clicks.

  1. Summary

  • Buttons in Phaser can be created using images, text, or sprites, and made interactive with setInteractive().
  • Menus are collections of buttons and UI elements, often organized with containers or manual positioning.
  • Always provide visual feedback for button states (hover, click).
  • Use scene management to switch between menus and game states.

Next: You’ll learn how to display scores and create a HUD (Heads-Up Display) to show game information to the player.

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