> 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/fishnet-on-edgegap-webgl.md).
# Fishnet WebGL
Ce guide vous aidera à utiliser [FishNet](https://github.com/FirstGearGames/FishNet)du transport WebSocket de [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou), et créer un serveur headless sur Edgegap pour un projet Unity.
Vous pouvez trouver le projet d'exemple final sur notre [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet), dans le `Fishnet_v4.1.6R_WebGL` dossier. Ce guide devrait fonctionner avec n'importe quelle version de FishNet, tant que vous utilisez la version appropriée de Bayou pour celle-ci.
{% hint style="info" %}
Puisque la version 4.1.6R de FishNet inclut le plugin Edgegap, nous allons l'utiliser pour construire et conteneuriser automatiquement notre serveur de jeu, même s'il est possible de le faire manuellement à l'aide d'un Dockerfile.
Pour plus d'informations sur le plugin, vous pouvez lire notre documentation [ici](broken://pages/e5bcfe39d003c66cd97b1db178a656d637bbc03a).
Vous devrez avoir Docker en cours d'exécution pour que cela fonctionne correctement.
{% endhint %}
### Prérequis Unity
Ce projet est testé sur la version Unity `2021.3.16f1`. Vous devrez y avoir installé les modules suivants :
* Prise en charge de la compilation WebGL ;
* Prise en charge de la compilation du serveur dédié Linux ;
* Prise en charge de la compilation Linux (IL2CPP).
### Changez le transport
Téléchargez le package Unity pour Bayou sur [ce GitHub](https://github.com/FirstGearGames/Bayou/releases). Importez le package dans le projet de jeu avec la barre d'outils via `Asset/Import Package/Custom Package...`.
Ouvrez la `MainMenu` scène située sous `Assets/SpaceEdge/Scenes`. Dans le `NetworkManager` gameObject, supprimez le `Tugboat` composant de transport. Remplacez-le par le `Bayou` transport, situé sous `Asstes/FishNet/Plugins/Bayou`. Notez la valeur du port définie, dans ce cas `7770`.
Assurez-vous d'activer l' `Start On Headless` pour la compilation du serveur.
### Compilation du serveur de jeu et conteneurisation
Ouvrez le plugin Edgegap via le `menu de la barre d'outils Tools/Edgegap Hosting` de la barre d'outils. Vérifiez votre `jeton d'API Edgegap` et créez ou chargez une application pour le jeu. Assurez-vous que la `port` valeur correspond à celle du transport Bayou. Sélectionnez le `WS` protocole, puis saisissez une `nouvelle balise de version`.
Une fois cela correctement configuré, cliquez sur `Construire et publier`, ce qui conteneurisera automatiquement votre serveur de jeu et créera une nouvelle version de l'application sur le tableau de bord Edgegap après un court délai d'attente.
### Tester le client
#### Dans l'éditeur
De retour dans le projet, sélectionnez le `MatchmakingSystem` gameObject et modifiez les champs suivants :
* AppName : définissez-la sur le « nom de l'application » que vous avez utilisé avec le plugin Edgegap.
* AppVersion : définissez-la sur le « nom de version » que vous avez utilisé avec le plugin Edgegap.
* AuthHeaderValue : définissez-la sur votre jeton API Edgegap utilisé avec le plugin Edgegap.
{% hint style="info" %}
Supprimez le `jeton` mot de votre jeton API, car nous le définissons comme schéma de l'en-tête d'authentification pendant le `Awake()` méthode du `MatchmakingSystem`.
{% endhint %}
Ouvrez la `MatchmakingSystem` script, situé sous `Assets/SpaceEdge/Scripts/Systems`, où vous pouvez également mettre à jour ces mêmes valeurs. Recherchez `"UDP_PORT"` et remplacez-le par `"Game Port"`.
{% hint style="info" %}
Les versions précédentes de cet exemple créaient manuellement l'application via le tableau de bord Edgegap, et le nom `UDP_PORT` serait utilisé pour le port utilisé par le serveur.
Le plugin Edgegap nomme automatiquement le port `Game Port` à la place, c'est pourquoi nous devons nous assurer de mettre à jour le script. Sinon, le jeu ne fonctionnera pas.
{% endhint %}
Assurez-vous de décocher l' `Start On Headless` option dans le `NetworkManager` gameObject également, puisque nous voulons maintenant tester l'intégration du client.
Une fois cela fait, cliquez sur `Jouer` dans l'éditeur, puis saisissez un nom dans la zone de texte et cliquez sur `Démarrer le jeu`. Le jeu vérifiera s'il existe un serveur disponible, ou en déploiera automatiquement un s'il n'en existe aucun, avant de s'y connecter.
{% hint style="warning" %}
S'il y a une `Échec de connexion` erreur côté client, cela peut être dû au fait que l' `Start On Headless` option n'a pas été activée dans la `compilation du serveur`, ce qui signifie que le déploiement n'est pas dans un état permettant d'accepter des connexions, puisque le serveur n'a jamais démarré correctement. Assurez-vous que l'option est activée avant de réessayer en créant une nouvelle image de conteneur et une nouvelle version d'application.
Cela peut aussi être dû au fait que le `nom du port` n'est pas le même que dans le `MatchmakingSystem` script. Assurez-vous que les deux ont le même nom, dans ce cas `"Game Port"`, avant de réessayer.
{% endhint %}
#### Sur Itch.io
Une fois que vous avez confirmé que le client de jeu fonctionne dans l'éditeur, il devrait également fonctionner sur Itch.io. Pour y téléverser votre jeu, vous devrez créer une compilation client dans l' `build` de l'éditeur Unity, sous `Fichier -> Paramètres de compilation`. Sélectionnez les options suivantes :
* Définissez `Plateforme` pour `WebGL`;
* Ouvrez les `Paramètres du joueur`. Sous `Player -> Publishing Settings`, définissez le `format de compression` pour `Gzip` et assurez-vous que l' `solution de secours de décompression` est sélectionnée. Enregistrez ces paramètres et fermez la fenêtre.
Puis cliquez sur build et sélectionnez un nouveau dossier vide nommé `build` comme destination du fichier. Compressez les fichiers de ce `build` dossier dans un dossier zip, en veillant à ce qu'ils se trouvent à sa racine. Il vous suffit ensuite de téléverser le dossier zip vers votre projet Itch, et de vous assurer de sélectionner l'option permettant de jouer au fichier dans le navigateur. Le jeu devrait alors fonctionner de la même manière que dans l'éditeur.