Mirror WebGL

Ce guide vous aidera à utiliser Mirrorle transport Websocket de et créer un serveur sans tête sur Edgegap pour un projet Unity.

Ce guide utilisera le projet d'exemple open-source Tanks, disponible dans l'exemple Mirror sous Assets/Mirror/Examples/Tanks.

Vous pouvez trouver la version finale de cet exemple sur notre GitHub

Changer le transport

Nous devons d'abord effectuer quelques modifications à la scène de base avant d'être prêts à construire le serveur de jeu.

• Ouvrir Scene.unity situé sous Assets/Mirror/Examples/Tanks/Scenes;

• Dans l'onglet NetworkManager gameObject, supprimez le composant KcpTransport script et le remplacer par le SimpleWebTransport situé sous Assets/Mirror/Transports/SimpleWeb, assurez-vous également de mettre à jour le champ Transport du NetworkManager composant script avec ce nouveau transport. Assurez-vous que Auto Start Server Build l'option est également sélectionnée.

• Selon votre version de Mirror, vous pourriez avoir besoin de modifier/mettre à jour le NetworkManagerHUD pour le faire fonctionner avec des transports autres que KCP, ainsi que pour vous permettre de saisir la valeur du port dans le HUD avant de rejoindre un serveur.

Prenez note du port utilisé pour les communications réseau, appelé [PORT_JEU]. Dans ce cas, le port utilisé est 7778.

Construire le serveur de jeu et conteneuriser

Pour faciliter le processus de containerisation et de déploiement, il est possible d'utiliser la dernière version du plugin Edgegap Unity sur notre GitHub pour automatiser le processus. Pour plus d'informations sur l'utilisation de ce plugin, vous pouvez consulter notre documentation.

Si vous préférez, vous pouvez également suivre ces instructions étape par étape.

Une fois votre jeu prêt, rendez-vous sur la Construction de l'éditeur Unity, sous Fichier -> Paramètres de compilation dans les menus supérieurs. Assurez-vous de sélectionner les bons préréglages selon votre version d'Unity.

• Avant la version 2021.2 :

  • Définir Plateforme cible vers Linux;

  • Définir Architecture vers x86_64;

  • Cochez la Server Build .

• Sinon :

  • Définir Plateforme vers Serveur dédié;

  • Définir Plateforme cible vers Linux.

Puis appuyez sur construire et sélectionnez un nouveau dossier vide nommé linux_server comme destination de fichier. Transférez le linux_server dossier dans un second dossier vide, qui sera appelé [BUILD DU SERVEUR] dossier mentionné dans ce document. Ajoutez le fichier suivant Dockerfile et boot.sh au dossier [BUILD DU SERVEUR] dossier :

Dockerfile

FROM ubuntu:bionic
MAINTENEUR <author_detail>

ARG DEBIAN_FRONTEND=noninteractive
ARG docker_version=17.06.0-ce

RUN
    apt-get update && \
    apt-get install -y libglu1 xvfb libxcursor1 ca-certificates && \
    update-ca-certificates && \
    apt-get clean

EXPOSE 7778/TCP

COPY linux_server/  /root/linux_server/
COPY boot.sh        /boot.sh

WORKDIR /root/
ENTRYPOINT ["/bin/bash", "/boot.sh"]

boot.sh

xvfb-run --auto-servernum --server-args='-screen 0 640x480x24:32' /root/linux_server/[VOTRE JEU].x86_64 -batchmode -nographics

Assurez-vous de remplacer les [VOTRE JEU] espaces réservés par le nom du fichier généré

Ensuite, lancez une invite de commandes dans le [BUILD DU SERVEUR] dossier ; exécutez les commandes Docker suivantes pour créer une image de votre build et la pousser vers un registre privé :

Pour les utilisateurs de CPU ARM (Mac M1, M2, etc.), voir la page dédiée.

Utilisation de Linux

# construire l'image
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# connexion, une invite demandera le mot de passe
docker login -u '<NOM_UTILISATEUR_REGISTRE>' <URL_REGISTRE>

# ajouter une autre étiquette à votre image correspondant au registre
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# pousser l'image
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Utilisation de cmd

# construire l'image
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# connexion, une invite demandera le mot de passe
docker login -u <NOM_UTILISATEUR_REGISTRE> <URL_REGISTRE>

# ajouter une autre étiquette à votre image correspondant au registre
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# pousser l'image
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Utilisation de Powershell

# construire l'image
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# connexion, une invite demandera le mot de passe
docker login -u '<NOM_UTILISATEUR_REGISTRE>' <URL_REGISTRE>

# ajouter une autre étiquette à votre image correspondant au registre
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# pousser l'image
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Déployer le serveur sur Edgegap

