<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
This Pen doesn't use any external CSS resources.