Как установить в код игры яндекс sdk

Один сервис, чтобы коннектиться со всеми, или как я интегрировал игру с VK и немного увлекся

В начале 2020 года я только начинал разрабатывать HTML-игры, и коллега посоветовал выложить что-нибудь на Яндекс Играх — эта площадка недавно открылась. Первым делом нужно было подключиться к SDK Яндекса. Я разрабатываю игры на Construct. Он поддерживает JavaScript, так что я написал небольшой фрагмент кода, который позволял получать игроков и показывать рекламу, и подключиться к SDK. Потом добавил добавил поддержку Яндекс Метрики, просмотр видео за вознаграждение, и постепенно собралась маленькая библиотечка. Тогда я еще не предполагал, что за полтора года эта идея вырастет в целый сервис-посредник для интеграции с разными игровыми площадками. Под катом расскажу, как так получилось, и что под капотом у этой разработки.

class YandexSDK < constructor () < this.ready = new Promise(resolve =>this.init = resolve); > setSDK (ysdk) < this.ysdk = ysdk; >showFullscreen () < this.ready.then(() =>this.ysdk.adv.showFullscreenAdv(>)); > > const Yandex = new YandexSDK(); (function(d) < var t = d.getElementsByTagName('script')[0]; var s = d.createElement('script'); s.src = 'https://yandex.ru/games/sdk/v2'; s.async = true; t.parentNode.insertBefore(s, t); s.onload = initSDK; >)(document); function initSDK () < YaGames.init(< adv: < onAdvClose: wasShown =>console.info('adv closed! was shown: ', wasShown) >, screen: < fullscreen: true, orientation: < value: 'portrait', lock: true >> >).then(ysdk => < Yandex.setSDK(ysdk); Yandex.init(); >); >

Тот самый первый скрипт для работы с Яндекс SDK

Сперва я просто делился библиотекой с друзьями и знакомыми, разрабатывающими в Construct — давал им готовый скрипт, который подключал игру к Яндекс Играм. Но в Construct с JS работать не очень удобно, и я решил переписать все в формате плагина, — чтобы можно было добавлять нужные функции с помощью визуального программирования.

Собрал прототип за три дня и выложил в открытый доступ, чтобы им могли пользоваться все желающие. Он до сих пор висит в списке плагинов Яндекса. Возможно, им кто-то еще пользуется, хотя обновлений давно не было.

Функций плагина хватало для простых проектов, но потом я увлекся разработкой игры-филворда и решил, что в ней просто необходим рейтинг игроков. В Яндекс Играх тогда не было собсвенных лидербордов, так что я написал сервер на NodeJS, подключил MongoDB как базу данных, и стал складывать туда рекорды игроков. Опять же, все это завернул в плагин для Construct и благополучно о нем забыл, потому что переключился на другой проект.

Следующей игрой была несложная карточная стратегия. В Яндекс Играх она вряд ли хорошо бы зашла — не та аудитория, так что я направился в VK. Делать такой же плагин как для Яндекс совсем не хотелось. Тогда и появилась мысль, что нужен универсальный плагин, который будет править всеми проверять, на какой площадке игра, и подключать местный SDK. Это должен был быть посредник, который выступает универсальной оберткой под разные SDK популярных площадок.

Как работает SDK

Construct довольно удобный, но это все таки нишевое решение, его используют далеко не все, так что я вынес логику плагина в отдельный скрипт. Теперь основную работу выполнял Javascript SDK, а плагин дергал за ручки. Проще говоря: если в плагине вызвали «показать рекламу», то он вызывает мой SDK, а SDK обращается к игровой площадке и запрашивает показ рекламы. Такое решение можно масштабировать на все движки, которые поддерживают экспорт в HTML, везде можно подключить JS SDK и все это завести.

Как SDK определяет площадку

На словах все звучит просто, но создание собственного SDK оказалось связано с кучей тонкостей. Например, не хотелось тащить бандлы всех площадок в один SDK.

Во-первых, такое решение будет много весить, а во-вторых, площадки просят затачивать игры под свою платформу и, например, Яндекс Игры не допустят до релиза проект, в коде которого есть строки, которые обращаются к VK и наоборот.

Из-за этого HTML-разработчикам, которые хотят публиковаться в разных местах, приходится поддерживать сразу несколько версий одной и той же игры. В идеале, скрипт должен снимать эту боль, определять, к какой площадке его подключают, и самостоятельно подгружать нужный бандл.

Я выбрал путь косвенного автоопределения площадки через URL адрес фрейма, в который вшита игра. Каждая площадка передает условно какой-то ID в параметрах ссылки, и по ним можно определить, например, Яндекс это или VK.

Для Яндекс Игр индикатором служит хост — games.s3.yandex.net. Дополнительно из него можно забрать ID площадки — 148868.

Для VK игру нужно размещать на своем хостинге, так что метод определения по хосту не подходит. Зато VK прокидывает в URL фрейма свои параметры: api_id, viewer_id и auth_key — для игр и vk_user_id, sign, vk_app_id для приложений. Их наличия хватает, чтобы удостовериться, что перед нами площадка VK. Этот метод косвенный, даже костыльный, но он работает.

Единственная площадка, где определение по URL фрейма оказывается бесполезным — это Smart Market. Фрейм здесь чистый, URL пустой, никакие параметры дополнительно не передает — не за что уцепиться. В этом случае я определяю площадку через явное прокидывание get-параметра _platform — ?_platform=SMARTMARKET

Как SDK загружает конфигурацию и подключается к площадке

После того как сервис определил площадку, для нее нужно загрузить определенную конфигурацию. В нее входят настройки баннеров (частота показа и автообновления, ID и размеры блоков), информация об игре, ID счетчиков метрик, поля игрока, серверное время и много другой полезной информации.

За ней SDK обращается к серверу и параллельно начинает загружать инструменты для работы с SDK площадки и саму библиотеку площадки — например Яндекс SDK или VK Bridge.

Я решил разбить инструменты для работы с площадками на отдельные чанки через Webpack — каждый чанк — отдельная площадка. Это решило проблему веса при масштабировании, потому что у под площадку грузится только нужный чанк.

const toolsBundles: Record = < [PlatformType.YANDEX]: () =>import(/* webpackChunkName: 'platforms/platform.yandex' */ './tools/getYandexTools'), [PlatformType.VK]: () => import(/* webpackChunkName: 'platforms/platform.vk' */ './tools/getVKTools'), [PlatformType.OK]: () => import(/* webpackChunkName: 'platforms/platform.ok' */ './tools/getOKTools'), // . >;

Пример списка чанков

У всех площадок разная логика, код, названия методов и результаты, так что я держу в бандле обертку, которая вернет в основной SDK то, что мне нужно. Вот пример инициализации инструментов для работы с площадкой:

export default async function getYandexTools(tools: PlatformBootupTools) < const sdk = new YandexSDK(tools.gp, <>); // Инициализируем SDK const [, , projectConfig] = await Promise.all([ // Начинаем загружать SDK sdk.init(), // Настраиваем дополнительные локальные хранилища tools.setupStorage([new YandexStorage(sdk), new YandexPlayerStorage(sdk)]), // Получаем конфиг с сервера с учетом языка игрока tools.fetchConfig(sdk.lang), ]); // Создаем адаптеры под SDK const adsAdapter = new YandexAdsAdapter(sdk, projectConfig.platformConfig); const appAdapter = new YandexAppAdapter(sdk); const playerAdapter = new YandexPlayerAdapter(sdk); const platformAdapter = new YandexPlatformAdapter(sdk); const socialsAdapter = new YandexSocialsAdapter(sdk); const paymentsAdapter = new YandexPaymentsAdapter(sdk); return < adsAdapter, appAdapter, playerAdapter, platformAdapter, socialsAdapter, paymentsAdapter, projectConfig, >; >

Затем я получаю нужные адаптеры от площадки и скармливаю их в модули моего SDK.

const platformTools = await getToolsByPlatform(< platformType, tools >); const < adsAdapter, playerAdapter, platformAdapter, socialsAdapter, paymentsAdapter, projectConfig, appAdapter, >= platformTools; const platform = new Platform(platformAdapter); const ads = new Ads(adsAdapter, projectConfig.asdConfig); const app = new App(appAdapter, projectConfig.project); const socials = new Socials(socialsAdapter); const player = new Player(playerAdapter, projectConfig.playerFields); const payments = new Payments(paymentsAdapter); const variables = new GameVariables(projectConfig.gameVariables); const achievements = new Achievements(projectConfig.achievements);

Работая с единым интерфейсом, я, например, указываю, что нужно показать рекламу, а обертка знает, как это вызвать, например, в Яндекс SDK или в VK Bridge. В результате не важно, к какой площадке подключена игра, потому что результат придет одинаковый.

export default abstract class AbstractAdsAdapter < isStickyAvailable: boolean; isFullscreenAvailable: boolean; isRewardedAvailable: boolean; isPreloaderAvailable: boolean; async showPreloader(banner: Banner): Promise < return Promise.resolve(true); >async showFullscreen(banner: Banner): Promise  < return Promise.resolve(true); >async showRewardedVideo(banner: Banner): Promise  < return Promise.resolve(true); >async showSticky(banner: Banner): Promise  < return Promise.resolve(true); >async refreshSticky(banner: Banner): Promise  < return Promise.resolve(true); >async closeSticky() <> >

Пример интерфейса для рекламного адаптера, который должна удовлетворить имплементация конкретного рекламного адаптера площадки

Чего еще не хватало в первой версии сервиса

На бэкенде нужно было сделать какую-то авторизацию. Я решил не париться, и воспользовался готовым решением от Google. Иначе пришлось бы хранить у себя логины и пароли, возиться с восстановлением данных, бороться с социальной инженерией и так далее. А так эти моменты за меня решает Google-авторизация. Некоторые разработчики шутят, что пора делать авторизацию через Яндекс, но я еще надеюсь, что Google в России не забанят.

Мой сервис сохранял данные игроков на сервере — по сути, в любом необходимом формате. Можно было добавлять список полей, типизировать и таким образом настраивать его под нужды конкретной игры.

Например, можно построить лидерборд по уровню игрока и по опыту — нужно просто изменить соответствующие параметры. Кстати, впоследствии гибкость построения лидербордов сыграла злую шутку, потому что когда у тебя не 100 тысяч игроков, а 100 миллионов, сортировать их становится сложновато.

С этим минимальным набором фич я пришел к знакомым разработчикам HTML-игр и предложил протестировать сервис. Аналоги тогда работали только с иностранными площадками, например, GameArter, а у меня поддерживались Яндекс Игры, VK и Одноклассники, так что идею подхватили с энтузиазмом. Уже через неделю у меня был длиннющий бэклог с разными хотелками от бета-тестеров, так что я стал развивать архитектуру и прикручивать новые фичи.

Что под капотом

В начале у меня был довольно простой набор сервисов. Прежде всего это API на Node.js, база данных MongoDB, Nginx и админка на Nuxt 2 / TypeScript, SDK только TypeScript. Плюс игровой оверлей на Preact.

Deploy

Все эти сервисы завернуты в Docker контейнеры и оркестрируются через Docker Compose.

Я сразу настроил CI/CD через GitlabCI. Как только пушу сервис в мастер, собирается билд с контейнером и затем выливается на продакшен сервер. По сути, это стандартный CI/CD pipeline. Я решил вкрутить его с самого начала, чтобы не приходилось выливать что-то вручную.

Поначалу это была просто сборка билда сервиса и раскатка на сервер. Есть много статей про настройку CI/CD в gitlab, например, GitLab CI: Учимся деплоить — в ней собраны основные возможности GitlabCI.

Пример моего конфига .gitlab-ci.ym для деплоя на прод:

variables: IMAGE: gamepush/api:latest deploy: image: docker:19 services: - docker:19-dind stage: deploy only: - master before_script: - docker login -u $CI_DOCKERHUB_LOGIN -p $CI_DOCKERHUB_PASSWORD - docker build --pull --cache-from $IMAGE -t $IMAGE . - docker push $IMAGE - apk add --update openssh - eval $(ssh-agent -s) - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null - mkdir -p ~/.ssh - chmod 700 ~/.ssh - ssh-keyscan $CI_DEPLOY_PROD_HOST >> ~/.ssh/known_hosts - chmod 644 ~/.ssh/known_hosts script: - ssh root@$CI_DEPLOY_PROD_HOST "cd /var/www/gamepush-deploy/; \ sudo docker pull $IMAGE; \ sudo docker-compose up -d --no-deps --build api; \ docker image prune -a -f;"

• Логинимся в докер, собираем билд и пушим образ;
• Устанавливаем модуль openssh прямо в раннере, чтобы подключиться к нашей удаленной машине;
• Добавляем приватный ключ с которым пойдем на сервер. Добавляем сервер в доверенные хосты;
• Подключаемся к серверу, пулим образ, через docker-compose пересоздаем контейнер с новым билдом и чистим старые билды через docker image prune, чтобы сэкономить место.

SDK

Поскольку SDK — это обычная JS-библиотека, ее нужно где-то положить, чтобы потом к ней можно было обращаться. Сначала я просто поместил ее в папку на сервере, чтобы поддержать работоспособность старых версий при релизе новой, я хранил там все сборки SDK.

Конечно, можно было сделать версионирование SDK, но я отказался от этой идеи, чтобы в любой момент можно было пофиксить баги или добавить полезный функционал без пересборки билда с обновлением версии SDK.

С этим связана проблема. Если я выложил новую версию SDK, а у игрока, например в VK, закешировалась и загрузилась старая версия основного модуля, то он может загрузить новый чанк с инструментами, которые не совместимы с новым SDK. Эта проблема решается Webpack из коробки. Он генерирует хэши при сборке, и при загрузке старой версии SDK, тянется старая версия VK-адаптера. Так можно хранить все версии сразу.

Количество сборок SDK со всеми чанками росло, какие билды уже не актуальны, а какие еще могли быть в кеше, — неизвестно. Не хотелось периодически подчищать старые сборки, более того, не хотелось вообще об этом беспокоиться. Так что я перезалил это все на S3. Теперь новые билды выливаются сразу туда, и я не переживаю о переполнении и каком-либо контроле. Правда, чтение с S3 происходит не быстро, поэтому я спрятал S3 за Nginx и кэширую основной SDK и чанки, а затем и вовсе закрыл все CDN от Cloudflare.

Пример конфига для получения файлов SDK из S3 хранилища:

server < server_name s3.gamepush.com; add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always; proxy_ssl_name gp.s3provider.com; proxy_ssl_server_name on; proxy_http_version 1.1; proxy_set_header Host gp.s3provider.com; proxy_intercept_errors on; proxy_cache off; proxy_read_timeout 300s; proxy_connect_timeout 75s; # gzip из коробки в Cloudflare gzip off; location /files/ < proxy_pass https://gp.s3provider.com/files/; >> 

И затем получение SDKпроксируется на свой S3 домен с дополнительным кешированием в Nginx на минуту.

server < server_name gamepush.com; location ^~ /sdk/ < set $args ''; # gzip из коробки в Cloudflare gzip off; proxy_ignore_headers Expires Cache-Control; proxy_cache sdk; proxy_cache_valid 200 302 1m; proxy_ssl_server_name on; proxy_pass https://s3.gamepush.com/files/gs/sdk/; >> 

S3 хост закрыт CDN от Cloudflare и обмазан его кешами. Это нужно из-за того, что S3 сервер долго извлекает файлы из хранилища, и бонусом CDN дополнительно сжимает их в gzip и brotli.

Дополнительное проксирование решает проблему очистки кэша Cloudflare. Если не куплен Enterprise план, скинуть кэш можно только явно передавая список источников на которых нужно очистить кэш, например iframe в Яндексе. Домены все разные, и лучше если источник будет один, в моем случае — корневой домен.

Сам корневой домен не закрыт CDN. На нем API и файлы SDK, которые весят не много и раздаются напрямую. Возможно в будущем имеет смысл раздавать SDK напрямую из S3, закрытого CDN. Но в случае выкатки SDK с критическим багом, откатить такое не получится, пока не протухнут кеши CDN и браузеров.

API

Сам сервис API сделан с использованием GraphQL — это язык запросов для API поверх HTTP. Идея GraphQL в том, что один сервис собирает в себе все остальные сервисы и возвращает только те данные, которые нужны клиенту. Например, тебе нужен список достижений игрока и список покупок, но за это отвечают разные сервисы. GraphQL-сервис сам опрашивает эти сервисы и отдает то, что запросил пользователь. Из самой схемы можно генерировать типизированный серверный и клиентский код. Я использую gqlgen для генерации из схемы на Go (API теперь на Go, но об этом в следующий раз) и graphql-codegen для генерации типов и клиента на фронте.

Все запросы в БД за проектом, достижениями, покупками или описанием структуры игрока кешируются на некоторое время, и это позволяет отвечать довольно быстро, особенно в пиковые нагрузки. Кэши сбрасываются при обновлении сущности, и следующий запрос пойдет в БД и обновит кэш.

Собирать эти данные помогает prometheus client, образец которого взят здесь (для Go).

Для NodeJS в проекте использовался Apollo Server. Плагин для сбора метрик — @bmatei/apollo-prometheus-exporter. Из-за использования GraphQL-схемы было достаточно просто переехать на Go, так как схема строго типизирует и входящие, и исходящие данные, а также отвечает за валидацию данных согласно схеме. Значит все что мне нужно переписать, — это запись и чтение в БД. Все остальное, даже список резолверов, генерируется фреймворком.

База данных

MongoDB, как многие говорят, — идеальный выбор для стартапа. Когда еще нет устоявшейся схемы и постоянно все переписывается, отсутствие типизации спасает. Сейчас, конечно, и в MongoDB можно задать жесткую схему. Но мой выбор пал на нее в том числе и из-за гибкости.

Вот несколько преимуществ и недостатков, которые я отметил за время работы с MongoDB:

+ Очень хорошо заточена под индексы. В том числе под индексирование сложных объектов и массивов. В моем проекте нет сложных индексов, но часто используются составные, например по номеру проекта и тегу достижения. Также все чаще нужны TTL-индексы, скажем на отслеживание игроков онлайн или хранение сессий в течение месяца, с автоочисткой.

