Mirror WebGL

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

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

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

Образец Billiards

Если вы предпочитаете следовать пошаговому видеоуроку, используя образец Billiard, смотрите здесь:

В этом видео показан обновлённый процесс сборки с использованием последних Unity инструментов сборки.

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

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

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

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

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

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

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

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

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

Когда игра будет готова, перейдите на экран сборки в Unity Editor, в File -> Build Settings в верхнем меню. Обязательно выберите правильные пресеты в зависимости от вашей версии Unity.

• До версии 2021.2:

  • Установите Target Platform в Linux;

  • Установите Architecture в x86_64;

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

• Иначе:

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

  • Установите Target Platform в Linux.

Затем нажмите build и выберите новую пустую папку с именем 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/[YOUR GAME].x86_64 -batchmode -nographics

Убедитесь, что вы заменили [YOUR GAME] заполнители на имя сгенерированного файла

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

Для пользователей ARM CPU (Mac M1, M2 и т. д.) добавьте --platform linux/amd64 в опции к вашей команде сборки.

Используя 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 перейдите на страницу Applications & Games . Нажмите кнопку Create New в правом верхнем углу, чтобы открыть форму приложения. Ниже перечислены поля и как правильно их заполнить:

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

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

• Version name : Вы можете использовать имя версии, чтобы описать область развёртываемой версии. Примеры: “demo”, “production”, “v1”, “v2”

• Container :

  • Registry : “[URL]”, где [URL] — это значение из учётных данных, которое можно просмотреть на странице Container Repository.

  • Image repository : “[PROJECT]/[YOUR GAME]”, где [PROJECT] и [YOUR GAME] — это значения, которые вы использовали ранее при отправке docker-образа.

  • Tag : “[TAG]”, где [TAG] — это значение, которое вы использовали ранее при отправке docker-образа.

  • Отметьте “Using a private repository”

  • Private registry username : “[USERNAME]”, где [USERNAME] — это значение из ваших учётных данных.

  • Private registry token : “[TOKEN]”, где [TOKEN] — это значение из ваших учётных данных.

  • Requirements : Оставьте без изменений.

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

    • 7778 - WS - enable TLS Upgrade (Beta)

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

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

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

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

В редакторе

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

• В Network Manager компонента:

  • Установите Network Address на url развёртывания сервера; Host url;

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

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

  • Установите Port на значение порта развёртывания Edgegap внешний порт например: 32821;

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

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

На Itch.io

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

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

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

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

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

Размещение клиента на 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 server
# ...

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

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

    # Предварительно сжатые Brotli-файлы WebAssembly на диске:
    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;
    }

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

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

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

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

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

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

• Version name : Вы можете использовать имя версии, чтобы описать область развёртываемой версии. Примеры: “demo”, “production”, “v1”, “v2”

• Container :

  • Registry : “[URL]”, где [URL] — это значение из учётных данных, которое можно просмотреть на странице Container Repository.

  • Image repository : “[PROJECT]/[YOUR GAME]”, где [PROJECT] и [YOUR GAME] — это значения, которые вы использовали ранее при отправке docker-образа.

  • Tag : “[TAG]”, где [TAG] — это значение, которое вы использовали ранее при отправке docker-образа.

  • Отметьте “Using a private repository”

  • Private registry username : “[USERNAME]”, где [USERNAME] — это значение из ваших учётных данных.

  • Private registry token : “[TOKEN]”, где [TOKEN] — это значение из ваших учётных данных.

  • Requirements : Оставьте без изменений.

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

    • 80 - HTTPS

Когда ваше приложение будет создано, вы можете нажать кнопку Deploy кнопку, чтобы продолжить развёртывание вашего клиентского приложения. Когда и сервер, и клиент будут развёрнуты и иметь статус Ready, откройте Host url клиентского приложения по указанному внешний порт в вашем браузере, и вы сможете играть в игру после того, как зададите правильные значения в HUD игры!

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