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:

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

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. Веб-сайт — это привычная для многих пользователей поверхность, а значит они смогут запускать игру на компьютере, мобильном устройстве или планшете.

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

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

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

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

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

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

Обновлено 04 августа 2022

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

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