En este tutorial de varias partes, vamos a utilizar Phaser 3 y Socket.io para crear un simple juego de varios jugadores. Para nuestro juego de varios jugadores, vamos a seguir el juego de la arquitectura cliente-servidor. Si usted no está familiarizado con la arquitectura cliente-servidor de juego, el cliente se encarga de mostrar el juego para el jugador, manejo de la entrada del jugador, y para la comunicación con el servidor. El servidor, por otro lado, es responsable de la difusión de esos datos para cada cliente.

El objetivo de este tutorial es para enseñarle los fundamentos de crear un juego multijugador. Usted aprenderá a:


  • Configuración de un servidor Node.js y expreso que va a hacer nuestro juego y comunicarse con él.
  • Configuración básica de un juego de 3 Phaser que actuará como nuestro cliente.
  • Uso Socket.io para permitir que el servidor y el cliente para comunicarse.

    Puede descargar todos los archivos asociados con el código fuente de la primera parte aquí.

    Tabla de contenidos

    Aprender Phaser 3 con nuestro nuevo mini-Grado

    El desarrollo del juego HTML5 Mini-Grado ya está disponible para pre-pedido en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3!

    El acceso al instante temprano

    Tutorial Requisitos

    En este tutorial, vamos a utilizar Node.js y Express para crear nuestro servidor. También estaremos usando NPM para instalar los paquetes necesarios que necesitamos para el servidor se ejecute. Con el fin de seguir con este tutorial, necesitará tener Node.js y NPM instalados localmente, o tendrá acceso a un entorno que ya tiene instaladas. También vamos a utilizar el símbolo del sistema (Windows) / Terminal (Mac) para instalar los paquetes necesarios, y para iniciar / detener nuestro servidor de nodo.

    Tener una experiencia previa con estas herramientas es un plus, pero no es necesario para este tutorial. No vamos a estar cubriendo cómo instalar estas herramientas como el foco de este tutorial está haciendo un juego con Phaser. La última cosa que necesita es un editor de texto o IDE para la edición de su código.

    Para instalar Node.js, haga clic en el enlace aquí: y elegir la versión LTS. Usted puede descargar y utilizar la versión actual con este tutorial, sin embargo, se recomienda la versión LTS para la mayoría de usuarios. Al instalar Node.js, la NGP también se instalará en su ordenador. Una vez que haya instalado estas herramientas, se puede pasar a la siguiente parte.

    Configuración del servidor

    Lo primero que vamos a hacer es crear un servidor básico Node.js que servirá a nuestros archivos de juego. Para comenzar, cree una nueva carpeta en el ordenador, se le puede llamar lo que quieras. A continuación, vaya dentro de esta carpeta y crear un nuevo archivo llamado server.js. Abre server.js y agregue el código siguiente a la misma:
    var expresar = require ( ‘expresar’); app var = expresan (); = servidor var requieren ( ‘http’) Server (app);. app.use (express.static (__ dirname + ‘/ pública’)); aplicación .get ( ‘/’, function (req, res) {res.sendFile (__ nombredir + ‘/index.html’);});server.listen(8081, function () {console.log ( `escuchando en $ { . server.address () puerto} `);}); = 12345678910111213varexpress requieren ( ‘expresar’); = varapp expresan (); = varserver requieren ( ‘http’) Server (app);. app.use (express.static (__dirname + ‘/ pública’)); app.get ( ‘/’, function (req, res) {res.sendFile (__ nombredir + ‘/ index.html’);}); server.listen (8081, function () { console.log ( `Listeningon $ {server.address () puerto.}`);});

    En el código anterior que:


    • hace referencia el módulo expreso, que es un framework web que nos ayudará a hacer que nuestros archivos estáticos.
    • creado una nueva instancia de expreso y lo llamó aplicación.
    • suministra la aplicación al servidor de HTTP, lo que permitirá expresar para manejar las peticiones HTTP.
    • actualizado el servidor para hacer que nuestros archivos estáticos usando express.static función integrada de middleware de Express.
    • dijo el servidor para servir el archivo index.html como la página raíz.
    • tuvo la escucha de inicio del servidor en el puerto 8081.

      Antes de poder ejecutar el servidor, tendremos que instalar los módulos necesarios para el servidor. Abra su / comando de terminal del sistema, y ​​vaya a la carpeta del proyecto. Una vez allí, tendrá que ejecutar el siguiente comando: init NPM-f. Esto creará un archivo package.json en la carpeta del proyecto. Vamos a utilizar este archivo para realizar un seguimiento de todos los paquetes que nuestro proyecto depende.

      Ahora, vamos a instalar expresa. En su terminal ejecutar el comando siguiente: NPM instalar – Guardar expresa. Esto creará una carpeta llamada node_modules en su carpeta de proyecto, y añadiendo la opción –save al comando, la NGP salvará este paquete en nuestro fichero package.json.

      Configuración del cliente

      Con el código de servidor básica terminada, ahora vamos a trabajar en la creación de nuestro código del lado del cliente. En su carpeta de proyecto, cree una nueva carpeta llamada pública. Cualquier archivo que ponemos en esta carpeta se representará por el servidor que hemos creado. Así que vamos a querer poner todos nuestros archivos del lado del cliente estáticos en esta carpeta. Ahora dentro de la carpeta pública, crear un nuevo archivo llamado index.html. Abre index.html y agregue el código siguiente a la misma:
      1

      Then, hasta abierto game.js y añadir la siguiente línea dentro de la función crear:
      this.socket = io ();.

      Ahora, si se inicia el servidor de copia de seguridad de nuevo, y actualiza su juego en su navegador, usted debe ver el usuario conectado / desconectado mensajes en su terminal

      información de la consola que denota usuarios conectar y desconectar

      Adición de jugadores - Server

      Ahora que tenemos nuestra configuración de conexiones de socket, podemos pasar a la adición de jugadores en nuestro juego. Con el fin de mantener todos los juegos del jugador en sincronía, tendremos que notificar a todos los jugadores cuando un usuario se conecta o se desconecta del juego. Además, cuando un nuevo jugador se conecta vamos a necesitar una manera de dejar que el jugador sabe de todos los otros jugadores en el juego. Para hacer todo esto necesitaremos para almacenar algunos datos de los jugadores, y utilizaremos las conexiones de socket para enviar mensajes a nuestros jugadores.

      En este tutorial, vamos a almacenar los datos del jugador en la memoria en el servidor. Normalmente, nos gustaría para almacenar estos datos en algún tipo de base de datos, de esa manera sería persistente, y si falla el servidor, que podría fácilmente recuperar el estado del juego.

      En server.js añadir la siguiente línea por debajo de la variable io:
      jugadores var = {};

      Vamos a utilizar este objeto para realizar un seguimiento de todos los jugadores que están actualmente en el juego. A continuación, en la función de devolución de llamada del evento de conexión socket.io añadir el siguiente código debajo de la console.log ( 'un usuario conectado'); línea:
      // crear un nuevo jugador y añadirlo a nuestros jugadores objectplayers [socket.id] = {rotación: 0, x: Math.floor (Math.random () * 700) + 50, y: Math.floor (Math.random () * 500) + 50, playerId: socket.id, equipo: (Math.floor (Math.random () * 2) == 0)? 'Roja': 'azul'}; // enviar los jugadores se oponen a la nueva playersocket.emit ( '', currentPlayers jugadores); // actualizar todos los demás jugadores de la nueva playersocket.broadcast.emit ( 'newPlayer', los jugadores [ socket.id]); // 123456789101112 crear un nuevo jugador y añadirlo a nuestros jugadores objectplayers [socket.id] = {rotación: 0, x: Math.floor (Math.random () * 700) + 50, y: ? Math.floor (Math.random () * 500) + 50, playerId: socket.id, equipo: (Math.floor (Math.random () * 2) == 0) 'Red': 'azul'}; // enviar los jugadores se oponen a la nueva playersocket.emit ( 'currentPlayers', los jugadores); // actualizar todos los demás jugadores de la nueva playersocket.broadcast.emit ( 'newPlayer', los jugadores [socket.id]);

      Repasemos el código que acabamos de añadir:


      • Cuando un jugador se conecta a la toma de web, almacenamos algunos datos de los jugadores en los jugadores objeto y que utilizan el socket.id como la clave.
      • estamos almacenando la rotación, x, y y la posición del jugador, y vamos a utilizar esto para control fueron creamos sprites en el lado del cliente, y utilizar estos datos para actualizar todos los juegos de los jugadores. También almacenamos la playerId por lo que podemos hacer referencia a ella en el juego, y hemos añadido un atributo de equipo que se utilizará más adelante.
      • Se utilizó socket.emit y socket.broadcast.emit para emitir un evento para la toma del lado del cliente. socket.emit sólo emite el evento a esta toma en particular (el nuevo jugador que acaba de conectarse). socket.broadcast.emit enviará el evento a todos los otros conectores (los jugadores existentes).
      • En el caso currentPlayers, estamos pasando el objeto jugadores para el nuevo jugador. Estos datos se utiliza para rellenar todos los sprites jugador en el juego del jugador nuevo.
      • En el caso newPlayer, estamos el paso de datos del nuevo jugador a todos los otros jugadores, de esa manera el nuevo sprite se puede agregar a su juego.

        Cuando un jugador se desconecta, se necesitan para eliminar los datos de ese jugador de nuestro objeto jugadores, y tenemos que emitir un mensaje a todos los otros jugadores acerca de este usuario dejando, de esta manera podemos eliminar el sprite de ese jugador del juego.

        En la función de devolución de llamada del evento de desconexión socket.io añadir el siguiente código debajo de la console.log ( 'usuario desconectado'); línea:
        // eliminar este reproductor de nuestros jugadores jugadores objectdelete [socket.id]; // emitir un mensaje a todos los jugadores para eliminar esta playerio.emit ( 'desconexión', socket.id); 1234 // eliminar este reproductor de nuestros jugadores objectdelete jugadores [socket.id]; // emiten un mensaje a todos los jugadores para eliminar esta playerio.emit ( 'desconexión', socket.id);

        Su archivo server.js debe ser similar a la siguiente:
        var expresar = require ( 'expresar'); app var = expresan ();. = servidor var requieren ( 'http') Server (app); var io = require ( 'socket.io') escuchar (servidor);. var jugadores = {}; app.use (express.static (__ dirname + '/public'));app.get('/', function (req, res) {res.sendFile (__ dirname + '/index.html') ;}); io.on ( 'conexión', la función (socket) {console.log ( 'un usuario conectado'); // crear un nuevo jugador y añadirlo a nuestros jugadores objeto jugadores [socket.id] = {rotación : 0, x: Math.floor (Math.random () * 700) + 50, y: Math.floor (Math.random () * 500) + 50, playerId: socket.id, equipo: (Math.floor ( ? math.random () * 2) == 0) 'Red': 'azul'}; // enviar los jugadores se oponen a que el nuevo jugador socket.emit ( 'currentPlayers', los jugadores); // actualizar todos los demás jugadores de el nuevo jugador socket.broadcast.emit ( 'newPlayer', los jugadores [socket.id]); // cuando un jugador se desconecta, eliminarlos de nuestros jugadores socket.on objeto ( 'desconexión', function () {console.log ( 'usuario desconectado'); // eliminar este reproductor de nuestros jugadores jugadores objeto eliminar [por lo cket.id]; // emitir un mensaje a todos los jugadores para eliminar esta io.emit jugador ( 'desconexión', socket.id); });}); Server.listen (8081, function () {console.log ( `Escuchar en $ {server.address ()` puerto});.}); = 1234567891011121314151617181920212223242526272829303132333435363738394041varexpress requieren ( 'express'); varapp = expresan ();. = varserver requieren ( 'http') Server (app); = vario requieren ( 'socket.io') escuchar (servidor);. varplayers = {}; app.use (express.static (__ dirname + '/ público ')); app.get (' /', function (req, res) {res.sendFile (__ dirname + '/ index.html');}); io.on ( 'conexión', la función (socket) {consola .log ( 'un usuario conectado'); // crear un nuevo jugador y añadirlo a nuestros jugadores objectplayers [socket.id] = {rotación: 0, x: Math.floor (math.random () * 700) 50 , y: Math.floor (Math.random () * 500) + 50, playerId: socket.id, equipo:? (Math.floor (Math.random () * 2) == 0) 'Red': 'blue '}; // envían los jugadores se oponen a la nueva playersocket.emit (' currentPlayers', los jugadores); // actualizar todos los demás jugadores de la nueva playersocket.broadcast.emit ( 'newPlayer', los jugadores [socket.id]); // cuando un jugador se desconecta, eliminarlos de nuestros jugadores objectsocket.on ( 'desconexión', la función () {Console.log ( 'usuario ha desconectado'); // eliminar este reproductor de nuestros jugadores jugadores objectdelete [socket.id]; // emitir un mensaje a todos los jugadores para eliminar esta playerio.emit ( 'desconexión', socket.id) ;});}); server.listen (8081, function () {console.log ( `Listeningon $ {server.address ()` puerto});.});

        Conclusión

        Con nuestro código de servidor para añadir jugadores en su lugar, esto trae la primera parte de este tutorial para un fin. En la segunda parte Hemos terminado nuestro juego multijugador por:


        • La adición de la lógica del lado del cliente para añadir jugadores a nuestro juego.
        • Adición de lógica para la entrada del jugador.
        • Adición de objetos de colección para los jugadores a recoger.

          Tenía la esperanza de que haya disfrutado de la primera parte de este tutorial y lo encontró muy útil. Si tienes alguna pregunta o sugerencia sobre lo que debemos cubrir próxima, vamos a saber en los comentarios a continuación.

          Mensajes relacionados
          Phaser 3, scroll infinito, avión que vuela juego < img src = "http://fymm-rpg.net/wp-content/uploads/game-with-enemis-150x150.png" alt = "Unidad escena del juego de multijugador juego de disparos en el espacio" />

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *