ym88659208ym87991671
Портируем HTML5-игру | Документация для разработчиков
Skip to main content

Портируем HTML5-игру

Обновлено 27 октября 2022

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

Если вы хотите добавить в игру голосовое управление, тогда создайте обычный Canvas App.

Пример портированной HTML5-игры

Создание HTML5-игры

Шаг 1 — разработка

Для корректного портирования HTML5-игры необходимо настроить:

  • поддержку iOS;
  • сохранение прогресса игры;
  • поддержку пульта.

Поддержка iOS

Чтобы ваша HTML5-игра появилась в мобильном приложении Салют на iOS, добавьте в проект игрового приложения скрипт ниже. Для поддержки на умных устройствах Sber и в мобильных приложениях на Android дополнительные настройки не требуются. После этого сохраните проект в формате архива или опубликуйте его с доступом по прямой ссылке.

<script

crossorigin

src="https://unpkg.com/react@17/umd/react.production.min.js"

></script>

<script

crossorigin

src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"

></script>

<script src="https://unpkg.com/@salutejs/client@latest/umd/assistant.production.min.js"></script>

<script>

window.assistant.createAssistant({

getState: () => {

return {};

},

});

</script>

Сохранение прогресса в игре

Для сохранения прогресса в игре вставьте скрипт:

<script src="https://cdn-app.sberdevices.ru/shared-static/
0.0.0/polyfills/cookie-ls-polyfill.min.js"></script>

Поддержка пульта

Чтобы HTML5-игра работала на больших экранах, нужно поддержать работу пульта, т. к. пульт является основным способом управления на этих устройствах. Для этого настройте навигацию пульта.


Шаг 2 — настройка

Для создания проекта в Studio:

  1. Откройте Studio и нажмите кнопку Создать проект.
  2. Выберите проект HTML5 Game SmartApp, введите название и нажмите кнопку Создать проект.
  3. На вкладке Параметры заполните все поля. Дополнительно заполните следующие поля:
    1. Webhook смартапа — выберите значение «Готовый сценарий» > «Базовый сценарий обработки голоса». Эта опция отвечает за отключение голосового управления. Без нее ассистент будет реагировать на запросы, но из-за отсутствия сценарной логики он не сможет их обработать.
    2. Хостинг фронтенда — загрузите архив или укажите ссылку на свой проект.
note

Если архив не загружается и появляется ошибка «Проверка не пройдена», то попробуйте один из следующих вариантов:

  • Повторно загрузите архив.
  • Создайте архив с помощью Windows-архиватора.
  • Создайте архивы из файлов в папке, сделайте общий архив и повторно загрузите его.

После настройки проекта перейдите в настройки пространства: заполните поля для каталога приложений и верифицируйте свою организацию, если вы ИП или представитель юрлица.

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

Шаг 3 — тестирование

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

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

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

Шаг 4 — модерация

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

Шаг 5 — публикация

После пройденной модерации ваш смартап сменит статус на «Готов к публикации». Это значит, что его можно публиковать в каталоге. Для этого нажмите кнопку Опубликовать в настройках Studio, и смартап появится в каталоге приложений.

Доступные поверхности

Мобильные приложения

Портированная HTML5-игра может быть доступна в мобильных приложениях Салют и СберБанк Онлайн. Если в игре есть реклама, она будет отображаться только в приложении Салют.

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

Умные устройства

После портирования HTML5-игры могут быть доступны на умных устройствах Sber: SberPortal, SberBox и SberBox Top. Для работы на больших экранах настройте поддержку пульта. Подробнее в разделе Проектирование для больших экранов.

Сайт Sber.ru

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

Чтобы игра появилась на сайте:

  1. Портируйте HTML5-игру в Studio.
  2. Протестируйте ее работу на SberPortal или в приложении Салют.
  3. Протестируйте игру в браузере на компьютере и мобильном устройстве. Убедитесь, что она корректно работает из загруженного архива или по ссылке, указанной в поле «Хостинг фронтенда».

После публикации игры она появится на витрине sber.ru в течение 5 рабочих дней. Встроенная в игру реклама будет отображаться и на сайте.

Виртуальные ассистенты пока не поддерживаются на sber.ru, поэтому игры с голосом временно не отображаются на сайте. Но мы работаем над этим.

Монетизация

Подключение рекламы

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

Прием платежей и донатов

Еще один способ монетизировать HTML5-игры — принимать платежи или донаты от пользователей.

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

Если вы физическое лицо, настройте прием донатов от пользователей.

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней