Maison > interface Web > js tutoriel > Création d'un mode multijoueur sûr et rapide dans les jeux sur Unity et NodeJS avec des exemples

Création d'un mode multijoueur sûr et rapide dans les jeux sur Unity et NodeJS avec des exemples

WBOY
Libérer: 2024-09-01 21:02:32
original
1105 Les gens l'ont consulté

Introduction

Planifier une approche du développement de jeux multijoueurs - joue l'un des rôles les plus importants dans le développement ultérieur de l'ensemble du projet, car il comprend de nombreux critères que nous devons prendre en compte lors de la création d'un produit de très haute qualité. Dans le tutoriel du manifeste d'aujourd'hui, nous examinerons un exemple d'approche qui nous permet de créer des jeux très rapides, tout en respectant toutes les règles de sécurité et anti-chit.

Creating safe and fast multiplayer in games on Unity and NodeJS with examples

Alors, définissons pour nous les principaux critères :

  1. Les jeux multijoueurs nécessitent une approche particulière pour gestion de la synchronisation réseau, notamment lorsqu'il s'agit de temps réel. Un protocole binaire est utilisé pour accélérer la synchronisation des données entre les clients, et les champs réactifs aideront à mettre à jour les positions des joueurs avec une latence et des économies de mémoire minimales.
  2. L'Autorité du serveur est un principe important selon lequel les données critiques ne sont traitées que sur le serveur, garantissant l'intégrité du jeu et la protection contre les tricheurs. Cependant, afin que nous puissions maximiser les performances, le serveur effectue uniquement les mises à jour critiques et nous laissons le reste à l'anti-triche du client.
  3. Mise en place de anti-chit client afin de traiter les données moins critiques sans charge supplémentaire sur le serveur.

Creating safe and fast multiplayer in games on Unity and NodeJS with examples

Principaux composants de l'architecture

  1. Côté client (Unity) : Le côté client est responsable de l'affichage de l'état du jeu, de l'envoi des actions des joueurs au serveur et de la réception des mises à jour du serveur. Les champs réactifs sont également utilisés ici pour mettre à jour dynamiquement les positions des joueurs.
  2. Côté serveur (Node.js) : Le serveur gère les données critiques (par exemple, les mouvements, les collisions et les actions des joueurs) et envoie des mises à jour à tous les clients connectés. Les données non critiques peuvent être traitées sur le client et transmises via le serveur à d'autres clients.
  3. Protocole binaire : La sérialisation des données binaires est utilisée pour réduire la quantité de données transférées et améliorer les performances.
  4. Synchronisation : Une synchronisation rapide des données entre les clients est fournie pour minimiser la latence et garantir un jeu fluide.
  5. Anti-Cheat Client : Il est utilisé pour les types de données que nous pouvons modifier sur le client et envoyer à d'autres clients.

Étape 1 : Implémentation du serveur dans Node.js

Tout d'abord, vous devez configurer un serveur sur Node.js. Le serveur sera responsable de tous les calculs critiques et du transfert des données mises à jour aux joueurs.

Installation de l'environnement
Pour créer un serveur sur Node.js, installez les dépendances nécessaires :

mkdir multiplayer-game-server
cd multiplayer-game-server
npm init -y
npm install socket.io
Copier après la connexion

Socket.io facilite la mise en œuvre d'une communication bidirectionnelle en temps réel entre les clients et le serveur à l'aide de sockets Web.

Implémentation de base du serveur
Créons un serveur simple qui gérera les connexions clients, récupérera les données, calculera les états critiques et les synchronisera entre tous les clients.

// Create a simple socket IO server
const io = require('socket.io')(3000, {
    cors: {
        origin: '*'
    }
});

// Simple example of game states
let gameState = {};
let playerSpeedConfig = {
    maxX: 1,
    maxY: 1,
    maxZ: 1
};

// Work with new connection
io.on('connection', (socket) => {
    console.log('Player connected:', socket.id);

    // Initialize player state for socket ID
    gameState[socket.id] = { x: 0, y: 0, z: 0 };

    // work with simple player command for movement
    socket.on('playerMove', (data) => {
        const { id, dx, dy, dz } = parsePlayerMove(data);

        // Check Maximal Values
        if(dx > playerSpeedConfig.maxX) dx = playerSpeedConfig.maxX;
        if(dy > playerSpeedConfig.maxY) dx = playerSpeedConfig.maxY;
        if(dz > playerSpeedConfig.maxZ) dx = playerSpeedConfig.maxZ;

        // update game state for current player
        gameState[id].x += dx;
        gameState[id].y += dy;
        gameState[id].z += dz;

        // Send new state for all clients
        const updatedData = serializeGameState(gameState);
        io.emit('gameStateUpdate', updatedData);
    });

    // Work with unsafe data
    socket.on('dataupdate', (data) => {
        const { id, unsafe } = parsePlayerUnsafe(data);

        // update game state for current player
        gameState[id].unsafeValue += unsafe;

        // Send new state for all clients
        const updatedData = serializeGameState(gameState);
        io.emit('gameStateUpdate', updatedData);
    });

    // Work with player disconnection
    socket.on('disconnect', () => {
        console.log('Player disconnected:', socket.id);
        delete gameState[socket.id];
    });
});

