如何以程序方式渲染不规则形状的保健棒？

传统的矩形或基于心脏的健康栏的问题已得到很好的理解，并且很容易解决。但是，像我在下面制作的样机那样，更“创意形状”的健康条的公认解决方案是什么？

这样做的明显方法是让“精灵”处于“中间”状态，因此第三个图像将是它自己的精灵，以及许多其他针对不同级别的健康的过渡。但是，这似乎非常微不足道，在健康状态之间建立平稳过渡所需的中间次数将很大。

我唯一能想到的想法是将“完全健康”子图覆盖在“空健康”子图和预先烘焙的像素坐标集上，以代表每个健康点，然后使它们像健康一样不透明或透明上升或下降。

我希望这个问题与语言和平台无关，但如果有帮助，可以随时以任何语言/库/框架提供具体示例。

有一种非常简单的方法可以使用着色器实现此目的，您需要三种*纹理：空的健康条，健康条纹理和蒙版，并在其一端具有一个极端（例如，最暗而不是黑色或最透明的alpha值），并且具有一个极端的健康分布梯度。在另一端。最好在图像上显示出来，我目前无法绘制仅线性的曲线渐变-但我敢肯定您的美术师不会有任何麻烦： 现在，在着色器中对纹理进行采样并为蒙版值设定阈值，并丢弃所有非像素比输入阈值亮（基于健康状况着色器输入百分比）。
你可以使用数学公式而不是纹理来进行遮罩，但是如果您这样做，您仍然会非常受限于可以使用所述公式创建的形状（简单的形状），而且找到一个形状并非易事。
* 查看评论

作为像素着色器以数学方式实现：

在CPU上，使用V2计算HealthDirection及其点积

在GPU上，为每个像素计算远离中心点的归一化方向。将每个点产品与HealthDirections进行比较，以选择是对“背景”进行着色还是对颜色进行着色。

如果“反转”此算法并从另一个方向进行工作，则可以将每个像素的方向“解压”回一个百分比，然后将它们与HealthPercent进行比较。计算每个像素的百分比后，在GPU上执行从红色到绿色的渐变变得微不足道。

首先将算法应用于四边形绘制一条线；输出rangeMin和rangeMax之间的颜色（可以烘焙）和clip（）或在其他位置输出透明颜色。接下来，使用Alpha在其上绘制（修改的）精灵。我用CAD追踪了您的条形图，对其进行了填充，然后“神奇地消失”了Paint中的纯色形状以将其删除。由于手工混合了AutoCAD和Paint，因此矿山看起来像废话。假设您将内部边缘混合为透明的，则您的外观会很完美。

白色边框是四边形的界限。它和红色的X仅供参考：

不需要与运行状况栏同时渲染“带孔的精灵”。在完成所有健康状况指示条之后，应立即实例化它们并绘制它们。由于该算法是独立存在于着色器中的，因此您还可以为其添加实例化，然后还可以通过一个实例化的绘制调用来绘制所有运行状况栏。在屏幕上绘制每个运行状况栏应进行2次DrawInstanced（...）调用，并且“抓狂”。