WebGL / HTML5 - Serveurs de jeux Web multijoueurs et hébergement - Tutoriel
Bonjour,
Dans ce tutoriel, nous couvrirons chaque étape sur la façon de déployer et d'héberger facilement un serveur de jeu pour n'importe quel jeu multijoueur Unity WebGL afin de le rendre jouable en ligne. Les serveurs dédiés, contrairement aux relais, réduisent la latence, sont compatibles entre plateformes et évitent les problèmes NAT courants.
Nous mettrons également en avant comment publier le jeu sur Itch.IO.
Passons à l'action.
Nous recommandons fortement de suivre notre documentation adaptée à cet exemple. Ce qui suit doit vous aider à suivre la vidéo ci-dessus.
Il y a deux exigences principales pour ce projet. La première est de télécharger et d'installer Docker, pour aider à containeriser le serveur de jeu. Docker est utilisé par des millions d'utilisateurs et les plus grandes entreprises du monde.
Deuxièmement, il faut télécharger notre projet Mirror WebGL sur GitHub. En utilisant le lien dans notre description, nos commentaires ou notre documentation, cliquez sur le bouton vert “Code” une fois sur la page et sélectionnez “Télécharger ZIP”.
Dans votre dossier, il suffit d'extraire le fichier.
Avertissement
Assurez-vous d'ajouter le plugin Unity d'Edgegap en utilisant "Ajouter un projet à partir de Git" pour vous assurer d'utiliser la dernière version du projet.
Sélectionnez "Fenêtre" puis "Gestionnaire de paquets"
Cliquez sur l'icône "+", puis sélectionnez "Ajouter un projet depuis Git"
Collez l'URL du plugin Unity d'Edgegap : "https://github.com/edgegap/edgegap-unity-plugin.git"
Sélectionnez "Installer"
Maintenant dans Unity.
En partant d'un tout nouveau projet depuis le HUB de Unity, sélectionnez "Installer l'éditeur" et choisissez la dernière version “Unity 6 LTS”. Au moment de l'enregistrement, Unity 6.0 est la version actuelle “long-terme” ou LTS.
Les versions plus récentes peuvent avoir des améliorations progressives mais sont très susceptibles de casser certaines fonctionnalités. En tant que tel, nous recommandons fortement d'utiliser la dernière version principale LTS pour garantir que la compatibilité fonctionne sur cet exemple, et votre projet de développement en général.
Cliquez sur “Installer” et assurez-vous que les deux modules “Linux Build Support” de “(Mono)” et “(IL2CPP)” sont sélectionnés, ainsi que les modules “Linux Dedicated Server Build Support” et “Web Build Support”. Installez-le.
Maintenant, revenez au menu du projet, sélectionnez “Ajouter” puis “Ajouter depuis le disque”. Localisez le projet WebGL et sélectionnez son dossier principal.
Ici, Unity risque de vous avertir d'une version manquante de Unity. Comme indiqué précédemment, la dernière LTS au moment de l'enregistrement est “6000.0.56.f1”. Ignorez cet avertissement et sélectionnez la dernière version LTS. Bien que vous puissiez utiliser la dernière version recommandée, sachez qu'elle pourrait casser le projet. Même chose une fois que l'éditeur se charge, sélectionnez “Continuer” et ignorez l'avertissement.
Après un temps de chargement, un autre avertissement concernant les packages obsolètes est émis par Unity. Vous pouvez l'examiner, mais pour ce projet, nous allons simplement l'ignorer. Fermez le menu “Profil de build” s'il apparaît, nous allons effacer les erreurs de la console pour recommencer à zéro.
Maintenant, sélectionnez “Projet” en bas à gauche, puis allez dans le dossier “Mirror”, puis “Exemples” et sélectionnez “Billiards.” Nous allons ouvrir l'exemple “Billiards” comme notre projet de base.
La première étape consiste à ouvrir “NetworkManager” à gauche. Dans l'inspecteur, veillez à supprimer le “KCP Transport (Script)” en cliquant sur les trois points et en sélectionnant “Supprimer les composants”.
Ensuite, sélectionnez “Ajouter un composant”, nous allons ajouter le “Simple Web Transport” qui est destiné à être utilisé avec les projets WebGL.
Ensuite, sélectionnez le menu “Network Manager”, assurez-vous que “Ne pas détruire lors du chargement” est sélectionné, et que le “Mode de démarrage sans tête” est défini sur “Démarrage automatique du serveur”.
Vous remarquerez également que le “Transport” est manquant. Ajoutez-le en sélectionnant l'icône hexagonale et en sélectionnant le “Transport Manager (Simple)” de Mirror.
Le moyen le plus simple d'ajouter l'hébergement de serveur de jeux directement dans l'éditeur de Unity est d'ajouter le projet Git du plugin d'Edgegap via le Gestionnaire de paquets de Unity.
Dans la barre de navigation en haut, sélectionnez “Fenêtre”, puis “Gestionnaire de paquets”.
Si Edgegap existe déjà dans votre projet, supprimez-le en sélectionnant “supprimer”.
Le plugin Edgegap est hébergé sur GitHub. Copiez cette URL, en veillant à ce qu'elle inclut le ".git" à la fin :
https://github.com/edgegap/edgegap-unity-plugin.git
Dans Unity, sélectionnez l'icône “plus” dans le Gestionnaire de paquets, puis “Installer le paquet depuis l'URL Git”.
Ensuite, collez l'URL ci-dessus et sélectionnez “Installer”.
Après quelques secondes, le plugin Edgegap sera automatiquement installé. Ouvrez-le simplement sous “Outils”.
Dans l'exemple, ouvrez “Outils” depuis le menu de navigation en haut, puis “Hébergement de serveur Edgegap” qui ouvre le plugin.
Cliquez sur “Se connecter à Edgegap” pour créer un compte Edgegap gratuit. Sélectionnez votre méthode de connexion, comme Google ou GitHub, comme indiqué ici, et créez votre organisation.
Ceci est le tableau de bord de l'application Edgegap. Copiez le OneClick Token en sélectionnant l'icône du presse-papiers.
Revenez à Unity. Sélectionnez “Valider le token”.
Automatiquement, l'onglet “Construisez votre serveur de jeu” s'ouvre automatiquement.
Tout d'abord, vous pouvez valider si les dépendances Linux fonctionnent en sélectionnant “Installer”. Comme nous l'avons fait plus tôt, il affiche “exigences installées”.
Ensuite, nous devons nous assurer que notre scène de jeu est sélectionnée. Sous “Paramètres de build de Unity”, sélectionnez “Modifier les paramètres” et sous “Liste des scènes”, sélectionnez le bouton “Ajouter les scènes ouvertes”. Ici, comme vous pouvez le voir, la scène Billards de Mirror est maintenant incluse dans le serveur de jeu.
Sélectionnez “Construire le serveur” qui compile le serveur de jeu. Sélectionnez “enregistrer” pour confirmer qu'il inclut les dernières modifications apportées à la scène.
Après quelques secondes, le build se compile avec succès.
Sous “Containerisez votre serveur”, confirmez que Docker Desktop est en cours d'exécution en sélectionnant “Valider”. Sinon, ouvrez Docker.
Nous allons passer tous les paramètres optionnels pour cette vidéo, mais pour les utilisateurs avancés, les détails de leur utilisation se trouvent dans notre documentation.
Passons à l'étape suivante et sélectionnons “Containerisez avec Docker”.
Après une courte période, la containerisation est réussie.
L'étape suivante consiste à tester notre serveur de jeu localement. Il existe des paramètres optionnels supplémentaires, mais pour cette vidéo, nous allons simplement sélectionner “Déployer le conteneur local”.
Une fois terminé, nous pouvons confirmer qu'il fonctionne localement dans Docker Desktop.
Pour le rendre disponible en ligne, l'étape suivante consiste à télécharger le serveur de jeu sur la plateforme d'Edgegap.
Assurez-vous que la bonne application est sélectionnée et cliquez sur le bouton “Télécharger l'image et créer une version d'application”.
Après quelques secondes, un navigateur web s'ouvre vers la plateforme. Cette page “Créer une version” est pré-remplie, mais vous pouvez configurer des paramètres optionnels, y compris l'utilisation des ressources vCPU, la mémoire, etc., mais nous allons créer une nouvelle version avec les paramètres par défaut.
Faites défiler vers le bas et sélectionnez “Soumettre”.
La fenêtre contextuelle “Créer un port” s'ouvre. Ici, assurez-vous de changer le port en 7778 qui est dédié au Simple Web Transport défini par Mirror. Cela peut être différent avec d'autres netcodes. Assurez-vous de consulter votre documentation Netcode pour le port exact à votre cas d'utilisation.
Ensuite, sélectionnez le type de protocole “WS” utilisé pour les jeux web. Nous allons également sélectionner la mise à niveau TLS pour ajouter un conteneur proxy afin de mettre à niveau votre application vers un port sécurisé.
De retour dans Unity, nous devons déployer le serveur de jeu containerisé précédemment. Sélectionnez la version d'application correcte dans la liste qui est visible en sélectionnant le champ “Version de l'application”.
Enfin, sélectionnez “Déployer dans le cloud”, ce qui déploie automatiquement le serveur de jeu sur la plateforme d'Edgegap. Après quelques secondes de chargement, votre serveur de jeu est prêt. Félicitations, votre jeu est maintenant en ligne pour que le monde puisse y jouer !
Évidemment, testez d'abord les choses. Commencez par sélectionner le déploiement.
Ceci est la page des détails du déploiement de votre serveur de jeu.
Elle contient beaucoup d'informations, mais pour que nous puissions nous connecter au serveur de jeu, nous allons faire défiler vers le bas et copier le Port Externe, ici dans notre exemple, il est 32360 mais cela est unique à chaque déploiement.
Retournez à Unity et ouvrez l'onglet de l'inspecteur du Gestionnaire de Réseau.
Sélectionnez “Transport Web Simple” et sous “Port”, collez votre nouveau Port Externe.
Retournez à la page de déploiement et copiez l'URL “Hôte”. Collez-la dans le champ “Adresse Réseau”.
Retournez à la scène de jeu et démarrez-la en sélectionnant le bouton “jouer”.
Comme vous pouvez le voir, l'URL et le Port sont déjà présents. Sélectionnez “Client”, la scène de jeu se connecte avec succès au serveur cloud déployé par Edgegap.
Félicitations, vous jouez à votre multijoueur en ligne !
Si vous souhaitez publier votre jeu sur Itch.io et tester véritablement votre jeu depuis un navigateur web, sélectionnez “Fichiers” dans le menu supérieur.
Dans “Profils de Construction”, sélectionnez l'onglet “Paramètres du Projet”. Sélectionnez “Joueur” dans le menu de gauche. Bien que vous puissiez entrer votre nom d'organisation et des versions, la seule exigence est de sélectionner “GZIP” comme format de compression sous la section “Paramètres de Publication”.
Enfin, retournez au Profil de Construction et sous “Web”, sélectionnez “Construire” pour créer le jeu pour publication. Enregistrez votre projet dans un dossier de votre choix.
Une fois le processus de construction terminé, créez une archive “.zip” du dossier.
Rendez-vous sur Itch.io. Si vous ne l'avez pas déjà fait, créez un compte Itch.
Maintenant, sélectionnez “Créer un Nouveau Projet” et remplissez le titre, puis sélectionnez “HTML” comme type de projet. Faites défiler vers le bas et téléchargez l'archive zip sur Itch.io.
Une fois le fichier téléchargé, sélectionnez l'option “Ce fichier sera joué dans le navigateur” et, sous les “Options d'Intégration”, sélectionnez “Cliquer pour lancer en Plein Écran”. Enfin, sélectionnez la visibilité que vous souhaitez, ici nous allons sélectionner “Public” et cliquer sur le bouton “Enregistrer & Voir la Page”.
Une fois la page chargée, sélectionnez “exécuter” pour lancer le jeu. Nous allons ouvrir un deuxième navigateur en utilisant la même URL que le jeu initial.
Félicitations, vous jouez maintenant à votre multijoueur WebGL en ligne sur Itch.io !
C'est tout pour le plugin Edgegap pour Unity pour WebGL, qui permet aux développeurs de jeux d'avoir des serveurs de jeux automatisés et un hébergement simple.
La prochaine étape probable dans le développement de votre jeu sera de connecter les joueurs automatiquement. Pour plus d'informations sur le système de matchmaking simple et entièrement automatisé d'Edgegap, vous pouvez consulter notre tutoriel.
Merci !
