> For the complete documentation index, see [llms.txt](https://docs.edgegap.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.edgegap.com/fr/docs/sample-projects/unity-netcodes/mirror-on-edgegap-websocket.md). # Mirror WebGL Ce guide vous aidera à utiliser [Mirror](https://mirror-networking.com/)de 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](https://github.com/edgegap/mirror-webgl) ### Exemple de billard Si vous préférez suivre un tutoriel vidéo pas à pas utilisant l'exemple de billard, regardez ici : {% embed url="" %} {% hint style="success" %} Cette vidéo présente un processus de compilation mis à jour utilisant les derniers [Unity](/fr/unity.md) outils de compilation. {% endhint %} ### 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 {% hint style="info" %} 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](https://github.com/edgegap/edgegap-unity-plugin) pour automatiser le processus. Pour plus d'informations sur l'utilisation de ce plugin, vous pouvez consulter notre [documentation](broken://pages/e5bcfe39d003c66cd97b1db178a656d637bbc03a). Si vous préférez, vous pouvez également suivre ces instructions pas à pas. {% endhint %} 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 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é : {% hint style="warning" %} Pour les utilisateurs de CPU ARM (Mac M1, M2, etc.), ajoutez l'option `--platform linux/amd64` à votre commande de build. {% endhint %} #### Sous Linux ```bash # construire l'image docker build . -t : # connexion, une invite demandera le mot de passe docker login -u '' # ajouter un autre tag à votre image correspondant au registre docker image tag : //: # pousser l'image docker push //: ``` #### Sous cmd ```bash # construire l'image docker build . -t : # connexion, une invite demandera le mot de passe docker login -u # ajouter un autre tag à votre image correspondant au registre docker image tag : //: # pousser l'image docker push //: ``` #### Sous Powershell ```bash # construire l'image docker build . -t : # connexion, une invite demandera le mot de passe docker login -u '' # ajouter un autre tag à votre image correspondant au registre docker image tag : //: # pousser l'image docker push //: ``` ### 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) {% hint style="warning" %} 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. ```cmd Les premiers octets du client n'étaient pas 'GET' pour la négociation, mais étaient 16-03-01 ``` {% endhint %}
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 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](#bootsh) 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 !
{% hint style="info" %} Si vous avez besoin de plus d'informations sur l'intégration Mirror et le websocket, vous pouvez consulter leur [documentation](https://mirror-networking.gitbook.io/docs/manual/transports/websockets-transport). {% endhint %}