Introducción a Phaser para el desarrollo de juegos

Phaser es un marco para la creación de videojuegos en 2D. Utiliza HTML5 Canvas para mostrar el juego y JavaScript para ejecutarlo. El beneficio de usar Phaser sobre JavaScript vanilla es que tiene una biblioteca extensa que completa gran parte de la física de los videojuegos, lo que te permite concentrarte en diseñar el juego en sí.

Phaser reduce el tiempo de desarrollo y facilita el flujo de trabajo. Aprendamos a crear un juego básico con Phaser.

¿Por qué desarrollar con Phaser?

Phaser es similar a otros lenguajes de programación visual en que el programa se basa en actualizaciones en bucle. Phaser tiene tres etapas principales: precarga, creación y actualización.

En la precarga, los activos del juego se cargan y se ponen a disposición del juego.

Crear inicializa el juego y todos los elementos iniciales del juego. Cada una de esas funciones se ejecuta una vez cuando se inicia el juego.

La actualización, por otro lado, se ejecuta en un bucle a lo largo del juego. Es el caballo de batalla que actualiza los elementos del juego para hacerlo interactivo.

Configure su sistema para desarrollar juegos con Phaser

A pesar de que Phaser se ejecuta en HTML y JavaScript, los juegos en realidad se ejecutan en el lado del servidor, no en el lado del cliente. Esto significa que necesitarás ejecutar tu juego en tu localhost. Ejecutar el juego en el lado del servidor permite que su juego acceda a archivos y activos adicionales fuera del programa. yo recomiendo usando XAMPP para configurar un localhost si aún no tiene una configuración.

¿Qué es 127.0 0.1, Localhost o una dirección de bucle invertido?

Has visto "localhost" en tu computadora, pero ¿qué es? ¿Qué significa la dirección 127.0.0.1? ¿Ha sido pirateado?

El siguiente código lo pondrá en funcionamiento. Establece un entorno de juego básico.

Para ejecutarse, el juego requerirá una imagen PNG llamada "gamePiece" guardada en una carpeta "img" en su host local. Para simplificar, este ejemplo utiliza un cuadrado naranja de 60 píxeles de 60 píxeles. Tu juego debería verse así:

Si tiene algún problema, utilice el depurador de su navegador para averiguar qué salió mal. Perder incluso un solo carácter puede causar estragos, pero en general, su depurador detectará esos pequeños errores.

Explicando el código de configuración

Hasta ahora, el juego no hace nada. ¡Pero ya hemos recorrido mucho terreno! Veamos el código con más profundidad.

Para que se ejecute un juego de Phaser, debes importar la biblioteca de Phaser. Hacemos esto en la línea 3. En este ejemplo, vinculamos al código fuente, pero puede descargarlo en su host local y hacer referencia al archivo también.

Gran parte del código hasta ahora configura el entorno del juego, que la variable config historias. En nuestro ejemplo, estamos configurando un juego de fase con un fondo azul (CCFFFF en código de color hexadecimal) de 600 px por 600 px. Por ahora, la física del juego se ha configurado para arcada, pero Phaser ofrece una física diferente.

Finalmente, escena le dice al programa que ejecute el precarga función antes de que comience el juego y el crear función para iniciar el juego. Toda esta información se pasa al objeto del juego llamado juego.

Relacionado: Las 6 mejores computadoras portátiles para programación y codificación

La siguiente sección de código es donde realmente toma forma el juego. La función de precarga es donde desea inicializar cualquier cosa que necesite para ejecutar su juego. En nuestro caso, hemos precargado la imagen de nuestra pieza de juego. El primer parámetro de .imagen nombra nuestra imagen y el segundo le dice al programa dónde encontrar la imagen.

La imagen de gamePiece se agregó al juego en la función de creación. La línea 29 dice que estamos agregando la imagen gamePiece como un sprite 270px hacia la izquierda y 450px hacia abajo desde la esquina superior izquierda de nuestra área de juego.

Hacer que nuestra pieza de juego se mueva

Hasta ahora, esto difícilmente se puede llamar un juego. Por un lado, no podemos mover nuestra pieza de juego. Para poder cambiar cosas en nuestro juego, tendremos que agregar una función de actualización. También tendremos que ajustar la escena en la variable de configuración para decirle al juego qué función ejecutar cuando actualicemos el juego.

Agregar una función de actualización

Nueva escena en la configuración:

escena: {
precarga: precarga,
crear: crear,
actualizar: actualizar
}

A continuación, agregue una función de actualización debajo de la función de creación:

function update () {
}

Obtener entradas clave

Para permitir que el jugador controle la pieza del juego con las teclas de flecha, tendremos que agregar una variable para rastrear qué teclas está presionando el jugador. Declare una variable llamada keyInputs debajo de donde declaramos gamePieces. Declararlo allí permitirá que todas las funciones accedan a la nueva variable.

var gamePiece;
var keyInputs;

La variable keyInput debe inicializarse cuando se crea el juego en la función de creación.

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

Ahora, en la función de actualización, podemos verificar si el jugador está presionando una tecla de flecha y, si lo está, mover nuestra pieza de juego en consecuencia. En el siguiente ejemplo, la pieza del juego se mueve 2px, pero puede hacer que sea un número mayor o menor. Mover la pieza 1px a la vez parecía un poco lento.

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;
}
}

¡El juego tiene un carácter movible ahora! Pero para ser realmente un juego, necesitamos un objetivo. Agreguemos algunos obstáculos. Esquivar obstáculos fue la base de muchos de los juegos en la era de los 8 bits.

Añadiendo obstáculos al juego

Este ejemplo de código usa dos sprites de obstáculos llamados obstáculo1 y obstáculo 2. obstáculo1 es un cuadrado azul y obstáculo2 es verde. Cada imagen deberá estar precargada al igual que el objeto del juego.

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

Luego, cada objeto de obstáculo deberá inicializarse en la función de creación, al igual que la pieza del juego.

function create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
obstáculo1 = this.physics.add.sprite (200, 0, 'obstáculo1');
obstáculo2 = this.physics.add.sprite (0, 200, 'obstáculo2');
}

Haciendo que los obstáculos se muevan

Para mover las piezas esta vez, no queremos usar la entrada del jugador. En cambio, hagamos que una pieza se mueva de arriba hacia abajo y la otra se mueva de izquierda a derecha. Para hacer eso, agregue el siguiente código a la función de actualización:

obstáculo1.y = obstáculo1.y + 4;
si (obstáculo1.y> 600) {
obstáculo1.y = 0;
obstáculo1.x = Phaser. Matemáticas. Entre (0, 600);
}
obstáculo2.x = obstáculo2.x + 4;
si (obstáculo2.x> 600) {
obstáculo2.x = 0;
obstáculo2.y = Phaser. Matemáticas. Entre (0, 600);
}

El código anterior moverá el obstáculo1 hacia abajo en la pantalla y el obstáculo2 a lo largo del área de juego 4px cada cuadro. Una vez que un cuadrado está fuera de la pantalla, se vuelve a mover al lado opuesto en un nuevo lugar aleatorio. Esto asegurará que siempre haya un nuevo obstáculo para el jugador.

Detectando Colisiones

Pero aún no hemos terminado. Es posible que haya notado que nuestro jugador puede atravesar los obstáculos. Necesitamos hacer que el juego detecte cuando el jugador golpea un obstáculo y finaliza el juego.

La biblioteca de física de Phaser tiene un detector de colisionadores. Todo lo que tenemos que hacer es inicializarlo en la función de creación.

this.physics.add.collider (gamePiece, obstacle1, function (gamePiece, obstacle1) {
gamePiece.destroy ();
obstáculo.destruir ();
obstáculo2.destruir ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
obstáculo.destruir ();
obstáculo2.destruir ();
});

El método del colisionador requiere tres parámetros. Los dos primeros parámetros identifican qué objetos están colisionando. Entonces, arriba, tenemos dos colliders configurados. El primero detecta cuando la pieza de juego choca con el obstáculo1 y el segundo colisionador busca colisiones entre la pieza de juego y el obstáculo2.

El tercer parámetro le dice al colisionador qué hacer una vez que detecta una colisión. En este ejemplo, hay una función. Si hay una colisión, todos los elementos del juego se destruyen; esto detiene el juego. Ahora el jugador terminará el juego si choca contra un obstáculo.

Prueba el desarrollo de juegos con Phaser

Hay muchas formas diferentes de mejorar este juego y hacerlo más complejo. Solo hemos creado un jugador, pero se podría agregar y controlar un segundo personaje jugable con los controles "awsd". De manera similar, puede experimentar agregando más obstáculos y variando la velocidad de su movimiento.

Esta introducción le ayudará a empezar, pero aún queda mucho por aprender. Lo mejor de Phaser es que gran parte de la física del juego está hecha para ti. Es una forma muy sencilla de empezar a diseñar juegos en 2D. Continúe desarrollando este código y perfeccionando su juego.

Si se encuentra con algún error, el depurador de su navegador es una excelente manera de descubrir el problema.

Cómo utilizar Chrome DevTools para solucionar problemas de sitios web

Aprenda a utilizar las herramientas de desarrollo integradas del navegador Chrome para mejorar sus sitios web.

Sobre el Autor