Как создать анимированную кнопку в Phaser 3? - PullRequest
Новая
       6

Как создать анимированную кнопку в Phaser 3?

0 голосов
/ 11 апреля 2019

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

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

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

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

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

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

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);
});
0 голосов
/ 13 апреля 2019

Я поместил пример игры 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');
...