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

Question

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

Answer 1

添加图片和按钮，并使用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 2

你可以用 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 3

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

以下面的例子为例，我使用了一个 Text 对象：

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

但是，第三行 与第一行 (#F2E675) 具有相同的淡黄色基色。当我申请.setTint(0xFF00FF) 时，它实际上是#F20075 - 更像是一种热门的fuscia。这是因为 base colour 不同，并且由于 tint multiplies，结果看起来不同。如果您的文本（或图像）是黑色的，那么 setTint() 将什么也不做，因为 - 就像数学一样 - 将一个数字乘以 #000000 仍然会得到 #000000。

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

请注意 setColor() 是 Text 的函数。如果您想为图像交换颜色，请使用上述setTint，或者（如果这不能为您提供所需的结果）生成单独的翻转图像并使用它。