Mirror WebGL

Это руководство поможет вам использовать MirrorWebsocket Transport и создать безголовый сервер на Edgegap для проекта Unity.

В этом руководстве будет использован открытый пример проекта Tanks, доступный в примере Mirror в папке Assets/Mirror/Examples/Tanks.

Вы можете найти финальную версию этого примера на нашей GitHub

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

Сначала нам нужно внести некоторые изменения в базовую сцену, прежде чем мы будем готовы собрать игровой сервер.

• Откройте Scene.unity расположенный в Assets/Mirror/Examples/Tanks/Scenes;

• В NetworkManager gameObject, удалите компонент транспорта KcpTransport скрипт и замените его на SimpleWebTransport расположенный в Assets/Mirror/Transports/SimpleWeb, также убедитесь, что обновили поле Transport компонента NetworkManager скрипта этим новым транспортом. Убедитесь также, что опция Auto Start Server Build тоже выбрана.

• В зависимости от вашей версии Mirror, возможно, потребуется изменить/обновить NetworkManagerHUD чтобы он работал с транспортами, отличными от KCP, а также чтобы можно было вводить значение порта в HUD перед подключением к серверу.

Запомните порт, используемый для сетевых коммуникаций, обозначаемый как [GAME PORT]. В данном случае используется порт 7778.

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

Чтобы облегчить процесс контейнеризации и развертывания, можно использовать последнюю версию плагина Edgegap для Unity на нашем GitHub для автоматизации процесса. Для получения дополнительной информации о том, как использовать этот плагин, вы можете ознакомиться с нашим документацией.

Если вы предпочитаете, вы также можете следовать этим пошаговым инструкциям.

Когда игра будет готова, перейдите на Экран сборки в Unity Editor, в меню Файл -> Параметры сборки в верхних меню. Убедитесь, что выбрали правильные пресеты в зависимости от вашей версии Unity.

• До версии 2021.2:

  • Установите Целевую платформу к Linux;

  • Установите Архитектуру к x86_64;

  • Отметьте Server Build опции.

• В противном случае:

  • Установите Платформа к Выделенный сервер;

  • Установите Целевую платформу к Linux.

Затем нажмите собрать и выберите новую пустую папку с именем linux_server в качестве места назначения файла. Перенесите linux_server папку во вторую пустую папку, которая в этом документе будет называться [SERVER BUILD] папку, указанную в этом документе. Добавьте следующий Dockerfile и boot.sh файл в папку [SERVER BUILD] папку:

Dockerfile

FROM ubuntu:bionic
MAINTAINER <author_detail>

ARG DEBIAN_FRONTEND=noninteractive
ARG docker_version=17.06.0-ce

RUN
    apt-get update && \
    apt-get install -y libglu1 xvfb libxcursor1 ca-certificates && \
    update-ca-certificates && \
    apt-get clean

EXPOSE 7778/TCP

COPY linux_server/  /root/linux_server/
COPY boot.sh        /boot.sh

WORKDIR /root/
ENTRYPOINT ["/bin/bash", "/boot.sh"]

boot.sh

xvfb-run --auto-servernum --server-args='-screen 0 640x480x24:32' /root/linux_server/[ВАША ИГРА].x86_64 -batchmode -nographics

Обязательно замените [YOUR GAME] заменители на имя сгенерированного файла

Затем откройте командную строку в папке [SERVER BUILD] ; Выполните следующие команды Docker, чтобы создать образ вашей сборки и отправить его в приватный реестр:

Для пользователей с ARM CPU (Mac M1, M2 и др.) см. специальную страницу.

Использование Linux

# собрать образ
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# вход в систему, появится запрос пароля
docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>

# добавьте ещё один тег к вашему образу, соответствующий реестру
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# отправить образ
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Использование cmd

# собрать образ
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# вход в систему, появится запрос пароля
docker login -u <REGISTRY_USERNAME> <REGISTRY_URL>

# добавьте ещё один тег к вашему образу, соответствующий реестру
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# отправить образ
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Использование Powershell

# собрать образ
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# вход в систему, появится запрос пароля
docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>

# добавьте ещё один тег к вашему образу, соответствующий реестру
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# отправить образ
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

Развертывание сервера на Edgegap

После входа в панель управления Edgegap перейдите на страницу Приложения и игры . Нажмите на Создать новое в правом верхнем углу, чтобы получить доступ к форме создания приложения. Ниже поля и как их правильно заполнить:

• Название приложения: Может быть любым заметным именем, которое вы хотите использовать, чтобы легко распознать приложение среди других.

• Изображение: Может быть любым конкретным изображением, которое вы хотите использовать, чтобы легко распознать приложение среди других.

• Имя версии: Вы можете указать имя версии, чтобы описать назначение версии, которую вы разворачиваете. Примеры: «demo», «production», «v1», «v2»

• Контейнер:

  • Реестр: «[URL]», где [URL] — значение из учётных данных, которые можно отобразить на странице репозитория контейнеров.

  • Репозиторий образа: «[PROJECT]/[YOUR GAME]», где [PROJECT] и [YOUR GAME] — значения, которые вы использовали ранее при отправке образа Docker.

  • Тег: «[TAG]», где [TAG] — значение, которое вы использовали ранее при отправке образа Docker.

  • Отметьте «Используется приватный репозиторий»

  • Имя пользователя приватного реестра: «[USERNAME]», где [USERNAME] — значение из ваших учётных данных.

  • Токен приватного реестра: «[TOKEN]», где [TOKEN] — значение из ваших учётных данных.

  • Требования: Оставьте как есть.

  • Порты : Нажмите + Добавить порт чтобы добавить новый порт, и добавьте следующие записи:

    • 7778 - WS - включить TLS Upgrade (Beta)

Если вы используете опцию WSS, важно включить опцию TLS Upgrade . В противном случае вы столкнетесь с ошибками, подобными следующей, в логах контейнера на панели Edgegap.

Первые байты от клиента не были 'GET' для рукопожатия, вместо этого были 16-03-01

После создания приложения вы можете нажать кнопку Deploy кнопку, чтобы продолжить развертывание вашего игрового сервера. Как только статус вашего развертывания будет установлен как Готов, вы сможете подключиться к серверу с клиентской версией игры. Обратите внимание на Хост URL и, на вкладке Port Mapping вашего развертывания, на внешнему порту , который доступен публично.

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

В редакторе

Вернувшись в редактор Unity в сцене танка, выберите игровой объект NetworkManager gameObject и измените следующие настройки:

• В Сетевом менеджере компонент:

  • Установите Сетевой адрес на Хост URL развертывания сервера;

  • Снимите флажок с Auto Start Server Build опции.

• В Simple Web Transport компонент:

  • Установите Порт значение на внешнему порту развертывания Edgegap, например: 32821;

  • Убедитесь, что опция Client Use WSS включена.

После этого нажмите Play в редакторе, затем нажмите кнопку Клиент ; Вы подключитесь к серверу и сможете поиграть через короткое время.

На Itch.io

Чтобы разместить клиент игры на Itch, вам нужно будет сделать клиентскую сборку; Для этого вам потребуется установить модуль WebGL Build Support для вашей версии Unity. После этого вернитесь в Экран сборки в Unity Editor, в меню Файл -> Параметры сборкии выберите следующие параметры:

• Установите Платформа к WebGL;

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

Затем нажмите собрать и выберите новую пустую папку с именем build в качестве места назначения файла. Перенесите build папку во вторую пустую папку, которая в этом документе будет называться [CLIENT BUILD] папкой.

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

Хостинг клиента на Edgegap

Даже можно разместить клиент вашей игры на Edgegap! Для этого добавьте следующий Dockerfile и nginx.conf файл в папку [CLIENT BUILD] папку:

Dockerfile

FROM nginx:alpine
MAINTAINER <author_detail>

COPY build/ /usr/share/nginx/html
copy nginx.conf /etc/nginx/

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
worker_connections  1024;
}


