如何渲染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）。