如何在Libgdx中渲染一个圆形/径向进度条？

Question

为了我们使用libgdx开发的游戏，我们需要展示用户执行操作的剩余时间。我们该如何渲染一个圆形进度条来显示剩余秒数呢？

以下回答提供了JavaScript解决方案： Circular / radial progress bar 谢谢。

- ilkinulas

Answer 1

首先创建一个纹理（区域），其中包含完整的圆形进度条。接下来，变形由一个或多个三角形组成的形状（网格），以适应实际要显示的区域。

为此，考虑从图像中心到图像边界的一条线。计算给定角度处线条与图像的交点（和“墙壁”，即图像的左侧、右侧、顶部或底部）。这将为您提供需要绘制的纹理（区域）部分。

例如，如果静止的线（角度为零）在图像底部交叉于中间，您的图像是正方形，并且您想顺时针旋转，则45度至135度之间的所有内容都会命中左侧墙壁，135度至225度之间的所有内容都会命中顶部墙壁，依此类推。

现在，您拥有了形状，需要将其表达为三角形。或者为了保持与libgdx的spritebatch的兼容性，使用偶数个三角形。请确保根据顶点的位置更新U和V值。

这里可以找到一个简单的实现：https://github.com/xoppa/world/blob/master/src/com/xoppa/android/misc/RadialSprite.java

- Xoppa

---

非常感谢您。我刚刚更新了您的代码并创建了一个gist。希望您不介意：https://gist.github.com/chandujr/5d79f3603efadb566d0a8f7edb5ba0ad - Neerkoli

Answer 2

你可以使用OpenGL着色器来生成一个圆形进度条。这里有一个动画计时器，是一个很好的起点：http://glsl.heroku.com/e#10201.0

然而，我认为没有任何良好的Libgdx基础设施可以像这样放置着色器。你必须使用OpenGL API（请参见https://code.google.com/p/libgdx/wiki/OpenGLShader）。

- P.T.