Как сделать HTML5-приложение на Corona

Что такое HTML5-игры и почему они важны

Легкие онлайн-игры на основе HTML5 запускаются во вкладке любого браузера или внутри знакомых всем приложений: в социальных сетях или мессенджерах. Чтобы начать HTML5-игру, не нужно скачивать приложения из App Store или Google Play или обновлять плагины браузера  достаточно выбрать игру парой кликов из каталога встроенной в социальную сеть / мессенджер игровой платформы. Подобные платформы уже есть во «ВКонтакте» (Direct Games), в Facebook (Instant Games) и даже в Telegram и китайском WeChat. Благодаря этому аудитория игр расширяется: пользователи ждут новых игр, а девелоперы с удовольствием их создают, адаптируя новые жанры, усложняя игровые механики.

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

Все указывает на то, что пора собирать свое первое HTML5-приложение и зарабатывать на нем, пока это не сделал ваш сосед. Поэтому сегодня рассказываем и показываем, как поставить готовую игру на HTML5-рельсы и разместить ее на платформах Facebook Instant Games и VK Direct Games с помощью движка Corona.

Портирование в HTML5:

1. Заходим на сайт Corona Labs и скачиваем на свой компьютер последнюю версию Corona 2018.3326.

2. После установки ПО и открытии Corona Simulator создайте аккаунт в открывшемся окне — Corona Developer Login или зайдите под существующим.
3. Теперь самое интересное — начинаем портировать игру в HTML5-формат. Мы покажем на примере игры из Corona Marketplace. Скачиваем и открываем игру в Corona Simulator: Open Project -> Папка игры -> main.lua. Даже если у вас несколько файлов .lua, выбираем сначала main.

3. Чтобы cобрать из вашего проекта HTML5-приложение, выберите в меню Corona Simulator — File -> Build -> HTML5(BETA).

4. В открывшемся окне портирования задайте имя и расположение файла. Что делать с опциями под галочками:
   — Include Standard resources означает, что ваша игра сможет использовать стандартные элементы Corona (кнопки, фигуры) — рекомендуемая для начинающих;
   — Create FB Instant archive (создает архив файлов, который потом пригодится для портирования проекта на игровую платформу Facebook) — ставьте галочку.

5. После нажатия OK запустится портирование игры в HTML5-формат. В окне Corona Simulator Console отобразятся списком все файлы приложения и итоговый вес игры.
6. Когда портирование закончится, игра автоматически откроется в системном браузере. Можно также открыть в любом удобном браузере, нажав в всплывающем окне на Open in Browser, чтобы запустить игру. Внешне она будет выглядеть одинаково во всех браузерах, в том числе, в мобильных.

7. В папке с готовым HTML5-приложением вы найдете zip-архив для загрузки игры на Facebook Instant Games.

Портирование на Facebook Instant Games

1. Зарегистрируйтесь на странице Facebook для разработчиков (developers.facebook.com) -> Начать работу (или «Мои приложения», если аккаунт уже есть).

2. На странице всех ваших приложений Facebook -> Добавить новое приложение (developers.facebook.com/apps).
3. В открывшемся каталоге приложений выберите «Моментальные игры» (Instant Games)

4. Добавьте иконки, название и описание будущей игры начиная с вкладки «Информация».
5. Во вкладке Веб-хостинг -> Загрузить версию загружаем zip-архив, из папки с вашим HTML5-приложением.

Помните, что размер приложения не должен превышать 5МБ. Это связано с использованием webview, который существенно ограничивает производительность устройства;

Facebook предоставляет свой сервер для моментальных игр, беспокоится о собственном нет необходимости.

6. Когда загрузка завершится, в панели загрузки выберите значок звезды, чтобы передать приложение в производство.

7. Теперь можно посмотреть, как выглядит и работает игра: Настройки в левой панели -> Основное -> Веб-игры на Facebook -> вставляем в адресную строку браузера ссылку из окна «URL Страницы веб-игр Facebook».

8. Осталось только заполнить все настройки приложения, включая вкладки «Лидеры», «Проверка», «Рекомендации», «Отзывы», «Покупка в приложении» и отправить игру на проверку. И вуаля, ваша игра уже в левом меню среди других на Facebook Instant Games!

Портирование в VK Direct Games

1. Активируйте плагин VK Direct Games в Corona Marketplace. Зайдите на страницу плагина и нажмите кнопку Activate;

2. В своем проекте в файле build.settings установите плагин VK Direct Games. Как это сделать описано в документации к плагину;
3. Соберите из вашего проекта HTML5-приложение как описано выше.
4. Готовое HTML5-приложение перенесите на свой сервер. Если нет сервера, можно воспользоваться сервисом GitHub, который организует ваш сервер по адресу yourname.github.io;
5. Наберите в браузере строку yourname.github.io и проверьте, что ваше приложение работает корректно, помните, что игры в ВК должны занимать не более 10МБ;
6. Зайдите на страницу в VK для разработчиков. Выберите пункт «Мои приложения» из верхней панели и нажмите кнопку «Создать приложение»;

7. Выберите пункт «Встраиваемое приложение», заполните поле названия и описания игры и нажмите кнопку «Перейти к загрузке приложения»;

8. На ваш телефон должно прийти уведомление о создании вами игры — вам надо подтвердить это действие, чтобы продолжить;
9. Добавьте иконки для описания игры, как указано на странице «Информация»;

10. В левой панели выбираете пункт «Настройки» и выбираете тип приложения iFrame, включаете состояние «Видно всем» и самое главное, в поле «Мобильная версия»: добавляете адрес вашей HTML5-игры (пример: https://yourname.github.io);
11. Важно! Оставьте поле адрес iFrame пустым;

12. Сохраните настройки — иконка вашей игры будет в левой панели — нажмите на нее — у вас появится экран игры и кнопка «Отправить на телефон»;

13. Подключите телефон через USB к компьютеру, погасите приложение VK и нажмите кнопку «Отправить на телефон» — вы услышите звук пуш-нотификации;
14. Смахните сверху вниз по экрану телефона и выберите пуш-нотификацию — ваша игра запустится внутри приложения VK;

Bingo! Теперь ваша игра есть на ведущих игровых платформах, а также во вкладках самых популярных десктопных и мобильных браузеров.