How to render a circular/radial progress bar in Libgdx?

Question

For a game we develop with libgdx, we need to show the user the remaining time for making a move. How can we render a circular progress bar which shows the remaining second

Answer 1

You could use an OpenGL shader to generate a circular progress bar. Here is an animated timer that would be a good place to start: http://glsl.heroku.com/e#10201.0

However, I don't think there is any good Libgdx infrastructure for dropping in shaders like this. You would have to use the OpenGL APIs (see https://code.google.com/p/libgdx/wiki/OpenGLShader).

Answer 2

First create a texture (region) with the full circular progress bar. Next deform a shape (mesh) made up of one or more triangles to fit the actual area which should be shown.

For this, think of a line from the center of the image to the bounds of the image. Calculate the intersection point (and "wall", i.e. left, right, top or bottom of the image) of the line at the given angle. This will give you the portion of the texture (region) that needs to be drawn.

For example, if the line at rest (angle is zero) crosses the bottom wall of the image at the middle, your image is square and you want to rotate clockwise, then everything between 45 and 135 degrees hits the left wall, between 135 and 225 degrees hits the top wall, and so on.

Now you have the shape, you'll need to express it in triangle. Or to maintain compatibility with libgdx's spritebatch, an even number of triangles. Make sure to update the U and V values according to the location of the vertex.

A simple implementation of this can be found over here: https://github.com/xoppa/world/blob/master/src/com/xoppa/android/misc/RadialSprite.java