Spanish, Mexican subtitles

← PS 03-12 Animación

Get Embed Code
7 Languages

Showing Revision 4 created 09/03/2013 by Irene Meneguzzi.

  1. Miremos la solución; es un poco complicada.
    Primero, en la...
  2. parte alta del archivo declaramos dos variables nuevas: frameRate y frame.
  3. FrameRate es la frecuencia con que nos gustaría
    llamar a la función "animate".
  4. "Frame" es una variable que utilizaremos
    para representar el marco (frame) actual...
  5. en el folioscopio.
    Como tenemos nuestra matriz de marcos disponible...
  6. el siguiente paso es crear un bucle que recorra
    los activos predefinidos, y cargue las imágenes...
  7. definidas en la matriz de marcos. Se sigue el mismo
    proceso de tres pasos ya mencionado:
  8. crear una nueva imagen, fijar su resultado de carga
    y establecer su origen.
  9. Una vez hecho esto, podemos llamar
    a la función "setInterval"...
  10. que llamará a la función "animate" en el frameRate
    que hemos proporcionado antes.
  11. La función "animate" contiene una lógica un poco complicada. Primero, tenemos...
  12. el contador de fotogramas que ya definimos.
    Lo usamos para definir qué imagen...
  13. de la matriz de marcos debemos dibujar en el escenario,
    y por supuesto, en la encantadora...
  14. posición de 192 por 192. Una vez que dibujamos
    el marco actual, tenemos que...
  15. incrementarlo, y ahí es donde este breve
    fragmento de matemáticas viene bien.
  16. Aumentamos el contador de fotogramas y luego
    lo modulamos por la longitud del marco.
  17. Ocurre aquí que, en caso de que el marco sea
    más largo que la longitud del marco...
  18. la función que lo modula hará que el bucle regrese a 0
    sin que debamos involucrar...
  19. el resto de declaraciones "if".
    Este es un útil segmento de matemáticas...
  20. que deberías incluir en tu código.
    Impresionarás al jefe.
  21. Si tienes el código correcto, deberías ver algo
    similar a esto corriendo por la pantalla.
  22. Si miras bien, verás que hay algo que
    no luce como esperábamos.
  23. Lo que logramos es que los fotogramas se dibujen
    unos sobre otros, creando una especie de...
  24. efecto de halo. Hay una razón para esto.
    Vale la pena señalar que el escenario...
  25. no se despeja en cada marco.
    En cambio, permite que los píxeles...
  26. se acumulen a medida que se avanza.
    Para deshacerse de este efecto fantasma...
  27. se agrega esta línea, que por conveniencia dejamos
    fuera de la función anterior...
  28. y que se llama "context.clearRect".
    Lo que hará es despejar...
  29. todos los píxeles a un valor predeterminado
    que nos permite volver a dibujar sobre ellos.
  30. Así, evitarás que las imágenes anteriores
    se dibujen unas sobre otras.
  31. El resultado es un agradable e ingenioso robot
    que corre por la pantalla, tal como esperábamos.
  32. El resultado con "clearRect" es este agradable
    robot caminante.