How to create interactive buttons or how to change sprite.frame.name?

[BdR]

I've just started Phaser 3 development and I noticed there are no buttons, which I found a little odd. Buttons are a very important part of the interactivity of a game. In Phaser 2 I used them all the time for creating menus, select a level, restart level, quit game etc. But ok I understand that you can use a sprite and add .setInteractive() so it will act like a button.

The button should change color when on mouse-over and another color when it is pressed down. I'm using a sprite atlas with the different frames for the button faces, and I've tried using the pointerover and pointerout and pointerdown events to change the frame.name of the sprite but this doesn't seem to work.

	preload: function ()
	{
		this.load.multiatlas('sprites', 'img/sprite_demo.json', 'img');
	},

	create: function ()
	{
		// back Button
		this.btnback = this.add.sprite(400, 480, 'sprites', 'btn_back').setInteractive();
		this.btnback.on('pointerover', function (ptr, x, y) { this.frame.name = 'btn_back_hl'} );
		this.btnback.on('pointerout', function (ptr)        { this.frame.name = 'btn_back'} );
		this.btnback.on('pointerdown', function(event){
			this.frame.name = 'btn_back_down';
			this.scene.start('mainmenu');
		});
	},

Changing this.frame.name doesn't seem to do anything, it stays the same frame as when the sprite was created, no interactivity. So how can I make buttons work in Phaser 3?

[rich]

this.setFrame('frameName');

 

[BdR]

Thanks, that works. I was able to create a button similar to how it works in Phaser v2  Btw will the `Button` be added to Phaser3 in some shape or form at a later time?

[rich]

Probably as part of a UI set, yes.