C贸mo cargar animaciones
Una animaci贸n es una serie de im谩genes que se muestran una despu茅s de la otra a una velocidad suficiente para dar la apariencia de movimiento.
La funci贸n loadAni tiene tres modos diferentes: secuencia, lista y hoja de sprites.
En este mini ejemplo, la animaci贸n de la nube respirando se carga utilizando una secuencia numerada de im谩genes dada la ruta a la primera imagen y el 铆ndice de la 煤ltima imagen en la secuencia.
La funci贸n animation es similar a la funci贸n image de q5.js. 脷sala en la
funci贸n draw de q5.js para mostrar una animaci贸n en una posici贸n.
En este mini ejemplo, la funci贸n loadAnimation recibe una lista de im谩genes.
La propiedad ani.frameDelay define cu谩ntos frames se muestra una imagen en la animaci贸n
antes de que se muestre la siguiente imagen. El valor predeterminado es 4. Los valores m谩s altos
hacen que la animaci贸n se reproduzca m谩s lentamente. Un retraso de frame de 1 har铆a que la animaci贸n
se reproduzca lo m谩s r谩pido posible.
隆Pru茅balo! Intenta cambiar el frameDelay en este mini-ejemplo.
Una hoja de sprites es una sola imagen que contiene todos los fotogramas de una animaci贸n.
ani.spriteSheet se muestra en el boceto para que puedas ver c贸mo es.
En el modo de hoja de sprites, loadAni acepta un "atlas" objeto JS que especifica el
tama帽o de cada fotograma y cu谩ntos fotogramas de animaci贸n hay.
Esta forma sencilla de cargar animaciones requiere que cada fotograma en tu hoja de sprites sea del mismo tama帽o, est茅 alineado en una cuadr铆cula y en orden de izquierda a derecha, de arriba a abajo.
Si deseas que una animaci贸n solo use fotogramas espec铆ficos de la hoja de sprites, establece la propiedad "frames" del objeto atlas a un arreglo de 铆ndices de fotogramas.
Otra forma de usar loadAni en modo de hoja de sprites es proporcionar un arreglo de
localizadores de fotogramas, arreglos que especifican la posici贸n y tama帽o de un fotograma.
Al crear hojas de sprites, considera la compensaci贸n entre la eficiencia del espacio de imagen obtenida al empaquetar estrechamente fotogramas de tama帽os irregulares, versus la facilidad de cargar una hoja de sprites alineada en cuadr铆cula.
Ten en cuenta que las animaciones en estos ejemplos se est谩n cargando de forma diferida en
setup. Si realmente necesitas usar una animaci贸n cuando tu programa comienza, c谩rgala
en la funci贸n preload de q5.js en su lugar.
Animando
p5play te da control total sobre tus animaciones.
隆Intenta usar tu teclado para probar algunas de las diferentes formas de controlar las animaciones!
Sprites con Animaciones
La funci贸n sprite.addAni puede agregar una animaci贸n a un sprite. Tambi茅n puede cargar la animaci贸n, al igual que loadAni. Como un primer par谩metro de entrada opcional, puedes proporcionar un nombre para la animaci贸n.
Intenta presionar el bot贸n izquierdo del rat贸n. Cuando la propiedad sprite.debug
est谩 configurada como verdadera, puedes ver el colisionador del cuerpo f铆sico del sprite.
Control de la Animaci贸n de un Sprite
Utiliza la funci贸n sprite.changeAni para cambiar la animaci贸n de un sprite. Esta
funci贸n acepta un objeto de animaci贸n o el nombre de una animaci贸n cargada previamente.
sprite.ani almacena la animaci贸n actual del sprite, lo que permite acceder a sus
propiedades y funciones como play y stop.
El vector sprite.scale se puede usar para voltear el sprite horizontal o
verticalmente.
Prueba presionando izquierda y derecha para hacer que el fantasma se mueva.
Prueba presionando la barra espaciadora para detener la animaci贸n.
Grupos con Animaciones
Si se agrega una animaci贸n a un grupo, los nuevos sprites del grupo recibir谩n una copia de esa animaci贸n.
Ten en cuenta que en este mini-ejemplo, si colocas las manchas demasiado cerca, se separar谩n hasta que sus colisionadores ya no se superpongan. El tama帽o del colisionador se toma del tama帽o de la animaci贸n.
隆Prueba hacer clic con el rat贸n para agregar nuevas manchas!
Hoja de Sprites de Animaciones
Para cargar m煤ltiples animaciones usa la funci贸n addAnis, que acepta dos par谩metros
de entrada:
- una imagen de hoja de sprites o url de imagen
- un objeto que usa nombres de animaci贸n como claves y objetos atlas como valores.
En el ejemplo del "h茅roe", el tama帽o del sprite del h茅roe se establece en 32x32 p铆xeles en el
constructor Sprite. El tama帽o se usa como un multiplicador para los valores de fila
y columna en los objetos atlas de la hoja de sprites.
Haz clic en este enlace para ver la hoja de sprites completa de questKid usada en el ejemplo.
Anis
Cada sprite y grupo tiene un objeto anis que almacena sus animaciones. Las claves
son nombres de animaci贸n y los valores son objetos de animaci贸n. Funciona como los grupos,
utilizando herencia suave y din谩mica.
Establecer anis.offset cambia el desplazamiento de todas las animaciones del sprite
en este ejemplo.
La propiedad ani.offset se usa para ajustar la posici贸n de una animaci贸n en relaci贸n
con la posici贸n del sprite.
Hoja de Im谩genes de Sprite
Algunas hojas de sprite contienen una colecci贸n de im谩genes (subtexturas) empaquetadas en un solo archivo. Esto permite que se carguen con una sola solicitud de red, reduciendo el tiempo de carga y mejorando el rendimiento.
Echa un vistazo a la hoja de sprites de tr谩fico del Paquete de Veh铆culos Pixelados de Kenny.
En p5play, cada subtextura se puede cargar como una animaci贸n de un solo fotograma.
Atlas de Texturas XML
Un atlas de texturas describe el tama帽o y la posici贸n de cada subtextura dentro de una hoja de sprites compacta. Por ejemplo, consulta el atlas de texturas de tr谩fico.
Usa parseTextureAtlas para analizar un atlas de texturas XML y convertirlo en un
objeto que se puede usar con addAnis.
Cortar Fotogramas
Cuando se dibujan secciones de una hoja de sprites de pixel art (baja resoluci贸n) en el lienzo, pueden aparecer artefactos en los bordes.
En este ejemplo, observa c贸mo los bordes contienen partes de otros veh铆culos.
Configura anis.cutFrames en true antes de cargar animaciones para que p5play corte
la imagen de la hoja de sprites en im谩genes separadas
Secuenciaci贸n de Animaciones
sprite.changeAni puede aceptar un objeto de animaci贸n, un nombre de animaci贸n o una
matriz de nombres de animaci贸n que se reproducir谩n en secuencia.
De manera predeterminada, si la repetici贸n est谩 habilitada, la 煤ltima animaci贸n de la secuencia se
repetir谩. Para repetir toda la secuencia, utiliza '**' como el 煤ltimo nombre de
animaci贸n. Si, en cambio, deseas que la secuencia se detenga al final, utiliza ';;'
como el 煤ltimo nombre de animaci贸n.
隆Este ejemplo muestra c贸mo el personaje h茅roe puede moverse por la pantalla usando las teclas WASD o las teclas de flecha!
Secuenciaci贸n de Animaciones Avanzada
sprite.changeAni es una funci贸n as铆ncrona, puedes usarla para esperar a que las
animaciones terminen de reproducirse. Es particularmente 煤til para secuencias de animaci贸n
programadas para NPCs.
En este ejemplo, el personaje h茅roe est谩 practicando sus habilidades con la espada.