Home-theater-designers
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.
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.
el disco está siempre al 100%
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 arcade , 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:
|_+_|A continuación, agregue una función de actualización debajo de la función de creación:
i7 de doble núcleo frente a i5 de cuatro núcleos|_+_|
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.
|_+_|La variable keyInput debe inicializarse cuando se crea el juego en la función de creación.
|_+_|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.
|_+_|¡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 utiliza dos sprites de obstáculo 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.
|_+_|Luego, cada objeto de obstáculo deberá inicializarse en la función de creación, al igual que la pieza del juego.
|_+_|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:
|_+_|El código anterior moverá el obstáculo1 hacia abajo en la pantalla y el obstáculo2 a lo largo del área de juego 4 píxeles en 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.
|_+_|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 con 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.
cómo encontrar la ip del servidor de minecraft
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.
Cuota Cuota Pío Correo electrónico Cómo utilizar Chrome DevTools para solucionar problemas de sitios webAprenda a utilizar las herramientas de desarrollo integradas del navegador Chrome para mejorar sus sitios web.
Leer siguiente Temas relacionados- Programación
- JavaScript
- HTML5
- Desarrollo de juegos
J. Seaton es un escritor científico que se especializa en analizar temas complejos. Tiene un doctorado de la Universidad de Saskatchewan; su investigación se centró en utilizar el aprendizaje basado en juegos para aumentar la participación de los estudiantes en línea. Cuando no está trabajando, la encontrará leyendo, jugando videojuegos o haciendo jardinería.
Más de Jennifer SeatonSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse