Question

我知道之前已经访问过此问题（例如here），但我想知道如何执行以下操作。在我的游戏中，我有一个滚动的背景。例如，蓝色的天空在底部是浅蓝色，并且越高越深。建议的解决方案无法实现这一点：

shapeRenderer.filledRect(x, y, width, height, 
                         lightBlue, lightBlue, darkBlue, darkBlue);

因为你只能提供真正显示的颜色。我想在顶部的深蓝色和底部的浅蓝色处有一个渐变色，例如500像素。这个，虽然我只画了200个像素。这样，当背景滚动时，颜色仍然会变暗。有人知道如何用libgdx做到这一点吗？

Answer 1

你想要的是在较大的（例如500像素）渐变上看到较小的（例如200像素）窗口。要做到这一点，你只需要根据窗口在整个渐变中的位置计算四个角落颜色的颜色，然后绘制它。（所以不要考虑绘制整个背景，而是考虑如何绘制出你需要的部分。）

由于您只是在两种颜色（介于0和500之间）之间平滑移动，因此您将根据窗口的位置在颜色之间进行“线性插值”（即直线估计）。 Libgdx通过lerp() methods on Color支持此功能。

假设窗口沿Y轴移动，这样的东西应该给你想要的东西：

Color baseColor = lightBlue;
Color topColor = darkBlue;

int skyHeight = 500;
int windowHeight = 200;
int windowLocation = ...; // something betweeen 0 and skyHeight - windowHeight;
Color windowBottomColor = baseColor.copy().lerp(topColor, windowLocation / skyHeight);
Color windowTopColor = baseColor.copy().lerp(topColor, (windowLocation + windowHeight) / skyHeight);

现在windowBottomColor和windowTopColor应该适合调用filledRect：

shapeRenderer.filledRect(x, y, width, height, 
                         windowBottomColor, windowBottomColor, windowTopColor, windowTopColor);

请注意，“copy（）”调用会为每次调用创建一个新的Color对象，因此您可能希望对其进行优化以避免分配。

免责声明：我没有尝试过这段代码，所以它可能有一些愚蠢的错误，但希望它能给你正确的想法。

在libgdx中绘制渐变的子集

1 个答案: