Dar vida a tus personajes en Phaser

Aranzulla de Los Pobres

Agregar animaciones de juegos es fácil de hacer en Phaser. La animación da vida a los personajes de los videojuegos. Una forma de incorporar la animación a tu juego es animar los movimientos de tu personaje. Incluso puede darles una animación de estado inactivo que se ejecutará cuando el jugador no se mueva en absoluto. Esto le dará a tus personajes más personalidad.

Configuración del juego

Necesitará conocimientos básicos de Phaser para trabajar con animaciones. Si no está familiarizado con Phaser, comience con un tutorial básico del juego antes de continuar. Este tutorial se basará en esos fundamentos.

Para comenzar, cree un juego con un personaje móvil. En nuestro ejemplo, comenzaremos con un bloque que se mueve con las flechas. A continuación se muestra el código de inicio:

 var config = {
 type: Phaser.AUTO,
 backgroundColor: 0xCCFFFF ,
 width: 600,
 height: 600,
 physics: {
 default: 'arcade'
 },
 scene: {
 preload: preload,
 create: create,
 update: update
 }
 };

 var gamePiece;
 var keyInputs;
 var game = new Phaser.Game(config);

 function preload(){
 this.load.image('gamePiece', 'img/gamePiece.png');
 }

 function create(){
 gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
 keyInputs = this.input.keyboard.createCursorKeys();
 }

 function update(){
 if(keyInputs.left.isDown){
 gamePiece.x = gamePiece.x - 2;
 }
 if(keyInputs.right.isDown){
 gamePiece.x = gamePiece.x + 2;
 }
 if(keyInputs.up.isDown){
 gamePiece.y = gamePiece.y - 2;
 }
 if(keyInputs.down.isDown){
 gamePiece.y = gamePiece.y + 2;
 }
 }

Este código creará una pieza de juego que puede moverse alrededor de un fondo azul. Por simplicidad, el ejemplo solo usa un bloque naranja para el personaje del juego. Se parece a esto:

Crear una hoja de Sprite

El primer paso es crear la animación. Hay muchas formas de crear animaciones, pero eso va más allá de lo que podemos cubrir aquí. Para nuestros propósitos, es importante que guarde su animación como una hoja de sprites.

Relacionado: Las mejores herramientas de Pixel Art para crear ilustraciones Pixel Perfect

Una hoja de sprites es un archivo de imagen único que contiene un conjunto de cuadros de animación. Cada fotograma de la animación se coloca junto al siguiente. Cada cuadro debe tener el mismo tamaño. Los programas de animación cortarán la imagen en cuadros individuales según las dimensiones de un solo cuadro.

Las imágenes se almacenan en una matriz. Como todas las matrices, esto significa que la primera imagen está en la posición cero. Entonces, en el ejemplo anterior, la animación hacia abajo comienza en cero y termina en tres. La animación de la izquierda comienza a las cuatro y termina a las siete.

Agregar una hoja de Sprites a Phaser

Cargar una hoja de sprites es similar a cargar una imagen en Phaser. Sin embargo, su programa requerirá un poco más de información sobre el archivo de imagen. Anteriormente, cargamos nuestra imagen con este texto:

 this.load.image('gamePiece', 'img/gamePiece.png');

Las hojas de Sprite, sin embargo, necesitan algunos parámetros más. También tenemos que especificar las dimensiones de un marco. Entonces, para cargar una hoja de sprites, necesitamos ajustar el código de la siguiente manera:

 this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
 frameWidth: 60,
 frameHeight: 60
 });

El código es muy similar. La gran diferencia es que agregamos un tercer parámetro que especifica el ancho y alto de nuestros cuadros de animación. En este caso, los fotogramas son de 60 píxeles por 60 píxeles.

Este ejemplo usará una hoja de sprites simple. Hemos agregado una flecha e indicadores parpadeantes al sprite del juego. La flecha apuntará en la dirección en la que se mueve nuestro sprite mientras un indicador parpadea en esa dirección. Si el personaje no se mueve, la animación recorrerá todos los fotogramas.

Creando animaciones

Antes de que podamos animar a nuestro personaje, tenemos que crear la animación. Ya hemos subido la hoja de sprites, ahora tenemos que decir qué fotogramas están en una animación. Para crear una animación, agregue el siguiente código a la función de creación:

 this.anims.create({
 key: "up",
 frameRate: 2,
 frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
 repeat: -1
 });

Arriba está la animación de la dirección ascendente .

  • La palabra clave anims es la abreviatura de animaciones. Las versiones anteriores usaban las animaciones completas de palabras clave, pero la versión actual usa este atajo.
  • La clave es el nombre de la animación. Utilizará la tecla para llamar a la animación.
  • FrameRate controla cuántos fotogramas se muestran en un segundo. Este ejemplo solo tendrá dos cuadros por segundo.
  • La siguiente línea señala qué imagen y fotogramas se utilizan en la animación. La animación hacia arriba usa la imagen gamePiece y comienza en el cuadro 0 y termina en el cuadro 2.
  • Si desea que la animación se repita continuamente, establezca la repetición en -1. De lo contrario, puede ingresar cuántas veces debe repetirse la animación antes de detenerse.

Deberá crear una animación para cada dirección y el estado inactivo.

Relacionado: PowToon facilita la creación de videos animados y presentaciones de diapositivas

Cómo animar tu personaje

Es bastante fácil agregar una animación a un personaje. La parte complicada es la transición entre animaciones. Puede establecer una animación inicial en la función de creación.

 gamePiece = this.add.sprite(270, 450, 'gamePiece');
 gamePiece.anims.play("spin");

La primera línea crea el jugador. Es lo mismo que crear un sprite con una sola imagen como lo hicimos antes. La segunda línea hace que la animación gire . Spin es una animación inactiva que recorrerá todos los fotogramas del cero al once.

Ahora, cuando vuelva a cargar su juego, la animación inactiva comenzará a reproducirse. Pero, notarás que continúa jugando incluso después de que muevas tu personaje. Configurar las animaciones basadas en el movimiento es un poco más complicado.

La tentación es cambiar la animación cuando el jugador presiona el botón como lo hicimos nosotros para configurar el movimiento. El problema con este enfoque es que comprobamos si el jugador está presionando una tecla en la función de actualización. La función de actualización ejecuta cada fotograma. Si ponemos una animación allí, la animación reiniciará cada cuadro en el que el jugador presione la tecla.

Para resolver esto, necesitamos usar un método diferente. En lugar de comprobar si una clave está abajo , queremos saber si una clave es JustDown . JustDown solo es verdadero cuando se presiona la tecla por primera vez. Si se mantiene la llave, no es cierto. Si configuramos la animación con JustDown, la animación no restablecerá cada cuadro.

Deberá crear una variable para la entrada clave que desea monitorear en la función de creación:

 leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
 rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
 upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
 downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);

Luego, querrá verificar si la tecla está presionada en la función de actualización:

 if(Phaser.Input.Keyboard.JustDown(upKey)){
 gamePiece.anims.play("up");
 }

Ahora, el juego cambiará a la animación hacia arriba una vez que se presione la tecla hacia arriba. Deberá escribir una declaración if similar para cada tecla de dirección.

Todavía tenemos una última modificación por hacer. En este momento, cuando el jugador deja de presionar una tecla, la última animación continúa reproduciéndose. Queremos que vuelva a nuestra animación inactiva. Para hacer esto, usamos el método JustUp . Similar a JustDown , se activará cuando el jugador suelte una tecla.

 if(Phaser.Input.Keyboard.JustUp(upKey)){
 gamePiece.anims.play("spin");
 }

Una vez que el jugador deja de presionar la tecla arriba, la animación volverá a nuestra animación de giro inactivo. Deberá escribir una declaración similar para cada tecla de dirección.

Para ver el código final, vaya a pastebin .

Siguiente paso: crea tu propia animación

Crear animaciones en Phaser no es muy diferente de usar una imagen estática. ¡Pero llevará el desarrollo de su juego al siguiente nivel! Phaser facilita la adición de animaciones para que pueda concentrarse en la parte difícil: ¡hacer la animación!

Al crear su propia hoja de sprites, no olvide estos consejos:

  • Todos los fotogramas de la animación deben tener las mismas dimensiones
  • Los marcos se almacenarán en una matriz que comienza en cero
  • Las animaciones a menudo requieren disparadores diferentes a los disparadores que establecen el movimiento.