Libgdx中绘制矩形/精灵时颜色渐变不一致

Question

我正在尝试使用SpriteBatcher绘制具有颜色渐变的精灵，手动设置顶点颜色以实现一些基本的照明效果，而不需要着色器。但是我注意到了一个奇怪的问题，在只有一个顶点颜色不同的情况下，渐变会产生奇怪的效果。

这取决于顶点的位置。如果不同的颜色在左下角或右上角，就没有问题，但在另外两种情况下，会出现奇怪的渐变效果。

为了更好地解释情况，这里有一张图片。

我用以下代码生成了上排正方形：

shapeRenderer.begin(ShapeType.Filled);
Color c1 = new Color(1,1,1,1);
Color c2 = new Color(1,0,0,1);
shapeRenderer.rect(100f, 100f, 30f, 30f, c2, c1, c1, c1);
shapeRenderer.rect(150f, 100f, 30f, 30f, c1, c2, c1, c1);
shapeRenderer.rect(200f, 100f, 30f, 30f, c1, c1, c2, c1);
shapeRenderer.rect(250f, 100f, 30f, 30f, c1, c1, c1, c2);
shapeRenderer.end();

这段代码是使用ShapeRenderer生成的，但如果我使用SpriteBatch，也会得到相同的结果。我想这与绘制矩形的内部方式有关（基于2个三角形），但是否有任何方法可以在所有情况下实现相同的结果？（如图像的第三行）类似于不同的GL绘制模式或其他什么东西...?

- danikaze

---

你可以使用专门的着色器来获得类似第三张图片的效果，但我能想到的唯一方法会导致从角落开始的径向渐变，而不是像你画的那样线性渐变。如果你想要染色的是左上角或右下角，为什么不直接将精灵旋转90度呢？ - Tenfour04

我已经考虑过旋转，但我认为这是不可能的，因为它不是一个图像，而是其顶点的颜色... 因此，“旋转”顶点的颜色只会改变颜色的值，而不是它们被绘制的方式。（即将上面两个图像顺时针旋转90度不会得到下面两个图像，而是得到上面第三个图像） - danikaze

我不是指旋转颜色，而是将整个精灵旋转90度，并适当选择角落。例如，如果您想要底部-1图像，则将精灵逆时针旋转90度并设置右上顶点的颜色。 - Tenfour04

我明白了...这可能吗？ 无论如何，我认为我做不到，因为我没有使用Sprites，而是使用TextureRegions和vertices来绘制它们...所以这就是为什么我考虑它们的顶点位置的原因。 - danikaze

哦，终于我在代码中尝试了一下，它成功了！如果您想将其发布为答案，我会接受它，但如果您不介意，我希望对其他人进行更详细的解释。基本上我所做的是，如果我按照以下顺序绘制顶点：V1 V2 V3 V4，但与其他颜色不同的是V1，则我按照以下顺序绘制它们：V4 V1 V2 V3，并将不同的颜色分配给V4。 - danikaze

你可以继续编写答案。我还没有花时间仔细研究改变顶点顺序的细节。 - Tenfour04

Answer 1

好的，问题在于绘制取决于三角形的顺序。如果渐变从三角形的一个顶点通过其角平分线进行，那就没有问题，但是如果颜色渐变沿着其边缘进行，结果就像上面的第1个和第3个正方形。

我认为这是由于矩形的绘制方式如下所示：

1-2
| |
4-3

实际上是由两个三角形绘制而成。

1-2       1
 \|  and  |\
  3       4-3

因此，如果不同的颜色在顶点1或3中，则产生的渐变效果会很奇怪。

在这种情况下，我们可以改变顶点的绘制顺序（不是其坐标），使其绘制如下：

2-3      2-3       3
| |  =>  |/   +   /|
1-4      1       1-4

正如我们在这里看到的那样，它完全可以正常工作：

- danikaze