1. Що таке HTML5-ігри і чому вони важливі Легкі онлайн-ігри на основі HTML5 запускаються у вкладці будь-якого...
2. Портування на Facebook Instant Games
3. Портування в VK Direct Games

Що таке 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.

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

1. Щоб cобрать з вашого проекту HTML5-додаток, виберіть у меню Corona Simulator - File -> Build -> HTML5 (BETA).

1. У вікні портирования задайте ім'я та розташування файлу. Що робити з опціями під галочками:
   - Include Standard resources означає, що ваша гра зможе використовувати стандартні елементи Corona (кнопки, фігури) - рекомендована для початківців;
   - Create FB Instant archive (створює архів файлів, який потім стане в нагоді для портування проекту на ігрову платформу Facebook) - ставте галочку.

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

1. В папці з готовим HTML5-додатком ви знайдете zip-архів для завантаження гри на Facebook Instant Games.

Портування на Facebook Instant Games

1. Увійдіть на сторінці Facebook для розробників (developers.facebook.com) -> Почати роботу (або «Особисте», якщо аккаунт вже є).

1. На сторінці всіх ваших додатків Facebook -> Додати новий додаток (developers.facebook.com/apps).
2. У відкритому каталозі додатків виберіть «Моментальні гри» (Instant Games)

1. Додайте іконки, назва і опис майбутньої гри починаючи з вкладки «Інформація».
2. У вкладці Веб-хостинг -> Завантажити версію завантажуємо zip-архів, з папки з вашим HTML5-додатком.

Пам'ятайте, що розмір програми не повинен перевищувати 5МБ. Це пов'язано з використанням webview, який істотно обмежує швидкість роботи пристрою;

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

1. Коли завантаження завершиться, в панелі завантаження виберіть значок зірки, щоб передати додаток у виробництво.

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

1. Залишилося тільки заповнити всі налаштування програми, включаючи вкладки «Лідери», «Перевірка», «Рекомендації», «Відгуки», «Покупка в додатку» і відправити гру на перевірку. І вуаля, ваша гра вже в лівому меню серед інших на Facebook Instant Games!

Портування в VK Direct Games

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

1. У своєму проекті в файлі build.settings встановіть плагін VK Direct Games. Як це зробити описано в документації до плагіну ;
2. Зберіть з вашого проекту HTML5-додаток як описано вище.
3. Готове HTML5-додаток перенесіть на свій сервер. Якщо немає сервера, можна скористатися сервісом GitHub, який організовує ваш сервер за адресою yourname.github.io;
4. Наберіть в браузері рядок yourname.github.io і перевірте, що ваш додаток працює коректно, пам'ятайте, що ігри в ВК повинні займати не більше 10МБ;
5. зайдіть на сторінку в VK для розробників . Виберіть пункт «Мої додатки» з верхньої панелі і натисніть кнопку «Створити додаток»;

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

1. На ваш телефон має прийти повідомлення про створення вами гри - вам треба підтвердити цю дію, щоб продовжити;
2. Додайте іконки для опису гри, як зазначено на сторінці «Інформація»;

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

1. Збережіть налаштування - іконка вашої гри буде в лівій панелі - натисніть на неї - у вас з'явиться екран гри і кнопка «Надіслати на телефон»;

1. Підключіть телефон через USB до комп'ютера, загасіть додаток VK і натисніть кнопку «Відправити на телефон» - ви почуєте звук пуш-нотифікації;
2. Змахніть зверху вниз по екрану телефону і виберіть пуш-нотифікацію - ваша гра запуститься всередині програми VK;

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

Якщо ви знайшли друкарську помилку - виділіть її та натисніть Ctrl + Enter! Для зв'язку з нами ви можете використовувати [email protected] .