Salut,

Dans cette vidéo, nous allons vous montrer étape par étape comment configurer l'hébergement de serveur de jeu pour n'importe quel jeu WebGL / HTML5 multijoueur dans Unity en utilisant le plugin Edgegap, afin de rendre votre jeu en ligne et jouable dans le monde entier, en quelques minutes.

Commençons!

Chapitre 1: Exigences

Avant de pouvoir mettre votre jeu WebGL en ligne, il y a trois exigences à respecter pour garantir que tout fonctionne.

Tout d'abord, nous recommandons d'utiliser un netcode. Bien que cela ne soit pas obligatoire, cela facilite beaucoup les choses car cela vous permet d'utiliser un transport sans avoir à programmer et à mettre en œuvre votre propre solution de mise en réseau. Dans cet exemple, nous utiliserons Mirror Networking. Assurez-vous de télécharger la dernière version depuis le magasin d'actifs Unity. Un lien direct se trouve dans la description. Nous utiliserons également l'un des projets d'exemple de Mirror pour cet exemple.

Une fois que vous avez téléchargé Mirror depuis le magasin, importez-le en sélectionnant "Fenêtre" dans le menu supérieur, puis sélectionnez "Gestionnaire de paquets." Dans le menu déroulant, sélectionnez "Mes actifs" pour trouver le plugin Mirror. Pour les nouveaux utilisateurs, nous recommandons fortement de regarder les incroyables tutoriels de la communauté pour utiliser Mirror à son plein potentiel.

Deuxièmement, dans Unity, rendez-vous sur le Hub d'Unity pour confirmer que vous avez installé à la fois le module "Support de compilation de serveur dédié Linux" et le module "Support de compilation WebGL" dans votre projet. Si ce n'est pas le cas, cliquez simplement sur le package et installez-le. Assurez-vous de redémarrer Unity pour éviter les erreurs.

La troisième et dernière condition préalable est d'installer et de faire fonctionner Docker. Cela conteneurise vos serveurs de jeu pour aider à les déployer et à les faire fonctionner plus rapidement. Si ce n'est pas encore fait, vous pouvez regarder notre vidéo d'installation de Docker, ou vous rendre sur Docker.com et suivre la procédure d'installation. C'est facile et cela ne prend que quelques minutes. 

Chapitre 3: Édition de votre projet WebGL

Dans les actifs de votre projet, ouvrez la scène de jeu que vous souhaitez utiliser. Dans cet exemple, la nôtre se trouve sous "Mirror > Exemples > Tanks > Scènes."

Une fois la scène sélectionnée, cliquez sur l'objet de jeu "Gestionnaire de réseau". Son onglet inspecteur apparaît, et dans notre cas, à droite.

Faites défiler vers le bas jusqu'à ce que vous trouviez le composant "Transport KCP" et supprimez-le. Remplacez-le par le "Transport Web Simple", que vous pouvez faire glisser et déposer de vos actifs sous "Mirror > Transports > Web Simple."

Notez la valeur du port ici, car nous en aurons besoin pour le plugin Edgegap.

Enfin, assurez-vous de mettre à jour la valeur de transport du script "Gestionnaire de réseau" avec ce nouveau composant également.

De plus, assurez-vous que l'option "Démarrer automatiquement la compilation du serveur" est activée dans le script "Gestionnaire de réseau".

Chapitre 2: Hébergement de serveur de jeu avec Edgegap

Maintenant, utilisons le plugin Edgegap pour mettre votre jeu en ligne.

Tout d'abord, ouvrez le plugin Edgegap à partir de l'option "Edgegap" dans la barre de navigation, puis sélectionnez "Hébergement Edgegap."

Pour fonctionner, vous devrez générer un jeton. Pour ce faire, vous devez créer un compte Edgegap. Cliquez sur le bouton "Obtenir un jeton" qui ouvrira votre navigateur.

S'inscrire est gratuit et ne prend que quelques secondes.

Tout d'abord, sélectionnez "Commencer" en bas, puis à partir de l'écran de connexion, saisissez votre email et un mot de passe et acceptez nos conditions. Vous recevrez alors instantanément un email de vérification. Cliquez sur "Confirmer votre email" pour valider votre compte. Enfin, saisissez le nom de votre organisation et confirmez.   

