{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "#mopsicus: заметки с тегом браузер", "_rss_description": "об играх, разработке на Unity и личном опыте", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/mopsicus.ru\/tags\/browser\/", "feed_url": "https:\/\/mopsicus.ru\/tags\/browser\/json\/", "icon": "https:\/\/mopsicus.ru\/user\/userpic@2x.jpg?1707898340", "author": { "name": "Игорь Лопатин", "url": "https:\/\/mopsicus.ru\/", "avatar": "https:\/\/mopsicus.ru\/user\/userpic@2x.jpg?1707898340" }, "items": [ { "id": "269", "url": "https:\/\/mopsicus.ru\/all\/loto-cards-generator-chatgpt\/", "title": "Лото и ChatGPT 😅", "content_html": "
\n

Russian Loto cards generator<\/h3>

Russian Loto cards generator<\/h4>\"Russian\n<\/div>\n

Как-то мы захотели поиграть в Русского Лото, классическое, оффлайновое, там где мешок, бочонки, карточки. Но людей много, а карточек мало, к тому же они от игры к игре повторяются. Хотелось полного рандома. Думал зайду в Google, скачаю генератор и распечатаю сколько мне нужно новых карточек. Но оказалось, что такой штуки просто нет 🤷‍♂️ Ну или я плохо искал.<\/p>\n

В общем, самому писать такое было неинтересно, да и некогда, поэтому решил проверить победили ли нас машины или нет, надо уже менять профессию или нет — попробовал написать всё с помощью ChatGPT. В итоге получилось всё как я хотел, но надо сказать, что это было не как в фильме Железный человек, когда Джарвис всё понимал с полуслова. В какой-то момент хотелось уже руками поправить код и забыть, но интересно было именно таким способом сделать от начала до конца.<\/p>\n

Получился генератор карточек для игры в Русское Лото<\/a>, в виде одной HTML странички, весь HTML и код на JavaScript сгенерил ChatGPT, я ни строчки не написал :) Можно указать количество страниц для генерации, и на каждой будет 4 карточки с рандомными числами в соответсвии с правилами игры. Файл сохраняется в PDF.<\/p>\n", "date_published": "2024-12-03T12:00:07+03:00", "date_modified": "2024-12-03T12:00:03+03:00", "image": "https:\/\/mopsicus.ru\/pictures\/loto-generator.png", "_date_published_rfc2822": "Tue, 03 Dec 2024 12:00:07 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "269", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/mopsicus.ru\/pictures\/loto-generator.png" ] } }, { "id": "257", "url": "https:\/\/mopsicus.ru\/all\/unity-webgl-tips\/", "title": "Unity и WebGL", "content_html": "

\n

Unity WebGL tips<\/h3>

Unity WebGL tips<\/h4>\"Unity\n<\/div>\n

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

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

Да, для WebGL тоже можно и нужно писать плагины<\/a>, как и для Android и iOS.<\/p>\n

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

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

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

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

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

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

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

Ну и ещё бонус, точнее анонс: мы делаем онлайн мобильную 3D игру, до этого как-то больше по 2D всё было, так что будут интересности по 3D. Подписывайтесь на Telegram канал<\/a>.<\/p>\n", "date_published": "2022-04-23T17:50:39+03:00", "date_modified": "2022-04-23T17:50:14+03:00", "image": "https:\/\/mopsicus.ru\/pictures\/unity-webgl-tips.png", "_date_published_rfc2822": "Sat, 23 Apr 2022 17:50:39 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "257", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/mopsicus.ru\/pictures\/unity-webgl-tips.png" ] } }, { "id": "151", "url": "https:\/\/mopsicus.ru\/all\/favicon-generator\/", "title": "Favicon generator", "content_html": "

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

\n

<\/h3>

<\/h4>\"\"\n<\/div>\n

Версии для iOS Web Clip, Android Chrome, Windows Metro (orly?), различные режимы сжатия, прозрачности и прочее. Всё это скачивается одним архивом и работает во всех браузерах.<\/p>\n", "date_published": "2019-03-11T12:40:44+03:00", "date_modified": "2019-03-11T12:40:22+03:00", "image": "https:\/\/mopsicus.ru\/pictures\/favicon-generator.png", "_date_published_rfc2822": "Mon, 11 Mar 2019 12:40:44 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "151", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/mopsicus.ru\/pictures\/favicon-generator.png" ] } }, { "id": "99", "url": "https:\/\/mopsicus.ru\/all\/riddut-returns\/", "title": "Riddut. Возвращение.", "content_html": "

\n

<\/h3>

<\/h4>\"\"\n<\/div>\n

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

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

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

Riddut<\/p>\n

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