Come eseguire il rendering di una barra di avanzamento circolare/radiale in Libgdx?

Question

Per un gioco sviluppato con libgdx, è necessario mostrare all'utente il tempo rimanente per effettuare una mossa. Come possiamo eseguire il rendering di una barra di avanzamento circolare che mostra i secondi rimanenti?

Nella seguente risposta c'è una soluzione javascript: Circular/radial progress bar

Grazie.

Answer 1

Prima creare una trama (regione) con la barra di avanzamento circolare completa. Quindi deformare una forma (mesh) composta da uno o più triangoli per adattarla all'area effettiva che dovrebbe essere mostrata.

Per questo, pensare a una linea dal centro dell'immagine ai limiti dell'immagine. Calcola il punto di intersezione (e "muro", cioè a sinistra, a destra, in alto o in basso nell'immagine) della linea all'angolo indicato. Questo ti darà la porzione della trama (regione) che deve essere disegnata.

Ad esempio, se la linea a riposo (angolo è pari a zero) attraversa la parete di fondo dell'immagine al centro, l'immagine è quadrata e si desidera ruotare in senso orario, quindi tutto tra 45 e 135 gradi colpisce la parete sinistra , tra 135 e 225 gradi colpisce la parete superiore e così via.

Ora che hai la forma, dovrai esprimerla a triangolo. O per mantenere la compatibilità con lo spritebatch di libgdx, un numero pari di triangoli. Assicurati di aggiornare i valori U e V in base alla posizione del vertice.

Una semplice implementazione di questo può essere trovato qui: https://github.com/xoppa/world/blob/master/src/com/xoppa/android/misc/RadialSprite.java

Answer 2

È possibile usare uno Shader OpenGL per generare una barra di avanzamento circolare. Ecco un timer animato che sarebbe un buon punto di partenza: http://glsl.heroku.com/e#10201.0

Tuttavia, non penso ci sia alcuna buona infrastruttura Libgdx per il rilascio di shader come questo. Dovresti utilizzare le API OpenGL (vedi https://code.google.com/p/libgdx/wiki/OpenGLShader).