Question

因此，我一直在Unity中工作，但我决定是时候更改为更了解的东西了：JavaScript。我一直在考虑切换到Phaser.js，但是对于我什至在Unity中遇到的问题，我仍然有一些疑问，并且目前在互联网上搜索时找不到任何解决方案。我没有要提供的代码，因为我还没有真正开始使用Phaser进行编程，所以我会尽量做到明确。

我的游戏想法基本上围绕着一些改变颜色的灯光。我为灯光准备的精灵看起来完全一样，只是颜色不同而又不是全部（只有一部分的颜色不同）。问题是我的游戏有许多不同颜色的灯光，并且它们之间必须改变。例如，如果一个灯是红色，然后单击它，则它变成绿色。创建和加载许多看起来几乎相同的精灵似乎是一种不好的做法，我想知道是否有一种方法可以通过代码来更改精灵或部分精灵的颜色。我知道，Phaser不支持svg，并且由于性能问题，游戏中的svg通常是一个坏主意，但这会为我节省很多时间，只需添加我使用的sprite的svg代码，然后更改填满我想要的部分。

所以，我的问题是：使用多个子画面的最佳替代方法（如果有）是什么？或者如何更改它们特定部分的颜色？

Answer 1

如果不需要移动灯光，那么您可以只保留几张图像并更改其src。另外，我相信您可以这样做，以便在单击精灵时将其更改为外观不同的动画。毕竟，这就是Spritesheet的重点，不是吗？

Answer 2

根据您的灯光精灵，另一种选择是使用Phaser的着色功能。

Phaser中的精灵和图像都可以着色，并且由于Phaser支持精灵分组，即使您只想更改图像的一部分，也可以轻松地使每个显示的对象包含两个精灵，其中一个是相同的用于所有灯（不变的部分），也共享但有色的另一种。

Phaser 3 example of tinting an image：

this.add.image(300, 300, 'pixel').setTint(0xff0000);

Phaser 3的setTint() documentation。

Phaser 2 CE example of tinting a sprite，以防您使用此版本：

sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'atlas', 'greenJellyfish0000');
sprite.tint = Math.random() * 0xffffff;

在移相器中使用几乎相同的子画面的良好做法。使用更多精灵的替代方法

2 个答案: