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/@sberdevices/assistant-client@3.4.2/umd/assistant.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. Хостинг фронтенда — загрузите архив или укажите ссылку на свой проект.  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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