根据我们想要的 Phaser 3 更改按钮颜色

Question

我正在学习制作一个按钮，当我们将鼠标悬停在一个可点击的图像上时更改按钮的颜色。例如，当我们将光标指向彩色图像之一（红色、蓝色、黄色）时，然后当我们单击我们喜欢的彩色图像时，例如单击黄色，然后按钮变为黄色，在指向它的移相器中是否有我的示例，使用移相器 3

Answer 1

你可以用 vanilla JS 做到这一点，看看这个例子：https://codepen.io/lessadiogo/pen/yLyvxQQ

HTML:

<div class="img" data-color="yellow" onclick="changeBtnColor('yellow')"></div>
<div class="img" data-color="green" onclick="changeBtnColor('green')"></div>
<button>I got changed!</button>

CSS:

.img {
  width: 100px;
  height: 100px;
  float: left;
}
.img[data-color=yellow] {
  background-color: yellow;
}
.img[data-color=green] {
  background-color: green;
  margin-left: 15px;
}

button {
  margin: 15px;
  padding: 10px;
  font-size: 14px;
}

span {
  padding-top: 40px;
  clear: both;
  display: block;
  font-size: 12px
}

Javascript:

function changeBtnColor(color) {
  document.querySelector('button').style.background = color
}

希望对您有所帮助。

Answer 2

添加图片和按钮，并使用setTint()更改按钮颜色。（或setTintFill()。）

var image1 = this.add.image(....);
var image2 = this.add.image(....);
...
image1.setInteractive().on('pointerdown', function() {myButton.setTint(0xff0000)});
image2.setInteractive().on('pointerdown', function() {myButton.setTint(0x0000ff)});

在你的例子中有趣的是你想使用图像作为按钮，而按钮作为图像...

Answer 3

有效，但它有几个注意事项。 setTint 是一个乘法函数：它采用游戏对象（在本例中为图像）的像素颜色，然后 将其乘以 给定颜色。如果你的基本图像是纯白色的，那么它会很好用，你没有问题。但是，如果您的图像（或文本，或您使用的任何东西）是不同的颜色，那么它将无法按预期工作。

以下面的示例为例，我在其中使用了文本对象：

第一行文本的底色为 #F2E675。第二行文本的基色为 #FFFFFF（纯白色），但应用了 .setTint(0xFF00FF)。而且效果很好！

然而，第三行 与第一行 (#F2E675) 具有相同的浅黄色基色。当我应用 .setTint(0xFF00FF) 时，它实际上显示为 #F20075 - 更像是一种热紫红色。这是因为 base colour 不同，并且由于 tint multiplies，结果看起来不同。如果您的文本（或图像）是黑色的，那么 setTint() 将不会执行任何操作，因为 - 就像数学一样 - 将数字乘以 #000000 仍然会得到 #000000.

如果您像我一样使用文本，您可以改用 setColor()。下图与上图相同 - 淡黄色、纯白色和淡黄色的 3 行文本，但这次在白色和黄色文本上都使用了 .setColor('#FF00FF')。如您所见，在这两种情况下，文本实际上都显示为 #FF00FF.

注意 setColor()是Text的函数。如果您想为图像交换颜色，请使用上面的 setTint，或者（如果这没有给您想要的结果）生成一个单独的翻转图像并使用它。

根据我们想要的 Phaser 3 更改按钮颜色

change the button color according to what we want with phaser 3

javascript

typescript

phaser-framework