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 канал.