Unity WebGL tips

Unity WebGL tips

Не от хорошей жизни пришлось делать WebGL версии наших мобильных игр :) Т. е. изначально, игры не продумывалась для браузера, но тем не менее, после небольших доработок и рефакторинга — всё необходимое заработало. Эта статья как раз для тех, кто задумался над выпуском версии для веб: набор из нескольких наблюдений, советов, собственных мыслей и велосипедов.

Вебсокеты. Так как у нас все игры — онлайн, то первое что сделал — поддержка сети. В мобильных играх у нас используются TCP сокеты, для браузера же надо использовать вебсокеты (WebSocket). И сразу надо сказать: C#’ские вебсокеты работать не будут. Надо брать готовый или писать свой JS плагин. И в качестве примера, в телеграм канале я уже постил этот реп. Он старый, работает и для примера пойдёт. Там кстати сделана поддержка вебсокетов в редакторе (уже через C#’ские). Т. е. можно дебажить и билдить, работать всё будет. В ассетсторе тоже есть разные реализации вебсокетов для WebGL, можно поискать, есть и Socket.IO, Mirror.

Да, для WebGL тоже можно и нужно писать плагины, как и для Android и iOS.

В общем, в браузере много что работать не будет и особенно всё что связано с мобильной платформой: галерея, авторизация, пуши, буфер обмена, платежи — это всё надо делать или через JS плагины, менять реализацию или вообще отказываться.

Платежи. Google Play и AppStore не работают в WebGL. В том смысле что нельзя получить информацию о продукте (описание, цена и т. д.) и сделать покупку в браузере. Поэтому мы сделали просто: вместо запроса списка продуктов, делаем запрос к нашему серверу (сервер определяет что клиент WebGL) и в ответ получаем примерно такую же структуру: цена: описание, количество. Но самое главное — приходит ещё и ссылка для оплаты! Т. е. для пользователя визуально всё осталось также, но при попытке оплаты открывается новая вкладка с сформированной ссылкой на оплату нужного товара. А тут уже можно подключить любой удобный сервис приема платежей и по коллбеку успешной оплаты начислять пользователю определенное количество продукта. Вот такие антисанкции.

Загрузка изображений. Тут проще, в браузерах уже есть встроенный механизм загрузки файлов, его и можно использовать. Вот пример как это реализовано, а на SO можно прочитать как автор до этого дошёл. К слову, этот код рабочий. Немного корявенький, требует рефакторинга, но работает. Картинка приходит в Unity в base64, раскукоживаете её в массив байт и дальше уже что требуется: отправляете на сервер, используйте в игре и т. п.

Уведомления. Все ненавидят уведомления в браузере. И у нас их скорее всего не будет. Но раз обещал, напишу что сохранил для себя если вдруг надумаем (или вы надумаете) делать пуши: плагин можно собрать из таких запчастей, честно не пробовал ещё, скорее всего буду свой писать :) Это Firebase Cloud Messaging, он бесплатный и вообще можно отсылать пуши на все платформы. Для реализации на своем сервере, например для NodeJS, можно погуглить web-push. На Хабре есть статьи, вот свежая относительно про PHP и web пуши. Есть еще pushjs.org, оно вроде как работает во всех браузерах, можно устанавливать кастомный сервис-воркер. Как писать воркеры можно почитать в таком cook-book’e. Но опять же, всё что связано с пушами не проверял ещё.

Google и Apple авторизация. У нас в приложениях как раз используются такие способы авторизации. И для них есть возможность сделать веб авторизацию, чего не скажешь про Huawei ID, хотя может и китайцы скоро допилят. Так вот, тут тоже всё относительно просто: открываете мануал как сделать веб авторизацию на своем сервере и делаете: Google и Apple. Про Apple есть еще норм статья на Хабре от ЦИАН. Основной момент тут — это редирект после успешной авторизации, туда можно подставить свои параметры, а внутри плагина перехватить их и использовать для авторизации уже в WebGL приложении. Вот нашел грубый пример как это может работать. Автор как и предупреждает не совсем верно использует запрос авторизации. Лучше открывать свою страницу с кнопкой(-ми) авторизации и уже после успешного завершения перехватывать редирект со своего сайта.

Где размещаться? В комментариях в телеге спросили на каких сервисах публикуем WebGL игры — точно будем пока на своих сайтах, для нас это больше инструмент для платежей. Но в перспективе, рассматриваем ВК и Одноклассники. Может и во вражеском ФБ, кто знает. На реддите нашёл вот небольшой список где можно разместиться, старый, но наверняка что-то живое есть, https://itch.io точно.

И бонус, как сделать рабочий вариант копирования в буфер обмена во всех (вроде как) браузерах.

Ну и ещё бонус, точнее анонс: мы делаем онлайн мобильную 3D игру, до этого как-то больше по 2D всё было, так что будут интересности по 3D. Подписывайтесь на Telegram канал.

Задумал я тут выложить на Github свою очередную поделку — простой сервер на Node.js и клиента к нему на Unity. Много раз сам гуглил различные библиотеки, пробовал, тестировал, пытался сам написать что-то (с моими познаниями в Node.js :), но потом подсмотрел как сделано у старого китайского Pomelo, который уже сто лет не поддерживается.

