<div id="phaser-example"</div>
html,
body {
  background-color:#d4d4d4;
  margin:0px;
  paddign:0px;
}
class Button extends Phaser.GameObjects.Sprite {
  onInputOver = () => {}
  onInputOut = () => {}
  onInputUp = () => {}

  constructor(scene, x, y, texture, actionOnClick = () => {}, overFrame, outFrame, downFrame) {
    super(scene, x, y, texture)
    scene.add.existing(this)

    this.setFrame(outFrame)
      .setInteractive()

      .on('pointerover', () => {
        this.onInputOver()
        this.setFrame(overFrame)
      })
      .on('pointerdown', () => {
        actionOnClick()
        this.setFrame(downFrame)
      })
      .on('pointerup', () => {
        this.onInputUp()
        this.setFrame(overFrame)
      })
      .on('pointerout', () => {
        this.onInputOut()
        this.setFrame(outFrame)
      })
  }
}


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

  preload() {
    this.load.setCORS('anonymous')
    this.load.spritesheet('button', 'https://examples.phaser.io/assets/buttons/button_sprite_sheet.png', { frameWidth: 193, frameHeight: 71 })
    this.load.atlas('buttonAtlas', 'https://examples.phaser.io/assets/buttons/button_texture_atlas.png', 'https://examples.phaser.io/assets/buttons/button_texture_atlas.json')
  }

  create() {
    const actionOnClick = () => {
      console.log('click')
    }

    let btn1 = new Button(this, 50, 50, 'button', actionOnClick, 2, 1, 0)
    btn1.onInputOut = () => {
      console.log('Btn1: onInputOut')
    }
    btn1.setOrigin(0)

    let btn2 = new Button(this, 50, 150, 'buttonAtlas', actionOnClick, 'over', 'out', 'down')
    btn2.onInputOut = () => {
      console.log('Btn2: onInputOut')
    }
    btn2.setOrigin(0)
  }
}

var config = {
    type: Phaser.AUTO,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      width: 400,
      height: 300
    },
    backgroundColor: '#ffffff',
    parent: 'phaser-example',
    scene: [MainScene]
};

var game = new Phaser.Game(config);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/phaser/3.16.2/phaser.min.js