Моя самая любимая фича с индексами, которая очень спасает — Index Intersection. Она позволяет на основе двух даже составных индексов использовать поиск по индексу, когда запрос затрагивает эти два индекса. Это выручает при построении рейтинга игроков.

Даже когда в базе более 100 млн записей, поиск по индексам все равно ничего не стоит. Главное только, чтобы серверу хватало памяти на хранение индексов. По-умолчанию база забирает себе половину ОЗУ сервера, а остальную рекомендует оставить под кеширование системой файлов БД.

— Индексы получаются очень объемными. Так, на хранение ObjectID индекса, который тебе не нужен, но обязателен для БД, уходит 2.2GB для коллекции в 100 млн. записей. В среднем хранение остальных составных индексов для этой коллекции занимает ~3.6GB.

+ Синтаксис запросов. За все свои годы я так и не привык к работе с SQL, поэтому работа с JSON для меня, как фронтендера более привычная и удобная.

— Пока не поработаешь с агрегациями. Но желательно проектировать так, чтобы они не понадобились. В этом как раз помогает GraphQL и подход дата-лоадеров. У меня агрегации используются в основном только в расчете статистики.

+ Репликация и шардирование из коробки, настраивается и синхронизируется автоматически, достаточно только указать список реплик. Они сами синканутся и распределят роли.

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

Также не хватает обычного автоинкрементящегося числового ID, так что приходится подкостыливать.

Панель управления

Она достаточно простая. Из фреймворков был выбран Vue, тогда еще Vue2. В помощь ему Nuxt. Препроцессоры: SASS и Pug. Из библиотек компонентов остановился на Vuetify из-за его большого функционала, который помимо компонентов предоставляет еще и сетки, хелперы для стилей, темизацию. В общем css почти не пишу.

Оверлей

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

Для него был выбран Preact, так как он достаточно легковесный, всего 7kb. Для сравнения, Vue 40-50kb, React около 500kb. Основным критерием выбора был именно вес, но еще мне хотелось пощупать реакт и tsx. Тем более все равно пет-проект.

Preact полностью может заменить React, что было очень нужно при работе с VK и их рекламными компонентами, которые работают только в реакт-экосистеме. Можно настроить сборку совместимую с Preact в два флажка в tsconfig:

Как работает сервис

Опишу, как происходит самое распространенный запрос к GamePush — сохранение игрока.

Прежде всего нам нужно как-то понять, с кем мы имеем дело, особенно если игрок не авторизован. Можно использовать какой-нибудь local storage, либо IndexedDB. Туда мы можем поместить ID / токен игрока, чтобы потом, при обращении на сервер, его идентифицировать.

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

Дальше SDK обращается на сервер, авторизовывается на нем и сохраняет игрока в базу. А потом от сервера возвращается ответ, и новый стейт записывается локально вместе с секретным кодом, чтобы можно было авторизовать игрока.

Как обеспечить локальное сохранение игрока? Самое простое решение — записать в local storage. Но есть iOS, которая упорно не хочет туда ничего сохранять. На этой платформе внутри iframe local storage работает как session storage, данные хранятся пока не закроешь браузер, а потом данные удаляются.

Чтобы это победить, я сохранял стейт везде, где только можно, — в localstorage, в IndexedDB, и если позволяла площадка, — на ней. Я пробовал записывать данные в куки, но со временем политика безопасности браузеров, особенно Safari — начала блокировать third-party куки. В конце концов Яндекс сделал обертку над localstorage — через общение с помощью post message между iFrame и верхнеуровневым доменом, и я начал дополнительно сохранять все через него. Из остальных площадок только GamePix пришли к такому же решению. В итоге для Яндекса данные сохраняются параллельно в 4 хранилища: LocalStorage, IndexedDB, обертку Яндекса над LocalStorage и, если игрок авторизован, в данные игрока на площадке.

Была еще одна интересная проблема, связанная с тем, что если пользователь заходит в браузер в режиме инкогнито, его нужно предупредить, что он потеряет прогресс, когда закроет вкладку. В какой то момент я реализовал через GamePush создание секретного кода сохранения и показывал игроку этот код, когда нужно было сохраниться. Как в играх на старых приставках, его можно было записать, ввести потом и продолжить с того же уровня игры.

Вот только разработчики браузеров специально делают так, чтобы со стороны сайта не было заметно, что браузер работает в режиме инкогнито. Раньше можно было, например, проверить существует ли local storage, можно ли записать в IndexedDB. Долгое время я определял режим инкогнито через установку Third-Party Cookies в стороннем iframe, но сейчас это эти лазейки прикрыли.

Новые фичи

Разобравшись с хранением данных игроков, авторизацией и вызовом разных функций платформы через универсальный SDK, я начал прикручивать дополнительные модули.

Например, в VK или Одноклассниках можно отправить пост на свою страничку и пригласить людей в игру, а на площадке Яндекс этого нет. Если выводишь игру сразу на несколько площадок, это очень неудобно. Чтобы как то уравнять их в возможностях, я начал писать адаптеры, которые показывают окно с нужной функцией поверх обычного интерфейса игры, подобно тому, как это происходит с лидербордами. То есть, если площадка не поддерживает какие-то действия, их нарисует мой сервис.

Кстати, с окнами связан еще один важный момент. Как оверлей может влиять на стили сайта и движки на которых разработчики пишут игры, так и стили игры могут влиять на оверлей. Что-то пойдет не так, и вся верстка поплывет. Поэтому я проставляю специальный префикс gp-overlay ко всем своим классам. Отказываясь от базовых имен классов, которые может как-то использовать движок игры, я изолирую свой код.

Рост нагрузки и польза проекта

В итоге я сделал интеграции со всеми основными игровыми площадками. Заработал сарафан, сервис набирал популярность, но проект еще воспринимался, как хобби. Первое время дохода от моих игр с лихвой хватало, чтобы покрывать расходы на сервер. О монетизации я не задумывался, но нагрузка росла.

Моя первая виртуалка работала на одном ядре и гигабайте оперативной памяти. Ее мне хватило надолго, потому что вся база данных составляла всего 25 мегабайт, а игроков было около ста тысяч. Поначалу у меня было всего 40 запросов в минуту, и долгое время Grafana была настроена именно на RPM.

В начале мая я открыл доступ к GamePush для всех желающих и тут понеслась. Сначала RPM превратились в RPS — нагрузка выросла до 3-4 запросов в секунду. Это было по-прежнему немного, но в июне я увидел цифру в 1 миллион игровых аккаунтов. Grafana показывала уже 9-10 RPS. Тогда я перешел на двухядерный сервер.

Месяц за месяцем счетчик неуклонно шел к 20-30 RPS. Сервер начал скрипеть и окончательно сдался в районе 60 запросов в секунду. На 1 RPS уходило примерно 2% ЦПУ, и двух ядер уже не хватало.

Естественным ответом на рост нагрузки стало вертикальное масштабирование. Сначала я выделил 4 ядра, потом 6, далее — 8. Чтобы как-то контролировать процесс роста и поддерживать сервер, я ввел монетизацию по запросам к серверу для новых пользователей. Оплата за запросы к серверу показалась мне более справедливой — сколько запросов сгенерировал, за столько и заплатит. Такой подход дает контроль нагрузки для меня и осознанное потребление для клиента. И все равно я уперся в потолок.

У моего хостера это это высокочастотный сервер на 5 ГГц, 8 ядер, 16 ГБ ОЗУ. Масштабироваться больше некуда, только если горизонтально (в случае базы данных это слишком сложный путь) или переезжать.

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

Надеюсь, вам было интересно. Пока что мы не глубоко заглянули под капот моего сервиса _{[ссылка удалена модератором]} . Про какие аспекты его работы рассказать в следующий раз?

• разработка игр
• HTML-игры
• интеграция сервисов
• реклама в играх
• продвижение игр
• gamedev
• игры вконтакте
• яндекс игры
• одноклассники игры
• геймдев

• Программирование
• Разработка игр
• Монетизация мобильных приложений
• Монетизация игр
• Игры и игровые консоли

Как установить в код игры яндекс sdk

Яндекс SDK (Software Development Kit) представляет собой средство разработки программного обеспечения, предоставляющее разработчикам доступ к различным сервисам и функциям Яндекса. Это мощный инструмент, который может использоваться для создания игр и приложений для различных платформ.

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

Прежде всего, вам необходимо скачать и установить Яндекс SDK на ваш компьютер. Для этого перейдите на официальный сайт Яндекса и найдите раздел скачивания SDK. Часто там предлагается последняя версия SDK для различных платформ, таких как iOS, Android, Windows и других.

После того, как вы скачали и установили Яндекс SDK, вам нужно добавить его в свой код игры. Начните с открытия вашего проекта в вашей любимой интегрированной среде разработки (IDE). Затем найдите файл с исходным кодом вашей игры, в котором вы хотите использовать функции Яндекса.

Вставьте следующий код в место, где вы хотите использовать функции Яндекса:

// Подключаем Яндекс SDK

import com.yandex.sdk.example.*;

// Инициализируем Яндекс SDK

YandexSDK.init();

// Используем функции Яндекса

YandexSDK.doSomething();

Теперь, когда вы добавили Яндекс SDK в свой код игры, вы можете начать использовать функции Яндекса. Например, вы можете использовать Яндекс.SDK.doSomething() для выполнения определенной функции или запроса к сервисам Яндекса.

Подготовка к установке

Перед тем, как начать установку Яндекс SDK в вашу игру, вам необходимо выполнить несколько шагов подготовки. Эти шаги помогут вам убедиться, что ваша игра готова для интеграции со сторонними SDK.

1. Создание аккаунта разработчика

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

1. Откройте сайт https://developer.yandex.com/
2. Нажмите на кнопку «Войти» в правом верхнем углу страницы.
3. В появившейся форме введите свой логин и пароль, либо зарегистрируйтесь, если у вас еще нет аккаунта.
4. После успешной авторизации, вы будете перенаправлены на главную страницу разработчика. Здесь вы сможете создать новый проект и получить необходимые данные для интеграции.

2. Подготовка игрового проекта

Прежде чем приступить к установке Яндекс SDK, убедитесь, что ваш игровой проект готов для интеграции. Вот несколько рекомендаций:

• Убедитесь, что ваш проект полностью закончен и готов к выпуску.
• Проверьте, что ваш проект компилируется и работает без ошибок.
• Определите, в какой части вашей игры вы планируете использовать Яндекс SDK (например, реклама, платежи и т.д.).
• Изучите документацию Яндекс SDK и ознакомьтесь с возможностями и требованиями каждого модуля.

3. Получение данных для интеграции

После создания аккаунта и подготовки игрового проекта, вам необходимо получить данные для интеграции Яндекс SDK. В основном, данные, которые вам понадобятся включают:

• App ID — идентификатор вашего приложения или игры на платформе Яндекс.
• App Key — ключ для доступа к сервисам Яндекс SDK.
• App Secret — секретный код для аутентификации вашего приложения.
• Другие настройки, специфичные для выбранного модуля Яндекс SDK.

Чтобы получить эти данные, выполните следующие действия:

1. Войдите в свой аккаунт разработчика на платформе Яндекс.
2. Перейдите в раздел управления проектами и создайте новый проект, если еще не сделали этого.
3. Внутри проекта найдите раздел «Настройки» или «Параметры» и перейдите в него.
4. Здесь вы найдете все необходимые данные для интеграции Яндекс SDK в ваш проект.

Следуя этим шагам, вы подготовите себя и вашу игру к успешной установке Яндекс SDK. Теперь, когда у вас есть аккаунт разработчика и все необходимые данные, вы готовы приступить к интеграции!

Установка Яндекс SDK

Для установки Яндекс SDK в вашу игру, следуйте следующим шагам:

1. Перейдите на официальный сайт Яндекс.Карты и зарегистрируйтесь.
2. Получите API-ключ для использования Яндекс SDK. Для этого зайдите в «Управление моими ключами», нажмите на кнопку «Добавить API-ключ» и выберите «JavaScript API». Скопируйте полученный ключ.
3. В своем коде игры подключите библиотеку Яндекс SDK, добавив следующую строку перед закрывающим тегом : Замените «ВАШ_API_КЛЮЧ» на полученный ранее API-ключ.

