Como puede ver, esta clase tiene tres métodos vacíos. .Clase de escena. Cada uno de estos métodos tiene una función diferente como se explica a continuación

Construyendo un juego de navegador multijugador en tiempo real en menos de un día – Parte 1/4

Juegas. Duh! . Mmm.. Los juegos parecen difíciles de construir. Con muchas piezas móviles involucradas (literalmente), el desarrollo del juego parece estar restringido a los desarrolladores que han sumergido sus pies en las aguas sagradas de las redes, las matemáticas, los gráficos y similares. Sin embargo, con la web evolucionando muy rápidamente y con todos los nuevos protocolos y bibliotecas que se han extendido en los últimos años, ahora es muy fácil comenzar a construir juegos multijugador basados ​​en navegadores. En este artículo, analizaremos la implementación paso a paso de un juego multijugador de tiempo real de los invasores espaciales (ah, la nostalgia!) con phaser3 y hábilmente en tiempo real. He presentado el juego final en https: // space-Invaders-Multiplayer.Herokuapp.com/ para que lo pruebes. En el camino, entenderemos la arquitectura, el diseño del sistema, los protocolos de redes detrás de esto, y también mirarán las advertencias para tener en cuenta al construir juegos basados ​​en el navegador multijugador. Esta serie tutorial se divide en cuatro partes:

• Parte 1: Introducción a los conceptos de juego y la Biblioteca Phaser
• Parte 2: Evaluación de protocolos de red para aplicaciones en tiempo real

Una última cosa antes de comenzar. Este artículo asume una comprensión básica de JavaScript y Express/NodeJS. Intentaré explicar todo lo demás tanto como sea posible ����‍����

Vamos a buscar juegos!

Parte 1 – Introducción a los conceptos de juegos y Phaser

Comencemos mirando las reglas para el juego, ya que no será exactamente lo mismo que el clásico retro original.

Reglas del juego para invasores espaciales multijugador

• Cuando un nuevo jugador se une, se les asignará aleatoriamente un avatar de monstruos de las tres variedades disponibles.
• Cada jugador puede mover su avatar hacia la izquierda o hacia la derecha usando las teclas de flecha en su teclado
• Cada jugador verá su propio avatar en blanco, pero verá a todos los demás en un color aleatorio que les asigne pre-asignado
• Cuando un número preestablecido de jugadores se unen al juego, se lanza un barco. Este barco se mueve a lo largo del eje horizonal en una dirección elegida al azar que cambia aleatoriamente cada 5 segundos. Junto con esto, la velocidad del barco también cambiará. Este barco también dispara balas a intervalos regulares que también podemos preestablecer
• Todos los avatares se mueven automáticamente hacia abajo con un incremento preestablecido durante todo el juego.
• El objetivo de ganar el juego es llegar al borde inferior de la pantalla del juego sin ser asesinado por una o más balas disparadas por el barco.

Componentes de un juego multijugador en tiempo real

Si bien puede parecer que hay un montón de cosas detrás de un juego en tiempo real en red, realmente se reducen a tres componentes centrales:

.

1.

Los activos son los elementos críticos que componen el juego. . .

Si estás interesado en hacer el tema de tu juego Super Arcade, puedes seguir este tutorial de arte de píxeles de Glauber Kotaki para aprender cómo.

2.

. Por ejemplo, en un simple juego de pong, la pelota se recupera en una cierta dirección, con una cierta velocidad dependiendo de la parte de la paleta con la que chocó. Del mismo modo, en nuestro juego, esto podría incluir la informática donde el barco debe ir, con qué velocidad, disparo de balas, colisión de estos objetos de bala con avatares de jugadores, etc.

Todas estas cosas son básicamente cálculos matemáticos en línea con conceptos de física, debajo del capó. . Entonces, en lugar de escribir todos desde cero, podemos usar un motor de física que pueda hacer la mayor parte de la magia matemática para nosotros.

3.

. Puede ser muy difícil mantener la sincronización entre todos los jugadores, descubrir qué jugador murió y si todos los demás están de acuerdo con esa afirmación.

No se preocupe si todo esto comienza a sonar complejo, no tiene que ser. Hay muchos patrones de diseño preexistentes que pueden ayudarnos a comenzar de la manera correcta. Podemos elegir cómo queremos que sea la arquitectura del juego, con respecto a la mecánica del juego en particular en cuestión. .