Если честно, когда я первый раз узнал про Pomelo и начал его изучать, то понял, что для моих текущих задач такой функциональности не требуется, поэтому решил выпилить всё что не нужно. В итоге, осталось вот что:

Опыта в Node.js у меня не очень много, поэтому я нагуглил такой фреймворк — Architect. Не знаю насколько это оправдано, но пока сделано с помощью него.

• многопользовательский сервер для нереалтаймовых игр
• отправка и получение команд и запросов (аналог JSON RPC)
• поддержка SSL
• основная часть на Architect
• простое добавление команд: один файл = одна команда
• работает с MongoDB

Команды (события)

public void TestCommand () {
    JsonObject param = new JsonObject();
    param["param"] = "value";
    _connector.Command("test-cmd", param);  
    // _connector.Command("test-cmd");     // without params
}

Чтобы «слушать» команды с сервера надо подписаться на команду (событие):

public void TestCommand () {
    _connector.On("test-cmd", OnTestCmd);  
    // _connector.Off("test-cmd", OnTestCmd);     // unsubscribe
}

void OnTestCmd (JsonObject result) {
    if (_connector.IsError (result)) {
        // handle error
        return;
    }
    // handle result
}

Запросы (RPC)

public void TestRequest () {
    JsonObject param = new JsonObject();
    param["param"] = "value";
    _connector.Request ("test-rqt", param, (result) => {
        // handle answer
    });   
    // _connector.Request ("test-rqt", OnTestRequest);          // without params
    // _connector.Request ("test-rqt", param, OnTestRequest);   // callback in external method
}

void OnTestRequest (JsonObject result) {
    if (_connector.IsError (result)) {
        // handle error
        return;
    }
    // handle result
}

На RPC запросы с сервера можно подписаться также как и на обычные команды. Отличие в том, на них надо обязательно «отвечать».

На сервере каждая команда находится в отдельном файле и экспортируется, как-то так:

module.exports = function (commander, message, imports) {
    if (!validate(message.data, commander.protocol.log)) {
        commander.sendError(message, "invalid_data");
        return;
    }
    ...
    commander.sendResponse(message, { result: "ok" });
};

Протокол сообщений можно легко переделать, добавить шифрование или свой какой-то формат, можно посмотреть в репе Pomelo, у меня будет также примерно.

Для создания простой многопользовательской онлайн игры — этого достаточно. Это будет такая демка, когда можно взять сервер и клиент, запустить и сразу увидеть как оно работает. Код будет полностью доступен, так что умеющие в Node.js и C#, смогут переписать мои «костыли» на свои :)

После тестирования и «боевой» проверки на игре, если всё получится, думаю сделать небольшой курс, где опишу, как на основе такой базы делать несложные онлайн игры. Но замечу ещё раз — НЕ реалтайм!

Stay tuned.

В 2015 году я сделал для себя небольшой плагин для браузера — он вырезал из ленты ВК и ФБ ненужные мне записи по стоп-словам. Всё работало очень просто: находил в ленте слово и удалял пост.

Потом, я добавил поддержку морфологии, чтобы не добавлять кучу слов с разными окончаниями. Ещё скрипт научился удалять контекстную рекламу и фильтровать выдачу поисковых систем. И итогом стала — фильтрация любого сайта. Иногда от этого страдает вёрстка, но оно того стоит. Новостной сайт после фильтра хоть можно читать...

После этого, я успешно про него забыл. И вот 2018 год: выборы, санкции, олимпийцы — пришло время снова очистить своё информационного пространство от, и смахнуть пыль со старого кода.

Riddut

Так называется расширение. Да, оно ограждает от нескончаемого потока информационного шума. Это такой персональный AdBlock для контента.
Вот что умеет:

• удалять любое упоминание стоп-слова на любом сайте
• удалять посты и рекламу из соц. сетей Фейсбук, ВКонтакте, Одноклассники, Твиттер по ключевым словам
• удалять позиции в выдаче и рекламу поисковых систем Яндекс, Гугл, Бинг
• фильтровать дозагруженный контент
• работать с белыми списками сайтов
• понимать русскую и английскую морфологию (не полностью)
• синхронизироваться между браузерами
• показывать красивую статистику «сэкономленного» времени :_)

Сейчас всё это дело в бета версии, так что, если расширение окажется вам полезным — напишите на mail@mopsicus.ru, что добавить, убрать, исправить, улучшить. Захотите поучаствовать? Буду рад.

Есть версии для Chrome, Safari и Opera. С Firefox пока не разобрался в чём проблема, но думаю решу.

Подробнее на https://riddut.mopsicus.ru

Заметка чтобы попереживать. Да, расширение отправляет на сайт слова, чтобы с помощью библиотеки морфологии, получить в ответ все его формы и отфильтровать страницу. Ещё оно скачивает актуальные данные по вёрстке. Это всё. В любом случае, всё что отправляет и получает расширение можно посмотреть через консоль. Если вас это не устраивает, что ж, вы можете не использовать моё расширение :)

Riddut — это не баннерорезалка. Удаление некоторой рекламы, это приятный бонус, а не основная функция. Но вы легко можете использовать и то и другое вместе.