Mirror WebGL

Ce guide vous aidera à utiliser Mirrorde son transport Websocket et à créer un serveur sans interface graphique 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

Exemple de billard

Si vous préférez suivre un tutoriel vidéo pas à pas utilisant l'exemple de billard, regardez ici :

Cette vidéo présente un processus de compilation mis à jour utilisant les derniers Unity outils de compilation.

Changer le transport

Nous devons d'abord apporter quelques modifications à la scène de base avant d'être prêts à compiler le serveur de 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 de script avec ce nouveau transport. Assurez-vous que l'option Auto Start Server Build est également sélectionnée.
Selon votre version de Mirror, vous devrez peut-être modifier/mettre à jour le NetworkManagerHUD afin qu'il fonctionne 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.

Notez le port utilisé pour les communications réseau, appelé le [GAME PORT]. Dans ce cas, le port utilisé est 7778.

Compilation du serveur de jeu et 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 pas à pas.

Une fois votre jeu prêt, rendez-vous sur le Build de l'éditeur Unity, sous File -> Build Settings dans les menus du 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 la plateforme cible sur Linux;
- Définissez architecture sur x86_64;
- Cochez l'option Server Build .
Sinon :
- Définissez Plateforme sur Serveur dédié;
- Définissez la plateforme cible 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é le [SERVER BUILD] dossier dans ce document. Ajoutez les Dockerfile et boot.sh fichier dans le [SERVER BUILD] dossier :

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é

Puis, démarrez une invite de commandes 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 l'option --platform linux/amd64 à votre commande de build.

Sous Linux

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

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

# ajouter un autre tag à 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>

Sous cmd

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

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

# ajouter un autre tag à 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>

Sous Powershell

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

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

# ajouter un autre tag à 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é au tableau de bord Edgegap, rendez-vous sur la page Applications et jeux Cliquez sur le Créer une nouvelle bouton en haut à droite pour accéder au formulaire de l'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 vouloir utiliser un nom de version pour décrire la portée de la version que vous déployez. Exemples : « démo », « production », « v1 », « v2 »
Conteneur :
- Registre : « [URL] », où [URL] est la valeur issue des identifiants que vous pouvez afficher sur la page du dépôt de conteneurs.
- Dépôt d'images : « [PROJECT]/[YOUR GAME] », où [PROJECT] et [YOUR GAME] sont les valeurs que vous avez utilisées précédemment lors de l'envoi de l'image Docker.
- Tag : « [TAG] », où [TAG] est la valeur que vous avez utilisée précédemment lors de l'envoi de l'image Docker.
- Cochez « Utiliser un dépôt privé »
- 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 + 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 l'option Mise à niveau TLS Sinon, vous rencontrerez dans les journaux de votre conteneur sur le tableau de bord Edgegap des erreurs similaires à celle-ci.

Les premiers octets du client n'étaient pas 'GET' pour la négociation, mais étaient 16-03-01

Une fois votre application créée, vous pouvez appuyer sur le Déployer bouton pour procéder au 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. Notez le Hôte url et, dans l'onglet de mappage des ports de votre déploiement, le port externe accessible publiquement.

Tester le client

Dans l'éditeur

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

Dans le Network Manager composant :
- Définissez l'adresse réseau sur l'URL du déploiement du serveur Hôte ;
- Décochez l'option Auto Start Server Build .
Dans le Simple Web Transport composant :
- Définissez Port la valeur du déploiement Edgegap port externe 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 ; pour cela, vous devrez installer le module WebGL Build Support pour votre version d'Unity. Une fois que c'est fait, revenez à la Build de l'éditeur Unity, sous File -> Build Settings, et sélectionnez les options suivantes :

Définissez Plateforme sur WebGL;
Ouvrez le Paramètres du joueur. Sous Player -> Publishing Settings, définissez le Format de compression sur Gzip et assurez-vous que l'option Solution de repli de décompression 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é le [CLIENT BUILD] dossier dans ce document.

Une fois la compilation de votre jeu terminée, compressez les fichiers de ce build dossier dans un dossier zip, en vous assurant qu'ils se trouvent à la racine de celui-ci. Il vous suffit ensuite de téléverser le dossier zip sur votre projet Itch, et de vous assurer de sélectionner l'option permettant de jouer au fichier dans le navigateur. Une fois le jeu lancé, vous devez simplement vous assurer que les valeurs de l'adresse réseau et du port sont correctement définies dans le HUD, puis cliquez 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 fichier dans le [CLIENT BUILD] dossier :

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$ {
        # Comme ce fichier est déjà précompressé sur 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 de code JavaScript précompressés Brotli sur disque :
    location ~ .+\.js\.br$ {
        gzip off; # N'essayez pas d'appliquer une compression gzip dynamique à 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; # N'essayez pas d'appliquer une compression gzip dynamique à un fichier déjà compressé
        add_header Content-Encoding br;
        # Activez la compilation WebAssembly en flux 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; # N'essayez pas d'appliquer une compression gzip dynamique à un fichier déjà compressé
        add_header Content-Encoding gzip;
        default_type application/octet-stream;
    }

    # Fichiers de code JavaScript précompressés gzip sur disque :
    location ~ .+\.js\.gz$ {
        gzip off; # N'essayez pas d'appliquer une compression gzip dynamique à 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; # N'essayez pas d'appliquer une compression gzip dynamique à un fichier déjà compressé
        add_header Content-Encoding gzip;
        # Activez la compilation WebAssembly en flux 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 [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 vouloir utiliser un nom de version pour décrire la portée de la version que vous déployez. Exemples : « démo », « production », « v1 », « v2 »
Conteneur :
- Registre : « [URL] », où [URL] est la valeur issue des identifiants que vous pouvez afficher sur la page du dépôt de conteneurs.
- Dépôt d'images : « [PROJECT]/[YOUR GAME] », où [PROJECT] et [YOUR GAME] sont les valeurs que vous avez utilisées précédemment lors de l'envoi de l'image Docker.
- Tag : « [TAG] », où [TAG] est la valeur que vous avez utilisée précédemment lors de l'envoi de l'image Docker.
- Cochez « Utiliser un dépôt privé »
- 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 + 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 Déployer bouton pour procéder au déploiement de votre client de jeu. Lorsque les déploiements du serveur et du client sont tous les deux définis sur Prêt, ouvrez l' Hôte URL du client de jeu à l'adresse spécifiée port externe dans votre navigateur, et vous pourrez jouer au jeu après avoir défini les bonnes valeurs dans le HUD du jeu !