#mopsicus: заметки с тегом webgl

Shardy

Игорь Лопатин — Thu, 10 Oct 2024 22:33:59 +0300

Друзья, был у меня давно один проект, который претерпел уже наверное 4 или 5 итераций. Этой штукой я пользуюсь на своих пет-проектах и со временем появилось желание сделать из всего этого опенсорсную историю. Поэтому начну из далека :)

Давным-давно был такой проект на гитхабе Pomelo. По меркам интернета — реально древний, ему больше 10 лет. Он и сейчас там есть, но уже заархивирован и не поддерживается, но форки вроде пилятся. Кто первый раз слышит, это фреймворк для создания игровых серверов на JavaScript и Node.js. Проект довольно большой, куча модулей, клиенты под разные платформы, хорошая дока. Наткнулся я на него несколько лет назад и начал ковырять, запускать, что-то пробовать. В итоге, многие вещи в нём мне понравились, но показалось всё как-то замудрёно что ли. Наверно потому что китайцы писали, а может я в ноду не сильно мог 😅 В общем, оттуда я потягал какие-то скрипты, интересные решения, потом переписал, упростил и, получился у меня такой лайтовый сервер из нескольких файлов, на котором я тестил всякие свои проекты, изучал ноду, яваскрипт и тайпскрипт позднее.

Потом решил поделиться своими поделками и выложить на гитхаб. Когда было свободное время что-то дописывал, переписывал и снова забывал, потому что были задачи поважнее. В какой-то момент, переписал всё на TypeScript (TS). К тому времени уже были наработки не только сервера, но и клиента на C# + Unity и всё это дело стало обретать какой-то полезный вид. И вот, в результате n-ой итерации, архитектура устоялась, протестировалась и получился Shardy.

Shardy — это фреймворк для онлайн игр и приложений на Node.js. Он даёт базовую функциональность для построения микросервисных решений: мобильных, социальных, веб, многопользовательских игр, приложений реального времени, чатов, middleware сервисов и т. п. Есть клиент на TS встроенный в фреймворк, а также пакет для Unity, который поддерживает сборки под iOS, Android и WebGL. Здесь я говорю микросервисных потому что по задумке, за каждый модуль будет отвечать отдельный Shardy-сервис со своими командами, настройками, возможно БД.

Основные фичи:

микросервисная парадигма
простой API: RPC, команды, подписки и т. п.
транспорт данных через сокеты и вебсокеты
легкость и быстрота: Node.js и TypeScript
поддержка пользовательской сериализации
поддержка пользовательской валидации рукопожатий (handshake)
продвинутый логгер: теги, фильтры, области
справочные материалы: документация, сниппеты, примеры
почти нулевая конфигурация

Есть демка с примерами работы API и простенькая онлайн игра «Крестики-Нолики»: как серверная часть, так и клиентская. Всё можно посмотреть, поковырять, запустить у себя и попробовать поиграть. Весь код старался комментировать, иногда даже излишне. Также есть документация с описанием всех компонентов и методов. Это всё в процессе наполнения и улучшения.

Основная цель Shardy — предоставить простое бесплатное решение для создания многопользовательских онлайн игр. Вот так вот громко 😅 На это будет обращено основное внимание при дальнейшей разработке новых функций, сервисов и туторов (было бы время...).

Не претендую на академическую правильность архитектуры и кода, делал в первую очередь для своих нужд. Но как показал опыт: зачастую многие принципы ООП, чистого кода, использование паттернов в «нужных» местах, разбиваются об реальность конкретного проекта :)

Приглашаю всех заинтересованных инди и не только, в подписчиках вроде такие есть, посмотреть, покрутить, примерить, потестить на своих каких-то задачах, играх, проектах, прототипах. Если будут вопросы, отвечу тут в комментах или на почту mail@mopsicus.ru. В личку тоже можно, но могу не заметить или долго отвечать.

Вот такое интро. Всем хороших игр! Онлайн игр :)

Shardy
Shardy for Unity
Docs

Unity и WebGL

Игорь Лопатин — Sat, 23 Apr 2022 17:50:39 +0300

Не от хорошей жизни пришлось делать 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 канал.

#mopsicus: заметки с тегом webgl

Shardy

Shardy

Shardy

Unity и WebGL

Unity WebGL tips

Unity WebGL tips