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!
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.