Прежде всего, я использую Phaser 3. Я хочу создать кнопку из таблицы спрайтов. Когда мышь наводит на кнопку, я хочу, чтобы второй кадр появлялся и исчезал, когда мышь уходит.

this.load.spritesheet('button', 'static/img/button.png', {frameWidth: 191, frameHeight: 71})

(Это просто изображение с 2 кадрами)

Я застрял, потому что я не могу найти документацию по кнопкам Phaser 3, потому что, очевидно, они не существуют. Это все о событиях на изображениях или тексте. Так каков здесь подход?

2
Francisco Ribeiro 11 Апр 2019 в 20:02

2 ответа

Лучший ответ

Вы захотите создать кнопку как спрайт, например так:

this.add.sprite(100, 100, 'button').setFrame([frame name/number]).setInteractive();

Это создает интерактивный GameObject с вашей кнопкой в качестве изображения. Имя / номер фрейма будет первым изображением в вашей таблице спрайтов. Он начинает считать кадры с 0, поэтому вы, вероятно, сначала выберете 0.

Затем вы захотите использовать событие мыши, например этот пример для изменения фрейма при наведении.

Что-то вроде этого:

// When hovering
this.input.on('pointerover', function(e, button) {
  button.setFrame(1);
});

// When moves away
this.input.on('pointerout', function(e, button) {
  button.setFrame(0);
});
2
brae 12 Апр 2019 в 13:17

Я поместил пример игры Phaser3 на github, который добавляет прототип Button в Scene, и кнопка работает аналогично Phaser v2

// add a button to a scene
// similar to buttons in Phaser v2
Phaser.Scene.prototype.addButton = function(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)
{
        // add a button
        var btn = this.add.sprite(x, y, key, outFrame).setInteractive();
        btn.on('pointerover', function (ptr, x, y) { this.setFrame(overFrame) } );
        btn.on('pointerout',  function (ptr)       { this.setFrame(outFrame) } );
        btn.on('pointerdown', function (ptr)       { this.setScale(0.9, 0.9) } );
        btn.on('pointerup', callback.bind(callbackContext));

        return btn;
};

// load sprite sheet
this.load.atlas('sprites', 'img/mysprites.png', 'img/mysprites.json');

// then use it like this
this.btnback = this.addButton(100, 100, 'sprites', this.myBtnCallBack, this, 'btn_back_hl', 'btn_back', 'btn_back_hl', 'btn_back');
0
BdR 13 Апр 2019 в 11:46