После успешной установки Яндекс SDK вы сможете использовать все его возможности в вашей игре, для создания интерактивных карт или других картографических функций.

Не забудьте также ознакомиться с документацией Яндекс SDK для получения полной информации о его возможностях и использовании в вашем проекте.

Настройка Яндекс SDK для вашей игры

Яндекс SDK предоставляет разработчикам возможность интегрировать различные сервисы Яндекса в свои игры. Перед началом работы с Яндекс SDK необходимо выполнить несколько шагов настройки.

1. Создайте проект в Яндекс Developer Console: Перейдите на developer.yandex.com и создайте новый проект для вашей игры.
2. Получите идентификаторы приложения: После создания проекта, вам будет предоставлен уникальный идентификатор приложения (API key) и секретный ключ.
3. Интегрируйте Яндекс SDK в вашу игру: Добавьте необходимые библиотеки и файлы SDK в ваш проект. Для этого вам потребуется скачать SDK с официальной страницы разработчика Яндекса.
4. Инициализируйте Яндекс SDK: Инициализация SDK может быть выполнена в различных местах вашей игры, например, при запуске приложения или при входе в игровой режим. Вам необходимо использовать полученные ранее идентификаторы приложения для инициализации SDK.
5. Подключите необходимые сервисы Яндекса: Когда SDK уже инициализирован, можно подключить необходимые сервисы Яндекса для использования в игре. В Яндекс SDK доступны различные сервисы, такие как Яндекс.Карты, Яндекс.Метрика и др. Вы можете выбрать нужные сервисы и подключить их в вашей игре.

Вопрос-ответ

Что такое Яндекс SDK?

Яндекс SDK — это набор инструментов и библиотек, предоставляемых Яндексом для разработки и интеграции сервисов Яндекса в приложения и игры.

Какие сервисы Яндекса можно интегрировать с помощью Яндекс SDK?

С помощью Яндекс SDK можно интегрировать различные сервисы Яндекса, такие как Яндекс.Карты, Яндекс.Деньги, Яндекс.Музыка и другие.

Как установить Яндекс SDK в код игры?

Для установки Яндекс SDK в код игры необходимо скачать необходимые библиотеки и добавить их в проект, а затем настроить подключение к сервисам Яндекса с помощью API-ключей, предоставляемых Яндексом.

Как получить API-ключи для подключения к сервисам Яндекса?

Для получения API-ключей для подключения к сервисам Яндекса необходимо зарегистрироваться на сайте разработчиков Яндекса, создать новый проект и получить соответствующие ключи в настройках проекта.

Какие языки программирования поддерживает Яндекс SDK?

Яндекс SDK поддерживает несколько языков программирования, включая Java, JavaScript, Python и PHP, что позволяет разработчикам выбирать наиболее удобный для них язык при интеграции сервисов Яндекса.

Публикация игры на платформах

Статья посвящена добавлению новой игры и интеграциям с платформами. Вы можете обращаться к ней каждый раз, когда нужно добавить новую игру на платформы.

Добавляем игру в панели управления​

1. Для использования возможностей SDK нужно добавить игру в панели. Заполните имя проекта и нажмите добавить игру. Вас перенаправит на только что созданный проект.
2. В разделе Project Settings вы можете выбрать генератор аватарок по умолчанию, можно пропустить этот шаг. Здесь же можно добавить счетчик Яндекс.Метрики или Google Analytics.

Игры Вконтакте​

Для начала нужно добавить платформу в проект.

Пролистайте до блока платформы и нажмите добавить платформу. Выберите VK Games.

1. Вам нужно заполнить App ID и Secret Key, для этого перейдите в список приложений VK и выберите ваше приложение. Заполните поля данными, отмеченными на скриншоте.

Секретный код нужен, чтобы подтвердить владельца игрока и его действия — вход, покупку, запрос к API платформы. Без него аккаунт игрока потенциально мог бы забрать любой желающий.

1. Вконтакте требует чтобы игра была залита на ваш хостинг. Мы предоставляем свой хостинг. Более 200 серверов по всему миру и сжатие ресурсов игры обеспечат максимальную скорость загрузки. Перейдите в раздел Game Hosting вашего проекта и загрузите архив с игрой, сервис автоматически создаст черновик. Для публикации нажмите «Опубликовать».
2. Осталось подключить рекламу. Реклама Вконтакте реализована на стороне сервиса AppsCentrum.

• Войдите в аккаунт и подключите игру, для этого выберите пункт Медиареклама, перейдите во вкладку Приложения.
• Выберите тип приложения VK Mini App или игра на Direct Games.
• Нажмите Добавить.

На этом настройка платформы VK Games закончена.

Яндекс.Игры​

По аналогии с VK в панели управления GamePush нужно добавить платформу Yandex.Games. Во вкладке Подключение укажите ID игры и Секретный ключ .

Получить App ID можно просто из URL игры.

Получить Secret Key сложнее. На текущий момент есть только костыль-хак с покупками. Вам нужно перейти в раздел Покупки и добавить любую покупку.

Затем обновите страницу, только после этого появится поле Secret Key .

После получения ключа нужно удалить покупку, иначе игра не пройдет модерацию.

Добавьте данные и сохраните платформу.

Добавляем cтики баннер в Яндекс.Игры​

Стики баннер — это баннер в нижней части экрана или справа (десктоп). Он находится всегда во вьюпорте. Баннеру можно выставить частоту автообновления, чтобы менять рекламу:

Баннер может генерировать до 70% дохода от всей рекламной монетизации. Крайне рекомендуем его добавить.

Как добавить Sticky баннер:

• Перейдите черновик игры в Яндекс Играх;
• Проскрольте до блока Sticky баннеры;
• Включите баннеры как показано на скриншоте или подстройте под себя.

Не забываем сохранить. Поздравляем — баннер добавлен!

Баннер будет автоматически показываться при старте игры, а так же автоматически обновляется с интервалом 30-60 секунд.

OK Games​

