VK Games — Первые шаги

Игры VK Games — это HTML5-приложения, которые запускаются из пользовательского интерфейса ВКонтакте или Одноклассников.

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

Краткая инструкция для опытных пользователей

Об играх

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

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

Для упрощения обмена данными игры используют специальную библиотеку — VK Bridge. С её помощью удобнее отправлять запросы и получать ответы.

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

Игры для Web, мобильных приложений и мобильной версии сайта

В зависимости от платформы, на которой работают игровые приложения, игры делятся на три типа:

• •

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

• •

  Web — игры, которые запускаются в десктопной версии сайта ВКонтакте (https://vk.com) и Одноклассники (https://ok.ru).

• •

  Мобильная версия сайта — игры, которые запускаются в мобильной версии сайта ВКонтакте (https://m.vk.com) и Одноклассники (https://m.ok.ru).

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

1. Создайте HTML5-приложение игры

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

Перед тем как зарегистрировать игру, убедитесь, что она работает. Игра не обязательно должна быть готова на 100%, но она должна возвращать какую-либо страницу или выполнять другие действия, которые позволят понять, запускается она или нет.

2. Подключите VK Bridge

VK Bridge — это JavaScript-библиотека с открытым исходным кодом для обмена данными между вашей игрой и ВКонтакте или Одноклассниками.

Существует несколько способов подключения VK Bridge. Подробнее — в разделе Подключение библиотеки.

Подробнее об особенностях работы событий в Одноклассниках — в разделе События VK Bridge.

3. Зарегистрируйте игру

Чтобы зарегистрировать вашу игру на dev.vk.com, вам понадобится учётная запись ВКонтакте и мобильное приложение ВКонтакте. После регистрации игры вы получите её идентификатор, который необходим для запуска и работы с игрой.

1. 1.

   Откройте десктопную версию сайта ВКонтакте и войдите в свой аккаунт.

2. 2.

   Откройте страницу со списком приложений либо перейдите на портал разработчиков (dev.vk.com) и выберите Приложения в верхнем меню.

3. 3.

   В левом меню нажмите Создать приложение.

   Создание приложения

4. 4.

   Заполните свойства игры:

   • •
     В поле типа выберите Игра.
   • •
     Укажите название игры. Вы сможете изменить его позже в настройках.
   • •
     Выберите жанр игры.
   • •
     Нажмите Создать.

   Во всплывающем окне Подтверждение действия выберите способ подтверждения и одобрите действие.

   Если вы выбрали подтверждение с помощью мобильного приложения ВКонтакте, push-уведомление придёт, только если приложение запущено на вашем смартфоне.

Регистрация игры завершена. Откроется панель управления игрой.

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

Идентификатор игры в панели управления

Чтобы разместить игру в Одноклассниках, перейдите в раздел Настройки → Другие площадки и нажмите Привязать OK ID. Подробнее о подключении игры к Одноклассникам — в разделе Публикация в Одноклассниках.

4. Разместите игру на хостинге

Ваша игра — это веб-приложение. Поэтому вам необходимо разместить файлы игры на каком-либо веб-сервере.

Выберите хостинг

Вы можете воспользоваться услугами любых хостинговых компаний. Вам нужно выбрать тариф с поддержкой HTTPS. Большинство из них платные.

ВКонтакте предлагает собственный хостинг для файлов игр. Для размещения используется CDN-инфраструктура компании. Мы предоставляем место для хранения файлов, но не вычислительные мощности для работы сервера. Решение бесплатно, но есть ограничения на размер выкладываемых файлов и частоту обновлений. Подробности — в разделе Хостинг статики для игр.

Проверьте, что сервер работает

Запустите браузер и откройте URL, который отобразила утилита vk-miniapps-deploy — этот адрес будет прописан автоматически в настройки приложения, если вы дали согласие во время загрузки на хостинг статики. Вы увидите страницу с игровым полем.

Важно! При запуске Web-игры ВКонтакте открывает веб-страницу с элементом iframe и загружает игру в этот элемент.

Большинство веб-серверов разрешает загрузку своих страниц в iframe, но некоторые серверы могут запрещать это делать. Как правило, они включают в свои HTTP-ответы заголовок X-Frame-Options, который сигнализирует браузеру, что страница не должна загружаться в iframe.

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

Для игр, которые будут запускаться из мобильных приложений для Android и iOS, такое требование отсутствует.

Укажите URL для загрузки игры

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

Для игры задаются предустановленные размеры iframe. Вы можете изменить их сейчас или позже в панели управления в разделе Отображение.

5. Запустите игру

Сразу после регистрации игра доступна ВКонтакте только её создателю и администраторам. Если вы подключили игру к Одноклассникам, то там она доступна только создателю. Запустить игру можно по прямой ссылке, но не ранее чем через 15 минут после создания ссылки на сайте Одноклассники.

Способ запуска зависит от места запуска: десктопная или мобильная версии сайтов ВКонтакте и Одноклассники или мобильное приложение для Android или iOS. Все особенности рассмотрены в разделе Запуск игры.

Запустить игру можно из панели управления. Проще всего это сделать в десктопной версии сайта: перейдите на страницу Приложения и скопируйте адрес игры для нужной площадки.

Запуск игры из панели управления

Игра откроется в интерфейсе ВКонтакте или Одноклассников.

Экран игры ВКонтакте

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

Альтернативный способ — отправить ссылку на игру в Избранное и запустить её по этой ссылке. Таким же способом можно запустить игру в Одноклассниках. Подробности — в разделе Запуск игры.

Примечания

• •

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

  • •
    Параметры запуска ВКонтакте.
  • •
    Параметры запуска в Одноклассниках
• •

  Web-игры могут быть запущены в стандартном или широкоформатном режиме. Подробнее о переключении режимов — в описании настроек отображения игры.

• •

  Сразу после создания игра доступна только её администраторам. Чтобы сделать игру видимой всем пользователям, перейдите в панель управления и в разделе Размещение в поле Состояние выберите Включено. После этого игра станет доступной пользователям ВКонтакте по прямой ссылке. После публикации в каталоге игра станет доступна широкой аудитории.

  В Одноклассниках игра станет доступна всем пользователям только после публикации в каталоге. До этого она доступна только создателю игры.

Краткая инструкция

1. 1.

   Реализуйте минимально необходимую функциональность в вашей игре.

2. 2.

   Подключите к игре библиотеку VK Bridge. Добавьте код, который будет отправлять платформе сообщение о старте игры:

   JavaScript

   bridge.send("VKWebAppInit", {});

   Важно отсылать это сообщение сразу после старта игры, до отсылки других сообщений и длительной загрузки ресурсов. Допустимый интервал — 30 секунд.

3. 3.

   Зарегистрируйте игру ВКонтакте. Перейдите на страницу Приложения.

4. 4.

   Разместите игру на каком-либо веб-сервере (хостинге). HTML-страницы, скриптовые файлы, изображения и другие ресурсы игры должны быть доступны по протоколу HTTPS.

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

5. 5.

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

6. 6.

   Запустите игру из ВКонтакте, чтобы убедиться, что она работает.

Далее вы можете развивать и монетизировать игру:

• •
  Опубликовать игру в Одноклассниках.
• •
  Добавить показ рекламы.
• •
  Реализовать внутриигровые покупки.
• •
  Опубликовать игру в каталоге ВКонтакте и продвигать её, используя возможности нашей платформы.

Что дальше

Когда базовая интеграция завершена, можно продолжить разработку игры, расширить её с помощью методов VK Bridge и API для игр, а потом разместить игру в каталоге, чтобы пользователи могли её найти. Ниже приведены ссылки на более подробные описания.

Описание и скриншоты

Зайдите в настройки игры на страницу Информация и отредактируйте описание игры. На странице Оформление добавьте иконки и скриншоты. Это важные параметры для продвижения игры и для её показа в каталогах и подборках.

Тестирование и разработка

Вы можете зарегистрировать игру и продолжать её разработку. Чтобы указать URL для разработки:

• •

  Перейдите в раздел Размещение и активируйте Режим разработки на необходимых платформах: Мобильное приложение, Web, Мобильная версия сайта.

• •

  Укажите адрес для загрузки тестовой версии вашей игры.

  Этот адрес будет открываться только у администраторов игры.

С самоподписанным SSL-сертификатом игра не будет работать в мобильных приложениях ВКонтакте.

Взаимодействие с API ВКонтакте

Библиотека VK Bridge предоставляет широкие возможности для реализации дополнительных механик в играх: создания турнирных таблиц, добавления игры в список избранных мини-приложений, отправки событий в ленту пользователя и многого другого. Изучите подробную документацию и внедрите в игру методы, которые улучшат игровой процесс и привлекут новых пользователей.

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

Подробнее о работе библиотеки в Одноклассниках — в разделе События VK Bridge.

Доступ к игре

Сразу после создания игра доступна только пользователю, зарегистрировавшему её ВКонтакте.

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

После размещения в Одноклассниках игра будет доступна только создателю приложения. После публикации в каталоге игра станет доступна всем пользователям.

Публикация

Чтобы сделать игру доступной широкому кругу пользователей, её надо добавить в каталог игр. Подготовьте заявку и отправьте её нам. Подробнее — в разделе Публикация в каталоге ВКонтакте и Одноклассников.

Реклама и монетизация

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

Продвижение

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