3 подписчика

Telegram бот для игры на Scratch

3 марта3 мар

5 мин

Данная статья родилась в помощь родителям, которые помогают детям со школьными IT-проектами. В рамках статьи мы не будем создавать игру в Scratch, я предполагаю, что игра уже создана. Часто дети делают в Scratch не игры, а клипы, в рамках этой статьи это не важно, т.к. перечень действий для публикации в Telegram будет одинаковый, но для простоты я буду говорить об игре, т.к. в моем случае была игра. А теперь давайте превратим творение юного программиста в настоящую игру, доступную всем пользователям Telegram! Первым делом нам необходимо получить файл с расширением .sb3. Для этого в проекте Scratch нажимаем «Сохранить на свой компьютер». Преобразовать игру в веб-страницу можно разными способами. Мы применим один из самых простых способов — через онлайн-сервис TurboWarp Packager. Есть и другие сервисы, можете попробовать через них, но мне этот больше понравился. Чтобы ваша игра стала доступна в Telegram, она должна быть опубликована в интернете по ссылке с защищённым протоколом HTTPS.

Оглавление

Что нам понадобится
Шаг 1. Импортируем игру в файл
Шаг 2. Конвертируем проект Scratch 3 в HTML

А теперь давайте превратим творение юного программиста в настоящую игру, доступную всем пользователям Telegram!

Что нам понадобится

Готовая игра: файл проекта Scratch в формате .sb3.
TurboWarp Packager: инструмент для конвертации Scratch-проекта в компактный HTML-файл.
GitVerse: платформа для бесплатного хостинга (размещения) вашей HTML-страницы с поддержкой HTTPS (обязательное требование Telegram).
Telegram BotFather: официальный бот Telegram для создания и настройки наших ботов и их мини-приложений.

Шаг 1. Импортируем игру в файл

Первым делом нам необходимо получить файл с расширением .sb3.

Для этого в проекте Scratch нажимаем «Сохранить на свой компьютер».

Шаг 2. Конвертируем проект Scratch 3 в HTML

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

Переходим на сайт: https://packager.turbowarp.org/
В блоке «Select Project» прикрепляем .sb3-файл. И нажимаем Load Project.

Перед вами откроется множество настроек. Я не буду рекомендовать какие-то конкретные, поиграйтесь с настройками, посмотрите, какие вам подходят лучше всего. Возможно, вам подойдет проект без дополнительных настроек.
Далее находим раздел «Environment» и выбираем Plain HTML.

Нажмите кнопку «Package». Браузер автоматически скачает готовый HTML-файл вашей игры. Поздравляю, вы только что превратили Scratch-проект в веб-страницу!
Важно: Либо при сохранении файла, либо уже после переименуйте файл в "index.html".

Шаг 3. Размещаем игру на GitVerse Pages

Чтобы ваша игра стала доступна в Telegram, она должна быть опубликована в интернете по ссылке с защищённым протоколом HTTPS. Есть очень много способов это сделать. Я решил это делать через Сберовский продукт GitVerse. Вот ссылка на официальную документацию: https://gitverse.ru/docs/pages/

GitVerse — это российский аналог GitHub, который предоставляет удобный инструмент для публикации статических сайтов (помимо всего прочего).

Есть 2 варианта публикации на GitVerse Pages: простой и сложный.

Если ваш HTML-файл получился размером до 50 Мб, то вам подойдет простой вариант, если больше (как у меня), то по сложному пути пойдем. Я покажу оба варианта.

Независимо от размера html файла нужно сделать две вещи:

Регистрация: Если у вас ещё нет аккаунта, зарегистрируйтесь на сайте GitVerse.ru (процесс стандартный, описывать его не буду)
Создание репозитория:

Нажимаем плюсик и выбираем пункт Новый репозиторий

Называем его, например: scratch_game.

Можем указать что-то в описании, например: Scratch Игра.

Репозиторий обязательно должен быть публичным.

И добавляем README файл

Нажимаем «Создать репозиторий».

Создастся репозиторий. И если html-файл менее 50 Мб, то находим в правой части репозитория кнопку «Файл» и выбираем пункт «Загрузить файл».

В открывшуюся форму перетаскиваем файл, нажимаем «Сохранить» и в новом окне еще раз нажимаем «Сохранить».

Если HTML-файл более 50 Мб, вариант выше не подойдет. Можно разными путями пойти, я предлагаю путь без установки лишних программ на компьютер. В правой части проекта находим кнопку GigaIDE Cloud и нажимаем Создать рабочее пространство.

Если вы ранее не создавали такие пространства, вам точно нужно обратиться к документации, тут подробно описан процесс, предшествующий тому, что я сейчас показываю на скриншотах: https://gitverse.ru/docs/gigaide-cloud-uc/.

После нажатия на кнопку Создать, появится окно настройки GigaIDE Cloud, соглашаемся с тем, что предлагается по умолчанию. Нажимаем Запустить.

Загрузится облачное рабочее пространство. Вам необходимо ваш index.html файл перетащить в область Проводник.

Потом выбрать значок под стрелочкой №2.

Пишем комментарий: «Добавлена игра».

Нажимаем на кнопку «Фиксация» и соглашаемся с предупреждениями.

Теперь нажимаем на Синхронизировать изменения и опять соглашаемся с предупреждениями.

Закрываем вкладку браузера, нам больше не нужно это рабочее пространство. Оно само удалится через несколько дней.

Возвращаемся в проект на GitVerse. Должны видеть вот такую картину.

Это было описание простого и сложного пути загрузки файла.

Теперь, после того как файл загрузили, надо включить Pages.

Переходим в «Настройки» репозитория.

В левом меню выбираем раздел «Страницы».

Включаем функциональность тумблером (переключателем).

В выпадающем списке «Ветка» выбираем master.

Нажимаем «Сохранить».

Система автоматически запустит сборку и публикацию вашего сайта.

Через пару минут игра будет доступна по адресу:
https://<ваш-логин>.gitverse.site/<название-репозитория>/
Например: https://pytechnotes.gitverse.site/lp

Обязательно проверьте, что страница открывается и игра работает.

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