Buffer icon Проекты
3 заметки с тегом

браузер

Unity и WebGL

Unity WebGL tips

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

 Нет комментариев    2521   7 мес   js   unity   webgl   браузер   разработка   с#

Favicon generator

Если вам когда-нибудь придётся делать favicon для сайта, рекомендую воспользоваться Favicon generator. Собственно он и гуглится первым :) Количество «настроек» впечатляет.

Версии для iOS Web Clip, Android Chrome, Windows Metro (orly?), различные режимы сжатия, прозрачности и прочее. Всё это скачивается одним архивом и работает во всех браузерах.

Riddut. Возвращение.

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

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

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

Riddut

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

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

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

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

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

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

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

 1 комментарий    554   2018   js   plugin   riddut   браузер   проекты   расширение