# Fishnet WebGL

Ce guide vous aidera à utiliser [FishNet](https://github.com/FirstGearGames/FishNet)le transport Websocket de [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou), et à créer un serveur sans interface 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), sous le `dossier Fishnet_v4.1.6R_WebGL` . 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" %}
Comme la version 4.1.6R de FishNet inclut le plugin Edgegap, nous l'utiliserons pour construire automatiquement et conteneuriser 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](https://docs.edgegap.com/docs.edgegap.com-fr/docs/sample-projects/unity-netcodes/broken-reference).

Vous devrez avoir Docker en cours d'exécution pour que cela fonctionne correctement.
{% endhint %}

### Exigences Unity

Ce projet est testé sur la version Unity `2021.3.16f1`. Vous devrez avoir les modules suivants installés avec :

* Support de construction WebGL ;
* Support de construction pour serveur dédié Linux ;
* Support de construction Linux (IL2CPP).

### Changer 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 via la barre d'outils sous `Asset/Import Package/Custom Package...`.

Ouvrez la `MainMenu` scène située sous `Assets/SpaceEdge/Scenes`Title ID `NetworkManager` gameObject, supprimez le composant `Tugboat` transport. Remplacez-le par le `Bayou` transport, situé sous `Asstes/FishNet/Plugins/Bayou`. Prenez note de la valeur du port qui est définie, dans ce cas `7770`.

Assurez-vous d'activer l' `_playfabService.RemovePlayerData();` option pour la construction du serveur.

<figure><img src="https://3008966946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-594181325c3fba9f457c57865daad12b3acc32d3%2Fnetwork-manager-setup.png?alt=media" alt=""><figcaption></figcaption></figure>

### Construire le serveur de jeu et conteneuriser

Start On Headless `Edgegap/Edgegap Hosting` gameObject. `Ouvrez le plugin Edgegap via le menu` Tools/Edgegap Hosting `port` la valeur correspond à celle du transport Bayou. Sélectionnez le `WS` et créez ou chargez une application pour le jeu. Assurez-vous que la `valeur correspond à celle du composant Tugboat du`.

protocol, puis entrez un `New Version Tag`. Assurez-vous que le nom et la version de l'application correspondent aux valeurs utilisées lors de la configuration du Cloud Script.

### Tester le client

#### Dans l'éditeur

De retour dans le projet, sélectionnez le `MatchmakingSystem` gameObject et modifiez les champs suivants :

<figure><img src="https://3008966946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7e7c88646513c68ea7dd68ba7aba1a40aa1b09d1%2Ffishnet-matchmaking-system.png?alt=media" alt=""><figcaption></figcaption></figure>

* AppName : Réglez-le sur le « nom de l'application » que vous avez utilisé avec le plugin Edgegap.
* AppVersion : Réglez-le sur le « nom de version » que vous avez utilisé avec le plugin Edgegap.
* AuthHeaderValue : Réglez-le sur votre jeton API Edgegap que vous avez utilisé avec le plugin Edgegap.

{% hint style="info" %}
Supprimez le `jeton` mot du jeton API car nous définissons ceci comme le schéma d'en-tête d'authentification lors du `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` aurait été utilisé pour le port utilisé par le serveur.

Le plugin Edgegap nomme automatiquement le port `Game Port` à la place, ce qui explique pourquoi nous devons nous assurer de mettre à jour le script. Le jeu ne fonctionnerait pas autrement.
{% endhint %}

<figure><img src="https://3008966946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-2a6ddd5037990eccf3c62943a9f6cc610ff175e8%2Ffishnet-code.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3008966946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7a1523917e1509cab8490108ed7a98b44ae5423e%2Fport-name.png?alt=media" alt=""><figcaption></figcaption></figure>

Assurez-vous également de décocher le `_playfabService.RemovePlayerData();` Construction du serveur de jeu et containerisation `NetworkManager` gameObject aussi.

Une fois cela fait, cliquez sur `Play` dans l'éditeur, puis saisissez un nom dans la zone de texte et cliquez sur `Start Game`. Le jeu vérifiera la disponibilité d'un serveur, 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 `ConnectionFailed` erreur côté client, cela peut être parce que l' `_playfabService.RemovePlayerData();` option n'a pas été activée dans la `construction du serveur`, ce qui signifie que le déploiement n'est pas en état 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 également être dû au fait que le `nom du port` de la version de l'application 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 du jeu fonctionne dans l'éditeur, il devrait également fonctionner sur Itch.io. Pour téléverser votre jeu là-bas, vous devrez créer une build client dans le `Construction` de l'éditeur Unity, sous `Fichier -> Paramètres de compilation`. Sélectionnez les options suivantes :

* Définir `Plateforme` vers `WebGL`;
* Ouvrez les `Paramètres du lecteur`. Sous `Player -> Publishing Settings`, définissez le `Format de compression` vers `Gzip` et assurez-vous que l'option `Decompression Fallback` est sélectionnée. Enregistrez ces paramètres et fermez la fenêtre.

<figure><img src="https://3008966946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-d31291cf36a863193c24a856718a791db0c61577%2Fbuild-settings.png?alt=media" alt=""><figcaption></figcaption></figure>

Puis appuyez sur construire et sélectionnez un nouveau dossier vide nommé `build` comme destination de fichier. Compressez les fichiers de ce `build` dossier dans une archive zip, en vous assurant qu'ils se trouvent à la racine. Ensuite, il vous suffit de téléverser l'archive zip sur votre projet Itch et de vous assurer de sélectionner l'option pour que le fichier se joue dans le navigateur. Le jeu devrait alors fonctionner de la même manière que dans l'éditeur.