Animazione contachilometri utilizzando Pixi.js

Question

Alcuni giorni fa ho iniziato a sviluppare un contachilometri animato scritto in HTML e javascript, che intendo utilizzare su un gioco rpg che sto sviluppando. Inoltre, ho utilizzato Pixi.js per aiutarmi nelle animazioni. Le 2 immagini seguenti sono i componenti principali del programma:

contachilometri

fila di numeri:

Ed ecco una stampa di quello che ho realizzato finora:

Fondamentalmente, i primi due pulsanti aggiornano istantaneamente (senza animazione) i numeri sull'immagine del contachilometri, in base ai valori effettivi di HP e PP contenuti nelle caselle di testo HP e PP effettive. Se viene premuto il tasto "Imposta nuovi valori", verrà calcolata la differenza tra i valori attuali e quelli nuovi, convertita in pixel e quindi eseguite le modifiche necessarie sull'odometro. Tutte le modifiche sono eseguite da un metodo controller(). All'interno di questo metodo, c'è un ciclo while che si interromperà quando entrambi i valori di differenza di HP e PP sono pari a zero.

Sono riuscito a programmare correttamente il metodo controller(), in modo che tutti i numeri del contachilometri vengano aggiornati come previsto. Tuttavia, attualmente sto affrontando alcune difficoltà nell'implementazione delle animazioni. Dal momento che ho usato Pixi.js, ho aggiunto il seguente metodo per il codice HTML per creare i movimenti delle animazioni:

function update() { 
    renderer.render(container); 

    window.requestAnimationFrame(update); 
} 
window.requestAnimationFrame(update); //called after the method definition 

Il contenitore è definito come mostrato di seguito (Sono anche utilizzando un PIXI. extras.TilingSprite.call() all'interno della classe costruzione di due contachilometri e HPPP):

function init() { 
    container = new PIXI.Container(); 
    renderer = PIXI.autoDetectRenderer(224, 219, {view:document.getElementById("odometer-canvas")}); 
    odometer = new Odometer(); 
    container.addChild(odometer); 
    hph = new HPPP(96, 85, 0, 0); //HP - Hundred digit (left) 
    container.addChild(hph); 
    hpt = new HPPP(128, 85, 0, 0);//HP - Ten digit (middle) 
    container.addChild(hpt); 
    hpu = new HPPP(160, 85, 0, 0); //HP - Unit digit (right) 
    container.addChild(hpu); 
    pph = new HPPP(96, 140, 0, 0);//PP - Hundred digit (left) 
    container.addChild(pph); 
    ppt = new HPPP(128, 140, 0, 0); //PP - Ten digit (middle) 
    container.addChild(ppt); 
    ppu = new HPPP(160, 140, 0, 0); //PP - Unit digit (right) 
    container.addChild(ppu); 
    } 

Fino ad ora, ho sperimentato 2 scenari: il primo (dove onClick=controller(), per il pulsante 'Set Nuovo valore'), se il codice viene eseguito senza modifiche, il programma verrà eseguito e i numeri dell'odometro si aggiorneranno all'istante, il che significa che ci sarà e nessuna animazione.

Tuttavia, se si aggiunge il metodo controller() all'inizio del metodo update(), i numeri animeranno molto rapidamente, ma i limiti definiti dai valori di differenza non verranno obbedire (il che significa che animerà indefinitamente da 000 a 999).

Sono ancora molto fresco su HTML e sullo sviluppo di javascript e non so nemmeno se Pixi.js sarebbe la scelta migliore per questo. In ogni caso, è possibile eseguire animazioni fluide e controllate per questo contachilometri?

Dal momento non ho postato molti dettagli dal mio codice, fornirò qui il codice sorgente del mio progetto (Nota: Può essere eseguita utilizzando node.js rapide): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar

Answer 1

Sono riuscito a trova la soluzione per questo problema qualche giorno fa. Fondamentalmente, stavo incasinando alcune variabili all'interno del metodo di controllo (i valori delle variabili erano gli stessi per ogni iterazione su windows.requestAnimationFrame (aggiornamento)) e stavo anche usando un ciclo while per i calcoli, che stava congelando la scheda della finestra .

In ogni caso, in seguito caricherò il mio codice sorgente con la soluzione corretta dopo averlo pulito e organizzato.