Après vous être connecté sur le tableau de bord Edgegap, naviguez vers la page Applications & Jeux . Cliquez sur le Créer Nouveau bouton en haut à droite pour accéder au formulaire d'application. Voici les champs et comment les remplir correctement :

• Nom de l'application : Peut être n'importe quel nom notable que vous souhaitez utiliser pour reconnaître facilement votre application parmi les autres.

• Image : Peut être n'importe quelle image spécifique que vous souhaitez utiliser pour reconnaître facilement votre application parmi les autres.

• Nom de version : Vous pouvez utiliser un nom de version pour décrire la portée de la version que vous déployez. Des exemples peuvent être « demo », « production », « v1 », « v2 »

• Conteneur :

  • Registre : « [URL] », où [URL] est la valeur des identifiants affichables sur la page du dépôt de conteneurs.

  • Répertoire d'image : « [PROJET]/[VOTRE JEU] », où [PROJET] et [VOTRE JEU] sont les valeurs que vous avez utilisées précédemment lors de la poussée de l'image docker.

  • Tag : « [TAG] », où [TAG] est la valeur que vous avez utilisée précédemment lors de la poussée de l'image docker.

  • Cochez « Utiliser un dépôt privé »

  • Nom d'utilisateur du registre privé : « [NOM_UTILISATEUR] », où [NOM_UTILISATEUR] est la valeur de vos identifiants.

  • Jeton du registre privé : « [TOKEN] », où [TOKEN] est la valeur de vos identifiants.

  • Exigences : Laisser tel quel.

  • Ports : Cliquez sur le + Ajouter un port lien pour ajouter un nouveau port, et ajoutez les entrées suivantes :

    • 7778 - WS - activer la mise à niveau TLS (Bêta)

Si vous utilisez l'option WSS, il est important d'activer la mise à niveau TLS option. Sinon, vous rencontrerez des erreurs similaires à celle-ci dans les journaux de votre conteneur sur le tableau de bord Edgegap.

Les premiers octets du client n'étaient pas 'GET' pour la poignée de main, c'était plutôt 16-03-01

Une fois votre application créée, vous pouvez appuyer sur le API Deploy bouton pour poursuivre le déploiement de votre serveur de jeu. Une fois que le dernier statut de votre déploiement est défini sur Prêt, vous pourrez vous connecter au serveur avec une version client du jeu. Prenez note de l' Hôte url et, dans l'onglet Mapping des ports de votre déploiement, du port externe qui est publiquement disponible.

Tester le client

Dans l'éditeur

De retour dans l'éditeur Unity dans la scène des tanks, sélectionnez le NetworkManager gameObject et modifiez les paramètres suivants :

• Dans l'onglet Gestionnaire réseau composant :

  • Définissez le Adresse réseau par l' Hôte url du déploiement du serveur ;

  • Décochez le Auto Start Server Build .

• Dans l'onglet Simple Web Transport composant :

  • Définissez le Port valeur par l' port externe du déploiement Edgegap, par ex. : 32821;

  • Assurez-vous que l'option Client Use WSS est activée.

Une fois cela fait, cliquez sur Play dans l'éditeur, puis cliquez sur le Client bouton ; vous serez connecté au serveur et pourrez jouer au jeu après un court instant.

Sur Itch.io

Pour mettre votre client de jeu sur Itch, vous devrez créer une build client ; vous devrez installer le WebGL Build Support module pour votre version de Unity pour cela. Une fois cela fait, retournez dans Construction de l'éditeur Unity, sous Fichier -> Paramètres de compilation, et sélectionnez les options suivantes :

• Définir Plateforme vers WebGL;

• Ouvrez les Paramètres du lecteur. Sous Player -> Publishing Settings, définissez le Format de compression vers Gzip et assurez-vous que l'option Decompression Fallback est sélectionnée. Enregistrez ces paramètres et fermez la fenêtre.

Puis appuyez sur construire et sélectionnez un nouveau dossier vide nommé build comme destination de fichier. Transférez le build dossier dans un second dossier vide, qui sera appelé [CLIENT BUILD] dans ce document.

Une fois que votre jeu a fini de se construire, compressez les fichiers de ce build dossier dans une archive zip, en vous assurant qu'ils se trouvent à la racine de celle-ci. Ensuite, il vous suffit de télécharger l'archive zip dans votre projet Itch, et de vous assurer de sélectionner l'option pour que le fichier se joue dans le navigateur. Une fois que vous lancez le jeu, vous devez simplement vous assurer que l'adresse réseau et les valeurs de port sont correctement réglées dans le HUD, puis cliquer sur le Client bouton pour jouer.

Héberger le client sur Edgegap

Il est même possible d'héberger votre client de jeu sur Edgegap ! Pour ce faire, ajoutez le Dockerfile et nginx.conf au dossier [CLIENT BUILD] dossier :

Dockerfile

FROM nginx:alpine
MAINTENEUR <author_detail>

