# Fishnet WebGL

Это руководство поможет вам использовать [FishNet](https://github.com/FirstGearGames/FishNet)транспорт Websocket, [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou), и создать безголовый сервер на Edgegap для проекта Unity.

Вы можете найти окончательный пример проекта на нашем [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet), в разделе `Fishnet_v4.1.6R_WebGL` папки. Это руководство должно работать с любой версией Fishnet, при условии, что вы используете соответствующую версию Bayou для неё.

{% hint style="info" %}
Поскольку FishNet версии 4.1.6R поставляется с включённым плагином Edgegap, мы будем использовать его для автоматической сборки и контейнеризации нашего игрового сервера, хотя это можно сделать и вручную с помощью Dockerfile.

Для получения дополнительной информации о плагине вы можете прочитать нашу документацию [здесь](https://docs.edgegap.com/ru/docs/sample-projects/unity-netcodes/broken-reference).

Вам необходимо, чтобы Docker был запущен, чтобы всё работало корректно.
{% endhint %}

### Требования Unity

Этот проект протестирован на версии Unity `2021.3.16f1`. С ней необходимо установить следующие модули:

* Поддержка сборки WebGL;
* Поддержка сборки выделенного сервера Linux;
* Поддержка сборки Linux (IL2CPP).

### Переключить транспорт

Скачайте пакет Unity для Bayou на [этом GitHub](https://github.com/FirstGearGames/Bayou/releases). Импортируйте пакет в игровой проект через панель инструментов в `Asset/Import Package/Custom Package...`.

Откройте `MainMenu` сцену, расположенную в `Assets/SpaceEdge/Scenes`вашей игры. `NetworkManager` gameObject, удалите компонент транспорта `Tugboat` . Замените его на `Bayou` транспорт, находящийся в `Asstes/FishNet/Plugins/Bayou`. Обратите внимание на установленное значение порта, в данном случае `7770`.

Убедитесь, что включена опция `Start On Headless` для сборки сервера.

<figure><img src="https://3845012722-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>

### Сборка игрового сервера и контейнеризация

Откройте плагин Edgegap через меню панели инструментов `Edgegap/Edgegap Hosting` . Проверьте ваш `Edgegap API Token` и либо создайте, либо загрузите приложение для игры. Убедитесь, что `port` значение совпадает со значением транспорта Bayou. Выберите `WS` protocol, затем введите `New Version Tag`.

Когда всё будет правильно настроено, нажмите `Build and Push`, что автоматически контейнеризирует ваш игровой сервер и создаст новую версию приложения на панели Edgegap после короткого ожидания.

### Тестирование клиента

#### В редакторе

Вернувшись в проект, выберите `MatchmakingSystem` gameObject и измените следующие поля:

<figure><img src="https://3845012722-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: Установите значение «Application name», которое вы использовали с плагином Edgegap.
* AppVersion: Установите значение «Version name», которое вы использовали с плагином Edgegap.
* AuthHeaderValue: Установите значение токена Edgegap API, который вы использовали с плагином Edgegap.

{% hint style="info" %}
Удалите `токен` слово из токена API, потому что мы задаём это как схему заголовка аутентификации во время `Awake()` метода скрипта `MatchmakingSystem`.
{% endhint %}

Откройте `MatchmakingSystem` , расположенного в `Assets/SpaceEdge/Scripts/Systems`, где вы также можете обновить те же значения. Найдите `"UDP_PORT"` и замените на `"Game Port"`.

{% hint style="info" %}
В предыдущих версиях этого примера приложение создавалось вручную через панель управления Edgegap, и имя `UDP_PORT` использовалось для порта, используемого сервером.

Плагин Edgegap автоматически называет порт `Game Port` вместо этого, поэтому мы должны убедиться, что скрипт обновлён. Иначе игра не будет работать.
{% endhint %}

<figure><img src="https://3845012722-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://3845012722-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>

Убедитесь, что вы также снимете галочку с `Start On Headless` в `NetworkManager` gameObject.

После этого нажмите `Play` в редакторе, затем введите имя в текстовое поле и нажмите `Start Game`. Игра проверит наличие доступного сервера или автоматически развернёт его, если ни одного нет, прежде чем подключиться к нему.

{% hint style="warning" %}
Если на стороне клиента возникает `ConnectionFailed` ошибка, это может быть потому, что опция `Start On Headless` не была включена в `серверной сборке`, что означает, что развёртывание не готово принимать подключения, поскольку сервер никогда корректно не запустился. Убедитесь, что опция включена, прежде чем пытаться снова, создав новый образ контейнера и версию приложения.

Это также может быть связано с тем, что `имя порта` версии приложения не совпадает с именем в `MatchmakingSystem` скрипте. Убедитесь, что оба имеют одинаковое имя, в данном случае `"Game Port"`, прежде чем пытаться снова.
{% endhint %}

#### На Itch.io

После того как вы убедились, что игровой клиент работает в редакторе, он должен работать и на Itch.io. Чтобы загрузить игру туда, вам нужно сделать клиентскую сборку в `Экран сборки` в Unity Editor, в меню `Файл -> Параметры сборки`. Выберите следующие параметры:

* Установите `Платформа` к `WebGL`;
* Откройте `Player Settings`. В разделе `Player -> Publishing Settings`установите `Compression Format` к `Gzip` и убедитесь, что опция `Decompression Fallback` выбрана. Сохраните эти настройки и закройте окно.

<figure><img src="https://3845012722-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>

Затем нажмите собрать и выберите новую пустую папку с именем `build` в качестве конечной папки. Сожмите файлы этой `build` папки в zip-архив, убедившись, что они находятся в корне архива. Затем просто загрузите zip-архив в свой проект Itch и не забудьте выбрать опцию для запуска файла в браузере. Игра должна работать так же, как в редакторе.