Ceci est le tableau de bord de l'application Edgegap. Nous recommandons fortement de l'explorer avec la visite, mais nous allons l'omettre pour cette vidéo. Automatiquement, un pop-up avec votre jeton OneClick unique apparaît. Il vous suffit de le copier en cliquant sur l'icône du presse-papiers et de le coller directement dans la zone de texte du plugin. 

Ensuite, sélectionnez vérifier ce qui confirme que le jeton est valide. L'onglet "Informations sur l'application" s'ouvre maintenant automatiquement.

Si vous avez déjà une application sur notre plateforme, saisissez son nom dans la zone de texte et chargez-la en tant qu'application existante. Sinon, ce qui est le cas dans ce tutoriel, entrez simplement le nom de votre projet. Il doit être en minuscules, sans espaces.

Le bouton "Créer une application" est maintenant activé. Sélectionnez-le. Cela ouvre les onglets "Registre de conteneurs" et "Déploiement".

Le registre de conteneurs est l'endroit où le conteneur de votre serveur de jeu est stocké. Tout ce que vous devez faire est de vous assurer que les valeurs de port et de types de protocole correspondent à celles de votre transport de netcode afin de garantir que le serveur écoute correctement pour les connexions.

Dans cet exemple, assurez-vous que la valeur du port est la même que celle dans le composant "Transport Web Simple". Pour le type de protocole, sélectionnez "WS", ce qui signifie Web Socket, pour les projets WebGL.

À noter, le plugin Edgegap définit également automatiquement l'option de mise à niveau TLS pour garantir que la connexion est sécurisée.

"Nouvelle étiquette de version" fait référence à la version unique de votre serveur. Ce champ nécessite votre saisie manuelle. Nous recommandons de changer la valeur chaque fois que vous procédez à des mises à jour de votre serveur de jeu.

Pour les utilisateurs avancés, Edgegap offre la possibilité d'utiliser un "registre de conteneur personnalisé". Pour ce tutoriel, nous utiliserons celui par défaut d'Edgegap.

Avant-dernier étape, sélectionnez "Compiler et pousser". Cela compile automatiquement le projet en un serveur Linux dédié, puis crée un conteneur Docker qui est déployé dans le registre d'Edgegap.

La dernière étape consiste à créer un nouveau déploiement. Sous "Statut", vous verrez sa progression. Une fois prêt, une URL apparaît. Copiez-la en cliquant sur le bouton du presse-papiers, puis collez les informations dans l'onglet inspecteur du gestionnaire de réseau. Sous "Informations réseau", remplacez l'adresse réseau actuelle en collant l'URL. Assurez-vous de retirer le numéro de port et le deux-points.

Sous la section "Paramètres du serveur", saisissez la valeur du port dans le champ "Port", et assurez-vous d'activer l'option "Client utilise W S S" dans la section "Paramètres du client".

Désélectionnez l'option "Démarrer automatiquement la compilation du serveur", car cela vous permet de vous connecter en tant que client directement depuis l'éditeur d'Unity.

Enfin, démarrez votre scène de jeu en cliquant sur le bouton de lecture en haut de l'éditeur.

Félicitations, votre projet est maintenant prêt pour que le monde puisse y jouer!

Chapitre 3: Tests

Évidemment, testez d'abord les choses!

Assurez-vous que les valeurs sont correctement définies dans le HUD, puis cliquez sur "Client." Le jeu se connectera alors au serveur que nous avons déployé avec le plugin Edgegap.

Une fois que vous avez confirmé que cela fonctionne, vous pouvez fermer le jeu et arrêter le déploiement avec le plugin.

Si vous souhaitez mettre votre jeu sur Itch.io, il vous suffit d'aller dans "Paramètres de compilation," de sélectionner la plateforme "WebGL" et, dans les paramètres de votre projet sous "Joueur > Paramètres de publication," assurez-vous d'avoir le "Format de compression" défini sur "G ZIP" et l'option "Retombée de décompression" activée.

Enregistrez votre projet en utilisant le raccourci clavier "Contrôle + S".

Ensuite, compilez votre projet, et compressez vos fichiers puis téléchargez-les sur Itch.io!

Chapitre 4: Conclusion

C'est tout pour ce tutoriel!

Vous êtes invités à rejoindre la communauté Discord d'Edgegap pour développer et partager avec des développeurs de jeux comme vous.

Si vous voulez ajouter un gestionnaire de matchmaking, assurez-vous de regarder notre vidéo tutoriel.

Merci d'avoir regardé!