http {
include       /etc/nginx/mime.types;
default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

include /etc/nginx/conf.d/*.conf;

server {
# Добавьте следующую конфигурацию в секцию http сервера
# ...

    # Файлы данных, предварительно сжатые Brotli на диске, должны обслуживаться с включенной компрессией:
    location ~ .+\.(data|symbols\.json)\.br$ {
        # Поскольку этот файл уже предварительно сжат на диске, отключите динамическую компрессию для него.
        # В противном случае nginx попытается выполнить двойную компрессию.
        gzip off;
        add_header Content-Encoding br;
        default_type application/octet-stream;
    }

    # Файлы JavaScript, предварительно сжатые Brotli на диске:
    location ~ .+\.js\.br$ {
        gzip off; # Не пытаться динамически gzip-сжимать уже сжатый файл
        add_header Content-Encoding br;
        default_type application/javascript;
    }

    # Файлы WebAssembly, предварительно сжатые Brotli на диске:
    location ~ .+\.wasm\.br$ {
        gzip off; # Не пытаться динамически gzip-сжимать уже сжатый файл
        add_header Content-Encoding br;
        # Включите потоковую компиляцию WebAssembly, указав правильный MIME-тип для
        # Wasm-файлов.
        default_type application/wasm;
    }

    # Файлы данных, предварительно сжатые gzip на диске, должны обслуживаться с включенной компрессией:
    location ~ .+\.(data|symbols\.json)\.gz$ {
        gzip off; # Не пытаться динамически gzip-сжимать уже сжатый файл
        add_header Content-Encoding gzip;
        default_type application/octet-stream;
    }

    # Файлы JavaScript, предварительно сжатые gzip на диске:
    location ~ .+\.js\.gz$ {
        gzip off; # Не пытаться динамически gzip-сжимать уже сжатый файл
        add_header Content-Encoding gzip;
        default_type application/javascript;
    }

    # Файлы WebAssembly, предварительно сжатые gzip на диске:
    location ~ .+\.wasm\.gz$ {
        gzip off; # Не пытаться динамически gzip-сжимать уже сжатый файл
        add_header Content-Encoding gzip;
        # Включите потоковую компиляцию WebAssembly, указав правильный MIME-тип для
        # Wasm-файлов.
        default_type application/wasm;
    }
}
}

Продолжите с теми же командами Docker, что и ранее чтобы собрать и отправить образ вашего клиентского приложения в приватный репозиторий, но из окна командной строки, открытого в папке [CLIENT BUILD] . Убедитесь, что используете имя образа, отличное от имени для вашего сервера.

Затем создайте новое приложение для вашего клиента на панели Edgegap с следующими настройками:

• Название приложения: Может быть любым заметным именем, которое вы хотите использовать, чтобы легко распознать приложение среди других.

• Изображение: Может быть любым конкретным изображением, которое вы хотите использовать, чтобы легко распознать приложение среди других.

• Имя версии: Вы можете указать имя версии, чтобы описать назначение версии, которую вы разворачиваете. Примеры: «demo», «production», «v1», «v2»

• Контейнер:

  • Реестр: «[URL]», где [URL] — значение из учётных данных, которые можно отобразить на странице репозитория контейнеров.

  • Репозиторий образа: «[PROJECT]/[YOUR GAME]», где [PROJECT] и [YOUR GAME] — значения, которые вы использовали ранее при отправке образа Docker.

  • Тег: «[TAG]», где [TAG] — значение, которое вы использовали ранее при отправке образа Docker.

  • Отметьте «Используется приватный репозиторий»

  • Имя пользователя приватного реестра: «[USERNAME]», где [USERNAME] — значение из ваших учётных данных.

  • Токен приватного реестра: «[TOKEN]», где [TOKEN] — значение из ваших учётных данных.

  • Требования: Оставьте как есть.

  • Порты : Нажмите + Добавить порт чтобы добавить новый порт, и добавьте следующие записи:

    • 80 - HTTPS

После создания приложения вы можете нажать кнопку Deploy кнопку, чтобы продолжить развертывание клиентского приложения. Когда развертывания сервера и клиента будут установлены как Готов, откройте Хост URL клиентского приложения по указанному внешнему порту в вашем браузере, и вы сможете играть после установки правильных значений в HUD игры!

Если вам нужна дополнительная информация о интеграции Mirror и websocket, вы можете обратиться к их документацией.