COPY build/ /usr/share/nginx/html
copy nginx.conf /etc/nginx/

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
worker_connections  1024;
}


http {
include       /etc/nginx/mime.types;
default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

include /etc/nginx/conf.d/*.conf;

server {
# Ajoutez la configuration suivante dans la configuration du serveur http
# ...

    # Les fichiers de données précompressés Brotli sur disque doivent être servis avec la compression activée :
    location ~ .+\.(data|symbols\.json)\.br$ {
        # Parce que ce fichier est déjà précompressé sur le disque, désactivez la compression à la demande pour celui-ci.
        # Sinon nginx tenterait une double compression.
        gzip off;
        add_header Content-Encoding br;
        default_type application/octet-stream;
    }

    # Fichiers JavaScript précompressés Brotli sur disque :
    location ~ .+\.js\.br$ {
        gzip off; # Ne pas tenter la compression gzip dynamique sur un fichier déjà compressé
        add_header Content-Encoding br;
        default_type application/javascript;
    }

    # Fichiers WebAssembly précompressés Brotli sur disque :
    location ~ .+\.wasm\.br$ {
        gzip off; # Ne pas tenter la compression gzip dynamique sur un fichier déjà compressé
        add_header Content-Encoding br;
        # Activez la compilation WebAssembly en streaming en spécifiant le bon type MIME pour
        # les fichiers Wasm.
        default_type application/wasm;
    }

    # Les fichiers de données précompressés gzip sur disque doivent être servis avec la compression activée :
    location ~ .+\.(data|symbols\.json)\.gz$ {
        gzip off; # Ne pas tenter la compression gzip dynamique sur un fichier déjà compressé
        add_header Content-Encoding gzip;
        default_type application/octet-stream;
    }

    # Fichiers JavaScript précompressés gzip sur disque :
    location ~ .+\.js\.gz$ {
        gzip off; # Ne pas tenter la compression gzip dynamique sur un fichier déjà compressé
        add_header Content-Encoding gzip;
        default_type application/javascript;
    }

    # Fichiers WebAssembly précompressés gzip sur disque :
    location ~ .+\.wasm\.gz$ {
        gzip off; # Ne pas tenter la compression gzip dynamique sur un fichier déjà compressé
        add_header Content-Encoding gzip;
        # Activez la compilation WebAssembly en streaming en spécifiant le bon type MIME pour
        # les fichiers Wasm.
        default_type application/wasm;
    }
}
}

Poursuivre avec les mêmes commandes Docker qu'auparavant pour construire et pousser une image de votre client de jeu vers un dépôt privé, mais depuis une fenêtre de commande ouverte dans le [CLIENT BUILD] dossier. Assurez-vous d'utiliser un nom d'image différent de celui de votre serveur.

Ensuite, créez une nouvelle application pour votre client sur le tableau de bord Edgegap avec les paramètres suivants :

• Nom de l'application : Peut être n'importe quel nom notable que vous souhaitez utiliser pour reconnaître facilement votre application parmi les autres.

• Image : Peut être n'importe quelle image spécifique que vous souhaitez utiliser pour reconnaître facilement votre application parmi les autres.

• Nom de version : Vous pouvez utiliser un nom de version pour décrire la portée de la version que vous déployez. Des exemples peuvent être « demo », « production », « v1 », « v2 »

• Conteneur :

  • Registre : « [URL] », où [URL] est la valeur des identifiants affichables sur la page du dépôt de conteneurs.

  • Répertoire d'image : « [PROJET]/[VOTRE JEU] », où [PROJET] et [VOTRE JEU] sont les valeurs que vous avez utilisées précédemment lors de la poussée de l'image docker.

  • Tag : « [TAG] », où [TAG] est la valeur que vous avez utilisée précédemment lors de la poussée de l'image docker.

  • Cochez « Utiliser un dépôt privé »

  • Nom d'utilisateur du registre privé : « [NOM_UTILISATEUR] », où [NOM_UTILISATEUR] est la valeur de vos identifiants.

  • Jeton du registre privé : « [TOKEN] », où [TOKEN] est la valeur de vos identifiants.

  • Exigences : Laisser tel quel.

  • Ports : Cliquez sur le + Ajouter un port lien pour ajouter un nouveau port, et ajoutez les entrées suivantes :

    • 80 - HTTPS

Une fois votre application créée, vous pouvez appuyer sur le API Deploy bouton pour poursuivre le déploiement de votre client de jeu. Avec les déploiements serveur et client définis sur Prêt, ouvrez l' Hôte url du client du jeu à la port externe spécifiée dans votre navigateur, et vous pourrez jouer au jeu après avoir configuré les bonnes valeurs dans le HUD du jeu !

Si vous avez besoin de plus d'informations sur l'intégration Mirror et websocket, vous pouvez vous référer à leur documentation.