Mirror WebGL

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

Ce guide utilisera le projet d'exemple open-source Tanksdisponible 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 sur la scène de base avant d'être prêts à construire le serveur du jeu.

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

• Dans le NetworkManager gameObject, supprimez le KcpTransport script et remplacez-le 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 également que l'option Auto Start Server Build est sélectionnée.

• Selon votre version de Mirror, vous pourriez avoir besoin de changer/mette à jour le NetworkManagerHUD pour le faire fonctionner avec des transports différents de 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é [GAME PORT]. Dans ce cas, le port utilisé est 7778.

Construire le serveur de jeu & Conteneurisation

Pour faciliter le processus de conteneurisation et de déploiement, il est possible d'utiliser la dernière version du plugin Unity Edgegap 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 que votre jeu est prêt, rendez-vous sur la Build écran de l'éditeur Unity, sous File -> Build Settings dans les menus en haut. Assurez-vous de sélectionner les bons préréglages en fonction de votre version d'Unity.

• Avant la version 2021.2 :

  • Définissez Target Platform sur Linux;

  • Définissez Architecture sur x86_64;

  • Cochez l'option Server Build .

• Sinon :

  • Définissez Platform sur Dedicated Server;

  • Définissez Target Platform sur Linux.

Puis appuyez sur build et sélectionnez un nouveau dossier vide nommé linux_server comme destination du fichier. Transférez le linux_server dossier vers un deuxième dossier vide, qui sera appelé [SERVER BUILD] dans ce document. Ajoutez les fichiers suivants Dockerfile et boot.sh au dossier [SERVER BUILD] :

Dockerfile

FROM ubuntu:bionic
MAINTAINER <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/[YOUR GAME].x86_64 -batchmode -nographics

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

Ensuite, ouvrez une invite de commande dans le [SERVER BUILD] 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.), ajoutez --platform linux/amd64 option à votre commande de build.

Utilisation de Linux

# build the image
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# login, a prompt will ask the password
docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>

# add another tag to your image corresponding to the registry
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

#push the image
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Utilisation de cmd

# build the image
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# login, a prompt will ask the password
docker login -u <REGISTRY_USERNAME> <REGISTRY_URL>

# add another tag to your image corresponding to the registry
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

#push the image
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Utilisation de Powershell

# build the image
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# login, a prompt will ask the password
docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>

# add another tag to your image corresponding to the registry
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

#push the image
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Déployer le serveur sur Edgegap

Après s'être connecté au tableau de bord Edgegap, naviguez vers la page Applications & Games Cliquez sur le Create New 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 d'autres.

• Image : Peut être n'importe quelle image spécifique que vous souhaitez utiliser pour reconnaître facilement votre application parmi d'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 :

  • Registry : « [URL] », où [URL] est la valeur des identifiants que vous pouvez afficher sur la page du dépôt de conteneurs.

  • Image repository : « [PROJECT]/[YOUR GAME] », où [PROJECT] et [YOUR GAME] 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 « Using a private repository »

  • Nom d'utilisateur du registre privé : « [USERNAME] », où [USERNAME] 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 + Add port lien pour ajouter un nouveau port, et ajoutez les entrées suivantes :

    • 7778 - WS - enable TLS Upgrade (Beta)

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

First bytes from client was not 'GET' for handshake, instead was 16-03-01

Une fois que votre application a été créée, vous pouvez appuyer sur le 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 Ready, vous pourrez vous connecter au serveur avec une version cliente du jeu. Prenez note de l' Host url et, dans l'onglet Port Mapping de votre déploiement, du port externe qui est disponible publiquement.

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 le Network Manager composant :

  • Définissez le Network Address sur l' Host url ;

  • Décochez le Auto Start Server Build .

• Dans le Simple Web Transport composant :

  • Définissez le Port valeur sur le port externe deploiement Edgegap par exemple : 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 bouton Client ; 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 faire une compilation client ; Vous devrez installer le module WebGL Build Support pour votre version d'Unity pour cela. Une fois cela fait, revenez au Build écran de l'éditeur Unity, sous File -> Build Settingset sélectionnez les options suivantes :

• Définissez Platform sur WebGL;

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

Puis appuyez sur build et sélectionnez un nouveau dossier vide nommé build comme destination du fichier. Transférez le build dossier vers un deuxième dossier vide, qui sera appelé [CLIENT BUILD] dossier dans ce document.

Une fois que votre jeu a terminé la compilation, compressez les fichiers de ce build dossier dans un dossier zip, en vous assurant qu'ils se trouvent à la racine de celui-ci. Ensuite, il vous suffit de télécharger le dossier zip sur votre projet Itch et de vous assurer de sélectionner l'option pour que le fichier puisse être lu dans le navigateur. Une fois que vous lancez le jeu, vous devez simplement vous assurer que les valeurs d'adresse réseau et de port sont correctement définies 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 fichier suivant Dockerfile et nginx.conf au dossier [CLIENT BUILD] :

Dockerfile

FROM nginx:alpine
MAINTAINER <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 de 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 de 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 de 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 de 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 de 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;
    }
}
}

Procédez 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 dossier [CLIENT BUILD] . 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 d'autres.

• Image : Peut être n'importe quelle image spécifique que vous souhaitez utiliser pour reconnaître facilement votre application parmi d'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 :

  • Registry : « [URL] », où [URL] est la valeur des identifiants que vous pouvez afficher sur la page du dépôt de conteneurs.

  • Image repository : « [PROJECT]/[YOUR GAME] », où [PROJECT] et [YOUR GAME] 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 « Using a private repository »

  • Nom d'utilisateur du registre privé : « [USERNAME] », où [USERNAME] 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 + Add port lien pour ajouter un nouveau port, et ajoutez les entrées suivantes :

    • 80 - HTTPS

Une fois que votre application a été créée, vous pouvez appuyer sur le Deploy bouton pour procéder au déploiement de votre client de jeu. Avec les déploiements du serveur et du client définis sur Ready, ouvrez l' Host url du client de jeu à la port externe spécifiée dans votre navigateur, et vous pourrez jouer au jeu après avoir défini les bonnes valeurs dans le HUD du jeu !

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