// Simple Parse our binary data
function parsePlayerMove(buffer) {
    const id = buffer.toString('utf8', 0, 16); // Player ID (16 bit)
    const dx = buffer.readFloatLE(16);         // Delta X
    const dy = buffer.readFloatLE(20);         // Delta  Y
    const dz = buffer.readFloatLE(24);         // Delta  Z
    return { id, dx, dy, dz };
}

// Simple Parse of unsafe data
function parsePlayerUnsafe(buffer) {
    const id = buffer.toString('utf8', 0, 16); // Player ID (16 bit)
    const unsafe = buffer.readFloatLE(16);     // Unsafe float
    return { id, unsafe };
}

// Simple game state serialization for binary protocol
function serializeGameState(gameState) {
    const buffers = [];
    for (const [id, data] of Object.entries(gameState)) {
        // Player ID
        const idBuffer = Buffer.from(id, 'utf8');

        // Position (critical) Buffer
        const posBuffer = Buffer.alloc(12);
        posBuffer.writeFloatLE(data.x, 0);
        posBuffer.writeFloatLE(data.y, 4);
        posBuffer.writeFloatLE(data.z, 8);

        // Unsafe Data Buffer
        const unsafeBuffer = Buffer.alloc(4);
        unsafeBuffer.writeFloatLE(data.unsafeValue, 0);

        // Join all buffers
        buffers.push(Buffer.concat([idBuffer, posBuffer, unsafeBuffer]));
    }
    return Buffer.concat(buffers);
}
Copier après la connexion

Ce serveur effectue les opérations suivantes :

  1. traite les connexions clients.
  2. Reçoit les données de mouvement des joueurs au format binaire, les valide, met à jour l'état sur le serveur et les envoie à tous les clients.
  3. Synchronise l'état du jeu avec une latence minimale, en utilisant le format binaire pour réduire la quantité de données.
  4. Transfère simplement les données dangereuses provenant du client.

Points clés :

  1. Autorité du serveur : Toutes les données importantes sont traitées et stockées sur le serveur. Les clients envoient uniquement des commandes d'action (par exemple, des deltas de changement de position).
  2. Transfert de données binaires : L'utilisation d'un protocole binaire permet d'économiser du trafic et d'améliorer les performances du réseau, en particulier pour les échanges fréquents de données en temps réel.

Étape 2 : Implémentation de la partie client sur Unity

Créons maintenant une partie client sur Unity qui interagira avec le serveur.

Pour connecter Unity à un serveur sur Socket.IO, vous devez connecter une bibliothèque conçue pour Unity.
Dans ce cas, nous ne sommes liés à aucune implémentation particulière (en fait, elles sont toutes similaires), mais utilisons simplement un exemple abstrait.

Using reactive fields for synchronization
We will use reactive fields to update player positions. This will allow us to update states without having to check the data in each frame via the Update() method. Reactive fields automatically update the visual representation of objects in the game when the state of the data changes.

To get a reactive properties functional you can use UniRx.

Client code on Unity
Let's create a script that will connect to the server, send data and receive updates via reactive fields.

using UnityEngine;
using SocketIOClient;
using UniRx;
using System;
using System.Text;

// Basic Game Client Implementation
public class GameClient : MonoBehaviour
{
    // SocketIO Based Client
    private SocketIO client;

    // Our Player Reactive Position
    public ReactiveProperty<Vector3> playerPosition = new ReactiveProperty<Vector3>(Vector3.zero);

    // Client Initialization
    private void Start()
    {
        // Connect to our server
        client = new SocketIO("http://localhost:3000");

        // Add Client Events
        client.OnConnected += OnConnected;    // On Connected
        client.On("gameStateUpdate", OnGameStateUpdate); // On Game State Changed

        // Connect to Socket Async
        client.ConnectAsync();

        // Subscribe to our player position changed
        playerPosition.Subscribe(newPosition => {
            // Here you can interpolate your position instead
            // to get smooth movement at large ping
            transform.position = newPosition;
        });

        // Add Movement Commands
        Observable.EveryUpdate().Where(_ => Input.GetKey(KeyCode.W)).Subscribe(_ => ProcessInput(true));
        Observable.EveryUpdate().Where(_ => Input.GetKey(KeyCode.S)).Subscribe(_ => ProcessInput(false));
    }

    // On Player Connected
    private async void OnConnected(object sender, EventArgs e)
    {
        Debug.Log("Connected to server!");
    }

