在 XNA 中制作 2 种颜色之间的渐变

Question

我正在为 Monogame/XNA 制作一个 GUI 库，我决定不使用按钮的纹理，而是使用结构来保存渐变中的渐变和颜色信息。然后我可以将宽度和高度传递给结构，它会根据存储在其中的两种颜色计算渐变，并传回具有正确尺寸和应用渐变的纹理。

我想知道的是计算两种颜色渐变（具有透明度）的最有效方法。我已经看到了很多答案，包括着色器、HSL 转换以及将颜色应用于白色->黑色渐变。它们都不是非常详细或提供的代码示例。我认为最有效的方法是使用着色器绘制到渲染目标，但我几乎没有着色器方面的经验。而且由于它是一个库 (.dll)，我什至不知道如何加载着色器等内容并使用它们进行绘制。

这是我想要的效果： Image

此外，我正在尝试使其更具可定制性，以允许渐变的不同方向，即

public enum GradientStyle
{
    NONE = 0,
            RADIAL,
            HORIZONTAL,
            VERTICAL,
            BLEND
};

这绝不是必需的。我现在只想知道如何制作一个简单的渐变。

Answer 1

简单的线性渐变很简单：绘制一个四边形多边形，其中两个顶点设置为一种颜色，两个顶点设置为另一种颜色。 gouraud 着色将在两种颜色之间插入以创建渐变。

除此之外的任何事情都会变得更加复杂。 XNA 和更普遍的 DirectX 是为处理纹理和多边形而构建的 API。绘制高度可定制的渐变是一种更适合直接像素操作的操作。

这就是您听到使用着色器的建议的原因。像素着色器允许您直接设置绘制的每个像素的颜色，使其成为创建渐变的理想选择。您不一定需要渲染目标；您可以在渲染 GUI 图元之前通过SpriteBatch 设置自定义着色器并实时绘制渐变，这样就无需分配额外的显存。

如果您想了解如何在 XNA 中编写 HLSL 着色器，您可以查看来自 GameDev Stack Exchange 的this question。 Shawn Hargreaves 还拥有a short article 专门为与SpriteBatch 一起使用的编写着色器的基础知识。着色器文件只是 XNA 内容文件，包含在您的内容项目中；您可以使用 Content.Load<T>() 加载它们，就像任何其他内容文件一样。

一旦您掌握了 HLSL 着色器的基础知识，您就可以创建像素着色器来实现绘制常见渐变类型的算法，然后根据正在使用的 GUI 组件的设置在 SpriteBatch.Begin() 中应用不同的着色器绘制。

注意：以上内容适用于 Microsoft XNA 4.0。我相信 MonoGame 有一种将 HLSL 着色器转换为 GLSL 着色器以在 OpenGL 平台上使用的方法，但我没有这方面的经验。我建议先学习 MS XNA 的基础知识，因为这是您在网上找到的大多数教程都假定您正在使用的内容。