Ahora que tenemos una mejor comprensión de los componentes centrales, exploremos cómo podemos hacer que funcionen en nuestro juego.

Phaser es un marco JavaScript de lienzo de código abierto y WebGL para HTML5. Usaremos Phaser 3 para construir el juego. . Además, en caso de que esté buscando agregar algunas características nuevas y geniales al juego usted mismo en el futuro, debe saber qué/dónde mirar.

Phaser no solo nos permite mostrar los activos en un lienzo, reproducir las animaciones y sonidos, etc. en una página web, sino que también viene con un motor de física incorporado (en realidad múltiple). .

Hay una muy buena serie de tutoriales en video para Phaser que recomendaría si es la primera vez que trabaja con Phaser 3.

.

Luego pasamos el objeto de configuración para comenzar un nuevo juego.

Esto puede sonar un poco confuso, ya que aún no has visto ningún código. Hagamos eso a continuación.

Comenzando con el juego

Vamos directamente a la pantalla del juego por ahora. Nos preocuparemos por las páginas de lanzamiento y tabla de clasificación, más tarde. Nuestro juego sería una página HTML con un lienzo. Este lienzo se mantendrá y ejecutará el juego real. Entonces, creemos un archivo, llámelo índice. . Para mantener las cosas organizadas, almacenaremos todos nuestros archivos HTML en una carpeta llamadas Vistas y todos los archivos JavaScript del lado del cliente en una carpeta llamada Pública . .

Como puede ver, todo lo que estamos haciendo aquí es un enlace a los archivos CSS y JS que agregaremos en breve, pero también más importante el enlace al Phaser JS CDN.

. Aquí es donde agregaremos nuestro lienzo de juego a través de JavaScript.

.JS y comience definiendo el objeto de configuración del juego del que hablamos anteriormente.

Como puede ver, además de especificar el tamaño del lienzo y su color de fondo, también hemos especificado hacia dónde debe ir este lienzo (identificado por los padres) y una variedad de escenas que nos gustaría ser parte de esto juego.

. . .

. Una escena en Phaser es una clase que extiende el Phaser.Clase de escena. Definamos esto para nuestro juego. .

. Estos vienen con el Phaser.Clase de escena. Cada uno de estos métodos tiene una función diferente como se explica a continuación

1. El método PReload () obtiene todos los recursos que podríamos necesitar, desde donde estén, los carga y los mantiene listos para cuando nos gustaría agregarlos a nuestro juego.
2. El método create () se ejecuta una vez cuando el juego se ejecuta por primera vez. Podemos agregar todas las inicializaciones variables, definiciones de animación, etc., en este método.
3. . Actualizaremos los avatares, dispararemos balas, moveremos el barco, todo en este método..

Cargando activos y creando animaciones

Sigamos adelante y cargemos algunos activos ahora.

Originalmente presente este juego en Glitch que almacena todos los activos en su cubo, recuperable por un enlace CDN. .

. Además de ellos, también agregamos activos para el barco, la bala y, por supuesto, la explosión para jugar cuando un jugador muere.

Como puede ver, cargamos un activo de hoja de sprits en Phaser usando este..

• el identificador
• Las dimensiones del archivo (en píxeles).

También podemos llamarlo una imagen, pero no podremos hacer las animaciones geniales con ella como verá en breve.

PAG.S. . Simplemente podríamos agregar un tinte de color a un sprite existente en lugar de cargar el mismo objeto en múltiples colores como activos separados. No sé cómo todavía, pero actualizaré esto cuando lo haya descubierto 🙂

Si inspecciona la hoja de sprites de “explosión”, verá que es un montón de imágenes diferentes colocadas una al lado de la otra. La forma en que causamos una “animación” es atravesando estas diferentes imágenes a una velocidad particular, lo que hace que parezca que en realidad es un video transparente de una explosión.

En el método Create (), definiremos la animación para esta explosión:

Hemos usado Phaser’s This.animales.método create () para crear la animación. Este método toma:

• marcos que generan marcos utilizando el identificador del activo al que nos gustaría aplicar esta animación
• Framerate que especifica la velocidad a la que nos gustaría jugar esta animación
• Repita que especifica cuántas veces se ejecutará la animación
• HideOnComplete especifica si el activo que se estaba animando debería desaparecer después de que se realice la animación

No agregaremos nada en el método Update () por ahora. Si notas, tampoco hemos instanciado el juego, lo haremos en una parte posterior de esta serie de artículos.

Eso es todo por ahora. Aprenderemos sobre las redes de aplicaciones en tiempo real en la Parte 2 – Evaluación de protocolos de redes para aplicaciones en tiempo real

Todos los artículos de esta serie:

• Parte 1: Introducción a los conceptos de juego y la Biblioteca Phaser
• Parte 2: Evaluación de protocolos de red para aplicaciones en tiempo real
• Parte 3: Implementación del código del lado del servidor para mantener a todos los jugadores sincronizados

Una versión separada relevante para este tutorial está disponible en GitHub si desea verificarlo.

.

Si tiene alguna pregunta, no dude en comunicarse conmigo en Twitter @srushtika. Mis dms están abiertos 🙂

Categoría: edificio multijugador

ChimeralAnd es un mundo libre para jugar Sandbox Survival Survival MMORPG (juego de rol de rol en línea multijugador masivo) para PC (Windows) y móvil (Android/iOS) desarrollado por Pixel Soft y publicado por Level Infinite.

. Muck es una mezcla de supervivencia de baja poli e informal (muy)..

. Los jugadores pueden construir, poseer, compartir y […]

Core es una colección de juegos gratuita y una plataforma de juego de juego similar a Crayta y Roblox. Core es, en otras palabras, un multiverso de juegos gratuitos para jugar y mundos para explorar diseñada por una comunidad global de desarrolladores que puedes fácilmente […]

Crayta es una plataforma de fabricación de juegos colaborativa gratuita y colección de juegos de arcade multijugador basado en Unreal Engine 4 para PC, similar a Core y Roblox. . De […]

Wild Terra Online es un MMORPG gratuito con sandbox y características de supervivencia, ambientadas en un mundo de fantasía medieval completamente controlado por el jugador. No necesitará completar una cadena de tareas y matar mil lobos para crear equipos. Todo es mucho […]

ARK: Survival Evolved (Mobile) es un juego de supervivencia de acción móvil de acción gratuita* de Studio Wildcard para Mobile (Android, iOS), ambientado en un mundo prehistórico donde los jugadores, que están varados en una isla, deben sobrevivir de roaming roaming dinosaurios y otros animales prehistóricos, peligros naturales, […]

Sin remover es un juego de supervivencia de sandbox de sandbox sin tema de zombie gratis para PC (Windows, Mac y Linux) en el género emergente de supervivencia Apocalypse MMO/multijugador (aunque también puedes jugar solo o en CooP in pVE). En lugar de centrarse en […]

Totemori es un juego de luchador multijugador de pantalla compartida divertido e innovador. Totemori presenta multijugador local versus y cooperativo para hasta 4 jugadores. Juega contra tus amigos o practica contra bots, […]

Galactic Junk League es una arena de Crafter competitiva gratuita, un tirador mezclado con posibilidades de construcción de barcos casi infinitas. Construir cualquier cosa. Luchar contra cualquiera. En el espacio. Construye tus barcos basura para literalmente cualquier forma y tamaño y lucha contra las creaciones de […]

Creativerse es un delicioso juego de Sandbox de MMO y de próxima generación sobre aventura, exploración y creatividad con tus amigos. Y ahora es gratis jugar. Estás varado en un mundo vasto y misterioso que está rodeado de bestias feroces y […]

Gunscape es un kit de construcción de FPS. Es un juego que te permite volverte loco con tu creatividad en un sandbox de acción de bombeo! Gunscape hace esto al proporcionar herramientas fáciles de usar basadas en una interfaz de colocación de bloques con la que todos ya están familiarizados para crear un solo jugador […]

Trove es un voxel MMORPG de Tion Worlds para PC (Windows, Mac), Xbox One, PS4 y Nintendo. . Explora y crea tu camino […]

Roblox es una plataforma de videojuegos y creación de juegos en línea multijugador gratuito y multijugador (similar a Core y Crayta) que permite a los usuarios diseñar y compartir sus propios juegos y niveles, y jugar todos los tipos de juegos creados por otros usuarios, desde [[ …]