如何在 Phaser 3 中创建动画按钮？

Question

首先，我使用的是 Phaser 3。我想用 spritesheet 创建一个按钮。当鼠标悬停按钮时，我希望第二帧出现并在鼠标离开时消失。

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

（这只是一张2帧的图片）

我被卡住了，因为我找不到任何关于移相器 3 按钮的文档，因为它们显然不存在。这都是关于图像或文本上的事件。那么这里的方法是什么？

Answer 1

您需要像这样将按钮创建为 sprite：

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

这将创建一个以您的按钮为图像的交互式游戏对象。帧 name/number 将作为您的 spritesheet 中的第一张图像开始。它从 0 开始计算帧数，因此您可能会先使用 0。

然后您需要使用 this example 之类的鼠标事件来更改悬停时的框架。

像这样：

// 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);
});

Answer 2

我在 github 上放置了一个 Phaser3 example game，它向 Scene 添加了一个 Button 原型，按钮的工作方式类似于 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');

如何在 Phaser 3 中创建动画按钮？

How to create a animated button in Phaser 3?

phaser-framework