javascript - Odómetro de animación con Pixi.js

jquery html

Question

Hace algunos días comencé a desarrollar un odómetro animado escrito en HTML y JavaScript, que tengo la intención de utilizar en un juego de rol que estoy desarrollando. Además, he estado usando Pixi.js para ayudarme con las animaciones. Las 2 imágenes siguientes son los componentes principales del programa:

cuentakilómetros

fila de números:

Y aquí hay una copia de lo que he logrado hasta ahora:

Básicamente, los primeros dos botones actualizan instantáneamente (sin animación) los números en la imagen del odómetro, basados ​​en los valores reales de HP y PP contenidos en los cuadros de texto reales de HP y PP. Si se presiona ''Establecer nuevos valores'', se calculará la diferencia entre los valores reales y nuevos, se convertirá a píxeles y luego se realizarán los cambios necesarios en el cuentakilómetros. Todos los cambios se realizan mediante un método de controller() . Dentro de este método, hay un ciclo while que se romperá cuando los valores de diferencia de HP y PP sean cero.

Logré programar el método controller() correctamente, así que todos los números en el odómetro se actualizan como se esperaba. Sin embargo, actualmente tengo algunas dificultades para implementar las animaciones. Desde que uso Pixi.js , agregué el siguiente método al código HTML para crear los movimientos de las animaciones:

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

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

El contenedor se define como se muestra a continuación (también estoy usando un PIXI.extras.TilingSprite.call () dentro de la clase de construcción de Odometer y 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);
  }

Hasta ahora, he experimentado 2 escenarios: el primero (donde onClick=controller() , para el botón ''Establecer nuevo valor''), si el código se ejecuta sin modificaciones, el programa se ejecutará y los números del odómetro se actualizarán al instante, lo que significa que no habrá animación.

Sin embargo, si se agrega el método controller() al comienzo del método update() , los números se animarán muy rápidamente, pero los límites definidos por los valores de diferencia no se obedecerán (lo que significa que se animará indefinidamente de 000 a 999).

Todavía estoy muy fresco en el desarrollo de HTML y JavaScript, y ni siquiera sé si Pixi.js sería la mejor opción para esto. De todos modos, ¿es posible realizar animaciones suaves y controladas para este odómetro?

Como no publiqué muchos detalles de mi código, proporcionaré aquí el código fuente de mi proyecto (Nota: puede ejecutarse utilizando el indicador node.js): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer .rar

Answer 1

He logrado encontrar la solución para este problema hace algunos días. Básicamente, estaba estropeando algunas variables dentro del método de control (los valores de las variables eran los mismos para cada iteración en windows.requestAnimationFrame (actualización)) y también estaba usando un ciclo while para los cálculos, que estaba congelando la pestaña de la ventana .

De todos modos, después cargaré mi código fuente con la solución corregida después de limpiarlo y organizarlo.