HTML5-игры
Вы можете создать смартап, чтобы портировать HTML5-игру в продукты SberDevices. Особенность такого смартапа в том, что не обязательно создавать собственный сценарий, вы можете использовать готовый.
Если вы хотите добавить в игру голосовое управление, тогда создайте обычный Canvas App.
Пример портированной HTML5-игры
Создание HTML5-игры
Шаг 1 — разработка
Для корректного портирования HTML5-игры необходимо настроить:
- поддержку iOS;
- сохранение прогресса игры;
- поддержку пульта.
Поддержка iOS
Чтобы ваша HTML5-игра появилась в мобильном приложении Салют на iOS, добавьте в проект игрового приложения скрипт ниже. Для поддержки на умных устройствах SberDevices и в мобильных приложениях на 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 — настройка
Для добавления проекта в SmartMarket:
- Откройте SmartMarket Studio и нажмите кнопку Создать проект.
- Выберите проект HTML5 Game SmartApp, введите название и нажмите кнопку Создать проект.
- На вкладке Параметры заполните все поля. Дополнительно заполните следующие поля:
- Webhook смартапа — выберите значение «Готовый сценарий» > «Базовый сценарий обработки голоса». Эта опция отвечает за отключение голосового управления. Без нее ассистент будет реагировать на запросы, но из-за отсутствия сценарной логики он не сможет их обработать.
- Хостинг фронтенда — загрузите архив или укажите ссылку на свой проект.
note
Если архив не загружается и появляется ошибка «Проверка не пройдена», то попробуйте один из следующих вариантов:
- Повторно загрузите архив.
- Создайте архив с помощью Windows-архиватора.
- Создайте архивы из файлов в папке, сделайте общий архив и повторно загрузите его.
После настройки проекта перейдите в настройки пространства: заполните поля для каталога SmartMarket и верифицируйте свою организацию, если вы ИП или представитель юрлица.
После заполнения всех параметров убедитесь, что HTML5-игра корректно работает на всех устройствах.
Шаг 3 — тестирование
После портирования HTML5-игры вы можете запустить ее в мобильном приложении Салют, а также на устройствах Сбера. Протестировать игру в СберБанк Онлайн до публикации не получится — игра появится в приложении только после модерации. Подробнее в разделе Публикация в СберБанк Онлайн.
Убедитесь, что игра работает корректно. Для этого авторизуйтесь в приложении или на устройстве с помощью Сбер ID, который вы используете в SmartMarket Studio — иначе тестовый смартап не запустится.
Также вы можете пригласить других разработчиков или тестировщиков для проверки смартапа. Подробнее об этом читайте в разделе Команда.
Шаг 4 — модерация
После разработки и тестирования смартапа убедитесь, что выполнены все пункты чек-листа для прохождения модерации. Если требования соблюдены, отправьте смартап на модерацию. Модерация — это обязательный этап проверки смартапа перед публикацией.
Шаг 5 — публикация
После пройденной модерации ваш смартап сменит статус на «Готов к публикации». Это значит, что его можно публиковать в каталоге. Для этого нажмите кнопку Опубликовать в настройках SmartMarket Studio, и смартап появится в каталоге приложений SmartMarket.
Доступные поверхности
Мобильные приложения
Портированная HTML5-игра может быть доступна в мобильных приложениях Салют и СберБанк Онлайн. Если в игре есть реклама, она будет отображаться только в приложении Салют.
Для корректного запуска игры в мобильных приложениях на iOS необходимо добавить скрипт (см. шаг 1). Для работы на Android игра не требует дополнительных настроек.
Умные устройства
После портирования HTML5-игры могут быть доступны на умных устройствах Сбера: SberPortal, SberBox и SberBox Top. Для работы на больших экранах настройте поддержку пульта. Подробнее в разделе Проектирование для больших экранов.
Сайт Sber.ru
Портированная HTML5-игра может появиться на сайте sber.ru. Веб-сайт — это привычная для многих пользователей поверхность, а значит они смогут запускать игру на компьютере, мобильном устройстве или планшете.
Чтобы игра появилась на сайте:
- Портируйте HTML5-игру на SmartMarket.
- Протестируйте ее работу на SberPortal или в приложении Салют.
- Протестируйте игру в браузере на компьютере и мобильном устройстве. Убедитесь, что она корректно работает из загруженного архива или по ссылке, указанной в поле «Хостинг фронтенда».
После публикации игры на SmartMarket она появится на витрине sber.ru в течение 5 рабочих дней. Встроенная в игру реклама будет отображаться и на сайте.
Виртуальные ассистенты пока не поддерживаются на sber.ru, поэтому игры с голосом временно не отображаются на сайте. Но мы работаем над этим.
Подключение рекламы
Вы можете монетизировать HTML5-игру, подключив в нее рекламу. Подробнее читайте в разделе Подключение рекламы.
Заметили ошибку?
Выделите текст и нажмите Ctrl
+ Enter
, чтобы сообщить нам о ней