phaser-framework - 如何在 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();

这将创建一个交互式游戏对象，其中您的按钮作为图像。帧名称/编号将从 Sprite 表中的第一个图像开始。它从 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);
});