    // On Game State Update
    private void OnGameStateUpdate(SocketIOResponse response)
    {
        // Get our binary data
        byte[] data = response.GetValue<byte[]>();

        // Work with binary data
        int offset = 0;
        while (offset < data.Length)
        {
            // Get Player ID
            string playerId = Encoding.UTF8.GetString(data, offset, 16);
            offset += 16;

            // Get Player Position
            float x = BitConverter.ToSingle(data, offset);
            float y = BitConverter.ToSingle(data, offset + 4);
            float z = BitConverter.ToSingle(data, offset + 8);
            offset += 12;

            // Get Player unsafe variable
            float unsafeVariable = BitConverter.ToSingle(data, offset);

            // Check if it's our player position
            if (playerId == client.Id)
                playerPosition.Value = new Vector3(x, y, z);
            else
                UpdateOtherPlayerPosition(playerId, new Vector3(x, y, z), unsafeVariable);
        }
    }

    // Process player input
    private void ProcessInput(bool isForward){
        if (isForward)
            SendMoveData(new Vector3(0, 0, 1)); // Move Forward
        else
            SendMoveData(new Vector3(0, 0, -1)); // Move Backward
    }

    // Send Movement Data
    private async void SendMoveData(Vector3 delta)
    {
        byte[] data = new byte[28];
        Encoding.UTF8.GetBytes(client.Id).CopyTo(data, 0);
        BitConverter.GetBytes(delta.x).CopyTo(data, 16);
        BitConverter.GetBytes(delta.y).CopyTo(data, 20);
        BitConverter.GetBytes(delta.z).CopyTo(data, 24);

        await client.EmitAsync("playerMove", data);
    }

    // Send any unsafe data
    private async void SendUnsafeData(float unsafeData){
        byte[] data = new byte[20];
        Encoding.UTF8.GetBytes(client.Id).CopyTo(data, 0);
        BitConverter.GetBytes(unsafeData).CopyTo(data, 16);
        await client.EmitAsync("dataUpdate", data);
    }

    // Update Other players position
    private void UpdateOtherPlayerPosition(string playerId, Vector3 newPosition, float unsafeVariable)
    {
        // Here we can update other player positions and variables
    }

    // On Client Object Destroyed
    private void OnDestroy()
    {
        client.DisconnectAsync();
    }
}
Copier après la connexion

Step 3: Optimize synchronization and performance

To ensure smooth gameplay and minimize latency during synchronization, it is recommended:

  1. Use interpolation: Clients can use interpolation to smooth out movements between updates from the server. This compensates for small network delays.
  2. Batch data sending: Instead of sending data on a per-move basis, use batch sending. For example, send updates every few milliseconds, which will reduce network load.
  3. Reduce the frequency of updates: Reduce the frequency of sending data to a reasonable minimum. For example, updating 20-30 times per second may be sufficient for most games.

How to simplify working with the binary protocol?

In order to simplify your work with a binary protocol - create a basic principle of data processing, as well as schemes of interaction with it.

For our example, we can take a basic protocol where:
1) The first 4 bits are the maxa of the request the user is making (e.g. 0 - move player, 1 - shoot, etc.);
2) The next 16 bits are the ID of our client.
3) Next we fill in the data that is passed through the loop (some Net Variables), where we store the ID of the variable, the size of the offset in bytes to the beginning of the next variable, the type of the variable and its value.

For the convenience of version and data control - we can create a client-server communication schema in a convenient format (JSON / XML) and download it once from the server to further parse our binary data according to this schema for the required version of our API.

Client Anti-Cheat

It doesn't make sense to process every data on the server, some of them are easier to modify on the client side and just send to other clients.

To make you a bit more secure in this scheme - you can use client-side anti-chit system to prevent memory hacks - for example, my GameShield - a free open source solution.

Conclusion

We took a simple example of developing a multiplayer game on Unity with a Node.js server, where all critical data is handled on the server to ensure the integrity of the game. Using a binary protocol to transfer data helps optimize traffic, and reactive programming in Unity makes it easy to synchronize client state without having to use the Update() method.

This approach not only improves game performance, but also increases protection against cheating by ensuring that all key calculations are performed on the server rather than the client.

And of course, as always thank you for reading the article. If you still have any questions or need help in organizing your architecture for multiplayer project - I invite you to my Discord


You can also help me out a lot in my plight and support the release of new articles and free for everyone libraries and assets for developers:

My Discord | My Blog | My GitHub

BTC: bc1qef2d34r4xkrm48zknjdjt7c0ea92ay9m2a7q55

ETH: 0x1112a2Ef850711DF4dE9c432376F255f416ef5d0
USDT (TRC20): TRf7SLi6trtNAU6K3pvVY61bzQkhxDcRLC

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal