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 p5.js. Úsala en la
función draw de p5.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.
Este mini ejemplo carga una animación desde una hoja de sprites, que es una sola imagen que contiene todos los frames de una animación. Echa un vistazo a la hoja de sprites en este sketch que se muestra sólo para que puedas ver cómo es una.
En el modo de hoja de sprites, se puede utilizar un objeto atlas para especificar el tamaño de cada frame y cuántos frames de animación hay.
Si realmente necesitas usar una animación cuando tu programa comienza, deberías cargarla en la función preload de p5.js en lugar de en setup.
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.mirror 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!
Hojas de Sprites con Múltiples Animaciones
Para cargar múltiples animaciones desde la misma imagen de hoja de sprites, primero establece la
propiedad spriteSheet del sprite o grupo.
Luego, utiliza la función addAnimations / addAnis. Aceptan un objeto
que utiliza los nombres de las animaciones como claves y los atlas de la hoja de sprites como
valores.
Usar un objeto atlas es mucho más fácil que especificar manualmente las coordenadas de cada fotograma.
Los objetos atlas pueden tener las siguientes propiedades:
x, y, pos, w/width,
h/height, size/frameSize, row,
col, frames/frameCount,
delay/frameDelay y rotation.
En el ejemplo del "héroe", el tamaño del sprite del héroe se establece en 32x32 píxeles en el
constructor Sprite. Ese tamaño se utiliza como un multiplicador para el valor de la
fila proporcionado.
Haz clic en este enlace para ver la hoja de sprites completa questKid utilizada en el ejemplo.
Si deseas apreciar realmente lo bueno que es p5play, compara el código de mi ejemplo con esta demostración de Phaser. ¡Ja!
Recomiendo hacer que cada fotograma de una animación tenga el mismo tamaño y colocarlos en orden de izquierda a derecha. De lo contrario, tendrás que especificar manualmente la posición de cada fotograma, lo que se puede hacer utilizando una matriz de coordenadas en lugar de un objeto atlas.
anis
Cada sprite y grupo tiene un objeto animations / anis que almacena sus
animaciones. Las claves son nombres de animaciones y los valores son objetos de animación.
Funciona como lo hacen los grupos, utilizando una herencia suave y dinámica.
La propiedad ani.offset se utiliza para ajustar la posición de una animación en
relación con la posición del sprite.
Cuando sprite.pixelPerfect está configurado en true, el sprite se dibujará en
coordenadas enteras, manteniendo la posición precisa de su colisionador. ¡Esto es útil para
juegos de arte pixelado!
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.