Javascript 有没有办法更改精灵中选定像素的色调？

你好，亲爱的StackOverflow社区

这是我在网站上的第一个问题，所以我希望我能说清楚。另外，我是一个法国人，我为语言错误提前道歉

让我解释一下我的情况（我想说得更准确一些，所以会有点长）：

我目前正在我的大学实习。主题是这样的：我的老师制作了一个基于图像处理的2D严肃游戏，每个玩家（最多4个）必须更换动物每个部位的正确颜色。她使用VisualStudio的XNA框架来完成这项工作。 我的任务是使用Javascript技术，特别是Pixi.js，开发这个游戏的新版本

游戏的工作原理如下：应用程序的主容器分为4个区域，每个玩家一个；每个区域都使用一个精灵来设置背景，我从玩家选择的动物的灰度图像中创建了一个精灵。屏幕中央是一个调色板，由一组精灵表示。从这里，我可以拖放一种颜色到动物精灵，代表其身体一部分的区域会检测到颜色的下降。在这之前一切都很顺利，但这正是我遇到困难的地方

我只想更改与此区域对应的像素的色调。这些像素的位置记录在我从文本文件创建的数组中，这就是我可以检测哪个区域接收颜色的方式

我已经尝试使用Pixi中的图形对象重新绘制精灵上方的颜色，但速度非常慢。我还尝试使用过滤器，但因为我只想给一些像素上色，而不是给整个精灵上色，所以我需要（使用制服）将位置数组传递给我的WebGL着色器，使其验证每个像素是否是我要更改的像素的一部分。但是着色器需要我声明这个数组来指示它的大小。我不能这样做，因为每个区域都有不同数量的像素

我现在被封锁了，我不知道如何执行我想要的

有没有什么解决方案不意味着将我的图像分成几个精灵？我想这会管用的，但如果能有另一种方法，允许我避免这种情况，我将非常感激

---

提前谢谢，很抱歉，此消息太长

这取决于您对着色器的接受程度（因为我个人不喜欢，我不想碰它们：D）。但我想你可以这样做，你可以制作一个着色器，用其他颜色替换你选择的颜色，这样一个着色器有点像这样：（似乎不起作用，但我想你明白了）。就我个人而言，我可能会使用多个图像（正如你提到的）来进行操作，除非你真的需要优化加载时间。非常感谢你的快速回答！由于我对WebGL着色器的理解有问题，我将尝试第二种解决方案：对每个图像使用几个精灵。至少可以进行一些测试并看到结果！在第一次尝试后，我得到了多图像解决方案的答案。。。不幸的是，我的应用程序速度很慢，每个图像都有多个精灵。当我渲染由9个叠加精灵组成的单个图像时，我看到拖动对象的运动变得急促。首先，我想到了update（）方法，因为在其中调用了renderer.render（）方法，所有的屏幕都被重新绘制，大约每秒100次。但是调色板中的所有颜色也是精灵。似乎显示对象的数量与此问题无关。将继续我对WebGL着色器的尝试！我不在，有一段时间没看到这个，很抱歉反应太晚。我刚开始重新思考这个问题。如果只有4个层，每个层有一张动物图片，并且动物有10个不同的部分要着色，那么它仍然只能生成40个图像（加上调色板精灵）。它听起来不是很大，尤其是在使用webGL时。对我来说，如果没有特殊的着色器，它也应该可以工作，而且还有其他一些东西会减慢它的速度。我最终使用node opencv进行图像处理！由于我的案例非常具体，因此仅将Pixi用于此类工作不会非常有效。我直接修改节点服务器中的映像文件，然后使用socket.io将它们发送回客户端。我知道不是很传统，但重要的是它很有效！谢谢你的建议和观察，Hachi=）