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

Question

对于我们使用libgdx开发的游戏，我们需要向用户显示进行移动的剩余时间。 我们如何渲染显示剩余秒数的循环进度条？

在以下答案中有一个javascript解决方案： Circular / radial progress bar

感谢。

Answer 1

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

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

例如，如果静止线（角度为零）穿过中间图像的底部，则图像为方形，您想要顺时针旋转，然后45到135度之间的所有部分都会撞到左侧墙，在135到225度之间击中顶壁，依此类推。

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

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

Answer 2

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

但是，我认为没有任何好的Libgdx基础设施可以放入这样的着色器。您必须使用OpenGL API（请参阅https://code.google.com/p/libgdx/wiki/OpenGLShader）。