Spanish, Mexican subtitles

← PS 04-07 Analizando el Output de Texturepacker

Get Embed Code
5 Languages

Showing Revision 4 created 09/04/2013 by Pam Ina.

  1. Nuestra solución para analizar
    la definición del atlas es muy directa.
  2. Primero, se nos han dado
    los datos de atlasJSON
  3. que han sido cargados
    desde una solicitud xhr.
  4. El primer paso que necesitamos dar
    es avanzar y usar JSON.parse para eso.
  5. Esto convertirá los datos de texto JSON
    en un objeto de JavaScript
  6. con miembros y valores
    para volver a iterar.
  7. Usamos esto para afectar esto de aquí.
  8. El objeto analizado
    tiene un diccionario de frames
  9. con el que iteraremos
    para cargar nuestros sprites.
  10. Queremos extraer cada una de las claves
    dentro de nuestro diccionario.
  11. Y entonces, extraer el sprite
    que viene asociado a él.
  12. Así, ahora tenemos el nombre del sprite y
    efectivamente los valores del sprite.
  13. El próximo paso que daremos
    será definir el centro de la imagen.
  14. En efecto, multiplicamos
    el ancho y el alto por 0.5,
  15. lo que nos da la mitad del ancho
    y la mitad del largo.
  16. Ahora, almacenamos el valor en el cx
    y el cy como un compensador negativo.
  17. La razón de esto es que usaremos
    los valores cx y cy un poco más adelante,
  18. durante la renderización, para transformar
    nuestro objeto en el espacio mismo.
  19. Guardamos éstos como negativos aquí
  20. así no tendremos que hacer cálculos
    al diseńar la imagen después.
  21. Una vez que obtenemos estos datos,
    avanzamos y usamos la función defSprite,
  22. traspasando el nombre
    de la imagen como clave.
  23. Y luego, el frame.x, frame.y
  24. con los datos de altura y centro
    que ya visualizaste anteriormente.