Платформа ведет работу только с юр лицами или ИП. Физ. лица и самозанятые не могут опубликовать игру.

1. Вам нужно заполнить App ID и Secret Key. Они отправляются на почту при регистрации приложения в Одноклассниках.

1. Одноклассники требуют, чтобы игра была залита на ваш хостинг. Мы предоставляем свой хостинг. Более 200 серверов по всему миру и сжатие ресурсов игры обеспечат максимальную скорость загрузки. Перейдите в раздел Game Hosting вашего проекта и загрузите архив с игрой, сервис автоматически создаст черновик. Для публикации нажмите «Опубликовать».
2. Реклама OK Games реализована на стороне сервиса и в панели ничего добавлять не нужно.

На этом настройка платформы OK Games закончена.

GameMonetize​

1. Вам нужно заполнить только App ID. Он виден сразу при создании игры.

1. На этом настройка платформы GameMonetize закончена.

GameDistribution​

1. Вам нужно заполнить только App ID. Он виден сразу при создании игры.

1. На этом настройка платформы GameDistribution закончена.

CrazyGames​

1. Зарегистрироваться на портале для разработчиков.
2. Добавить игру на портале.
3. Выбрать «Game type» — HTML5.

1. Добавить платформу в список.

1. На этом настройка платформы CrazyGames закончена.

GamePix​

1. Нужно просто добавить платформу в список, ничего заполнять не нужно.
2. На этом настройка платформы GamePix закончена.

WG Playground​

1. Подайте заявку на сотрудничество: https://www.wgplayground.com/developers.
2. Добавьте площадку в список, ничего заполнять не нужно.
3. На этом настройка платформы WG Playground закончена.

Kongregate​

1. Отправьте запрос на сотрудничество:

• Через Google Forms;
• По электронной почте [email protected] или [email protected] ;
• Через Telegram @saweliewa3.

1. Добавьте платформу в список в GamePush Panel. Вам нужно заполнить ID приложения и секретный ключ.

Добавьте /api к ссылке на вашу игру, чтобы увидеть ID игры и API-ключ:

https://www.kongregate.com/games/your_nikname/your_game_name_preview/api 

Также вы можете проверить аутентификацию, используя Guest access URL с этой страницы.

1. Настройка платформы Kongregate завершена.

POKI​

1. Нужно просто добавить платформу в список, ничего заполнять не нужно.
2. На этом настройка платформы POKI закончена.

SmartMarket​

Монетизировать игру через покупки и рекламу могут только юр лица или ИП.

1. Создайте проект на сайте developers.sber.ru. Для этого в панели управления нажмите Создать проект и выберите HTML5 игры.

1. Добавьте Webhook смартапа в разделе Параметры.

Если вам нужна только реклама в приложении, воспользуйтесь хуком ниже:

https://smartapp-code.sberdevices.ru/chatadapter/chatapi/webhook/sber_nlp2/TAQKYcCq:fc53e1440f90ee439af4af4f6c6d1d62730228ab 

Если вам нужна реклама и внутриигровые покупки, воспользуйтесь хуком от GamePush:

https://gamepush.com/api/smartmarket/webhook 

1. Если вы используете ссылку на хостинг, то необходимо к ней добавить query-параметр с явным указанием платформы, чтобы обеспечить распознавание платформы в том числе и на портале sber.ru:

?_platform=SMARTMARKET 

1. Добавьте платформу в GamePush и укажите ID смартапа.

Его можно узнать следующим способом:

Дальнейшая инструкция для тех, кто хочет подключить платежи

1. Добавьте проект SmartPay

1. Получите тестовый токен и Service_id :

1. Укажите их в настройках платформы GamePush, а так же укажите НДС:

В списке НДС (Tax type) доступны 2 значения: None — НДС не платится (УСН) и Vat 20% — 20% НДС. Если у вас другая ставка НДС, пожалуйста, сообщите нам.

На этом настройка платформы SmartMarket закончена.

После прохождения модерации не забудьте изменить тестовые токен и service_id на эксплуатационные.

VK Play​

Вам нужно подать заявку на подключение кабинета разработчика, чтобы получить доступ к публикации на VK Play. Сделать это можно перейдя по ссылке https://developers.vkplay.ru/welcome в кабинет разработчика.

После принятия заявки вам откроется доступ в личный кабинет, теперь вы можете добавить игру. После заполнения формы добавления игры, вы попадете в панель управления игрой.

В разделе Системные свойства есть информация об ID и секретном ключе.

Используйте их, чтобы добавить площадку в GamePush:

Для настройки покупок воспользуйтесь инструкцией.

На этом настройка платформы VK Play закончена.

Подключаем SDK к игре​

Вы используете Construct 3? Вместо этого раздела добавьте плагин C3 Plugin — GamePush. И укажите в нём ID проекта и публичный токен из раздела Public Zone.

Для встраивания SDK в свою игру необходимо добавить скрипт в index.html игры. Скрипт можно найти на странице проекта в разделе Install Code .

Затем объявите функцию-callback, в которую будет передан экземпляр SDK. А дальше дело за вами. Код ниже дан в качестве примера, можно настроить на свой вкус.

window.onGPInit = async (gp) =>   const  player, ads > = gp;  // Wait while the player syncs with the server await player.ready; // Show the ad preloader and wait until it ends await ads.showPreloader(); // Show the sticky banner (then it will update itself)  ads.showSticky();  // You can start the game :)  /**  * Below you can see examples of functions for work with ads  */  // Call a fullscreen banner when the level is over // onLevelEnd(); function onLevelEnd()   ads.showFullscreen(); >  // Player wants to get x5 reward for watching video // getX5Reward(500); async function getX5Reward(basicReward)   const success = await ads.showRewardedVideo(); if (success)   // See out the video  player.add('gold', 5 * basicReward); > else   // Doesn’t want to  player.add('gold', basicReward); > > >; 

Осталось только залить игру на платформы и наслаждаться результатом.

Оставайтесь на связи​

С другими разделами документации вы можете ознакомиться здесь. Для начала работы вы можете ознакомиться с нашими туториалами.

Сообщество GamePush в Telegram : @gs_community.

Для ваших обращений e-mail : [email protected]

Желаем вам успехов!

• Добавляем игру в панели управления
• Игры Вконтакте
• Яндекс.Игры
• Добавляем cтики баннер в Яндекс.Игры
• OK Games
• GameMonetize
• GameDistribution
• CrazyGames
• GamePix
• WG Playground
• Kongregate
• POKI
• SmartMarket
• VK Play
• Подключаем SDK к игре

Как подключить внутриигровые покупки для Яндекс Игр

Приветствую! В данной статье мы подробно разберём подключение к своей игре внутриигровых покупок от Яндекса, которые довольно популярны на площадке Яндекс Игр. Подключение внутриигровых покупок осуществлется с помощью Яндекс SDK.

Вся загвоздка подключения внутриигровых покупок в том, что данный модуль написан на языке JavaScript, а в Unity мы используем C#. Специально для таких случаев, юнити предлагает использовать специальный файл-посредник, с помощью которого мы можем связать C# и JavaScript.

Файл-посредник: .jslib

Для начала в окне Project создадим папку Plugins, в которой создадим обычный текстовый файл yandex.jslib — который и будет нашим посредником, благодаря которому мы сможем общаться между методами C# и JavaScript. В окне Project у вас должен данный файл быть в виде пазла.

В данном файле будут храниться готовые JavaScript методы предоставляемые Яндексом, для вызова окна покупок. Давайте эти методы туда и пропишем. Для этого откроем данный файл через любой тектовый редактор, и пропишем в него следующий код:

mergeInto(LibraryManager.library, < BuyMoney: function () < payments.purchase(< id: 'gold500' >).then(purchase => < console.log('Покупка успешно совершена!'); myGameInstance.SendMessage("InApp", "AddMoney"); >).catch(err => < console.log('Покупка не удалась :('); >) >, >);

Обратите внимание, что в данном файле мы работаем только с JavaScript кодом — который будет работать ТОЛЬКО после билда игры. Поэтому протестировать работоспособность данного кода в самой программе Unity не получится.

В коде написанном выше, в строке #3 мы видим метод BuyMoney. Если его вызвать, то для пользователя откроется окно покупок с ID товаром gold500. Сам товар с данным ID мы создадим чуть позже на сайте Яндекса.

Если пользователь успешно осуществил покупку, то соответствующее уведомление опубликуется в консоле браузера, но не в консоле Unity! А так же автоматически выполнится метод SendMessage(), о котором подробно сейчас и поговорим.

Вызов методов C# из JavaScript

Метод SendMessage(), который автоматически вызовется при успешной покупки, позволяет запустить любой метод C# метод из вашей игры. Во втором аргументе данного метода мы указали C# метод AddMoney(), который будет вызван — его мы создадим позже. А в первом аргументе мы указали название объекта InApp, на котором этот метод расположен — его мы так же создадим чуть позже.

ВАЖНО: Объект InApp в окне Hierarchy не должен иметь никаких родителей, то-есть он не должен быть вложен внутрь какого-либо другого объекта!

Так же обратите внимание, что метод SendMessage() вызывается у объекта myGameInstance, который пока что не создан. Мы его так же создадим чуть позже.

Вызов методов JavaScript из C#

Вызывать методы C# из JavaScript при помощи метода SendMessage() мы научились. Теперь научимся наоборот, вызывать методы JavaScript из скрипта C#, ведь нам как-то нужно запускать JavaScript метод BuyMoney, для осуществления покупок.

Для этого с помощью окна Hierarchy создайте пустой объект, с названием InApp, и создайте для него C# скрипт с таким же названием InApp. Впишите в данный скрипт следующий код:

using UnityEngine; using System.Runtime.InteropServices; public class InApp : MonoBehaviour < [DllImport("__Internal")] private static extern void BuyMoney(); public void BuyMoneyIsButton() < BuyMoney(); >public void AddMoney() < // любой код >>

Предлагаю вкратце разобрать код:

• В строке #2 мы подключили специальную библиотеку, которая позволит работать с внешними JavaScript методами.
• В строках #6-7 мы указали, что существует внешний JavaScript метод BuyMoney(), который теперь можно вызывать в C# скриптах. Обратите внимание, что у данного метода стоит право доступа private, из-за чего в некоторых случаях становится невозможным их вызвать напрямую. Поэтому мы создали дополнительный метод BuyMoneyIsButton(), через который и будет вызываться метод внутриигровых покупок.
• В строке #14 мы создали метод AddMoney(), который автоматически вызывается после успешной покупки. В данной функции вы сами впишите то, что должно происходить, например, добавить игроку +500 монет.

Отлично! Теперь мы можем из скрипта C# вызывать метод из JavaScript, для открытия окна с покупками. А после успешной покупки, из JavaScript будет автоматически вызван C# метод AddMoney().

Подключение и инициализация SDK

Несмотря на то, что всю логику мы реализовали, у нас осталась ещё одна нерешённая задача, а именно подключение Яндекс SDK к нашей игре, ведь JavaScript методы от Яндекса, без подключения SDK работать не будут!

Для этого нам необходимо полностью сбилдить игру на свой компьютер в формате WebGL, в результате которого у нас создадится игра в следующем виде:

Нас интерисует только последний файл, index.html. Открываем его с помощью любого текстового редактора, и почти в самом начале находим закрывающий тег . Сразу же перед ним вставляем следующую строку:

Должно выглядеть примерно так.

SDK подключен, теперь нужно его инициализировать, а вместе с ним инициализируем заодно и модуль игровых покупок. Для этого ищем открывающий тег , который находится примерно в строке #27, и после него вставляем следующий код:

Должно выглядеть примерно так:

Создание myGameInstance

Не забывайте, что нам ещё нужно создать переменную myGameInstance, для того, чтобы метод SendMessage(), который мы ранее использовали в файле yandex.jslib, успешно работал. В эту переменную мы должны записать всю нашу игру! Но не волнуйтесь, звучит страшно, но делается это всего одной строчкой кода. Для этого, почти в самом конце файла, находим эту строку:

var script = document.createElement("script");

И над ней прописываем это.

var myGameInstance = null;

После чего, чуть ниже находим эту строку.

>).then((unityInstance) => 

myGameInstance = unityInstance;