Cordova

Начнем с самого сюжета. Работать будем в редакторе Inky. Скачиваем на официальном сайте, запускаем из коробки и пишем первую историю с несколькими выборами. О тонкостях написания новел на Инке есть большой отдел на GitHub, изучайте и становитесь мастерами. Там есть много всего – функции, ветвления, “стежки” и тому подобное.

Разметили начало квеста, сделали три выбора. Редактор Ink сразу показывает нам то, что будет видеть пользователь (конечно, не совсем «то», интерфейс у JavaScript в браузере будет немного другой). Так, «+» означает выбор, к которому потом можно будет еще раз вернуться. Однажды выпитое кофе под «*» уже невозможно будет выбрать еще раз, вернувшись к этому этапу снова. Все это вы найдете в документации Ink, не хочу погружаться в это сейчас (может, позже и напишу для этого отдельный туториал – хотя их полно). Историю дальше развивать не будем, и так сойдет. Переходим к экспорту проекта.

«Export for web» создаст папку с файлами – там и главный HTML с CSS, и JavaScript, на котором работает Ink. Откроете index.html – все заработает в браузере.

“Written in Ink” (этот висячий элемент можно запросто удалить в файле HTML), название игры и сама она с самого начала. При последующих правках файла игры.ink нужен только “Export story.js only”, этот экспорт будет перезаписывать одноименный файл в папке игры (в моем случае это Untitled.js).

Игра готова, не так ли? Пусть в ней три выбора, после каждого из которых она заканчивается, но все же. Теперь перенесем папку игры на платформу Android. Простыми словами, эта игра будет воспроизводиться точно так же в приложении Android (а, вернее, в ее внутриигровом браузере, как и при запуске index.html, но уже при поддержке Cordova).

Перенос на Android

Для дальнейших махинаций нам понадобится еще кое-что. Command Line Interface (CLI) Cordova для «перепрошивки» игры на новую платформу, Node.js. и git клиент (в документации Кордовы в разделе «Установка CLI Cordova») для того, чтобы все работало. Параллельно можно устанавливать Android Studio (если у вас ее еще нет, первая ее установка – процесс долгий). Все скачивается и устанавливается под вашим контролем - как гигантский пазл собирается воедино.

Создаем новую папку для игры, отдельную от созданной Ink’ом, заходим в нее через командную строку (команда «cd», как на Лине). Далее прописываем «cordova create game com.moses.game HelloWorld», где game и Game – название игры, а moses – ваше имя. Командную строку пока не закрываем.

В папке созданы новые папки, в них еще, все понятно. Нужно найти там одну с именем “www” и скопировать в нее все содержимое папки, сгенерированной Ink, с подтверждением замены (заменится только index.html, остальное для Кордовы будет в новинку).

Возвращаемся в командную строку, заходим в папку, которая была создана Кордовой, пишем «cordova platform add android» и наслаждаемся добавлением платформы.

Теперь можно зайти в папку, сгенерированную Кордовой, найти там /platform/android и скопировать папку “android” куда-нибудь целиком (остальное можно удалить). Загружаем Android Studio, там - импорт проекта и выбираем ту самую папку “android”. Ее, к слову, до этого можно было уже переименовать во что-то более приемлемое. Например, "Game".

Обновляем все, что просит Android Studio (AS, конечно, обгоняет Cordova по количеству обновлений для всех граней геймдева, поэтому встанет много свеженьких штучек).

Все обновилось, все встало как нужно, игра собрана и готова посредством Кордовы воплощать ваш HTML в приложении Android. Как видно в дереве файлов, все, что вы писали, сейчас в папке “www”. После редактирования файла игры и экспорта story.js можно просто копировать все, что появляется в папке Ink-игры, сюда.

Инк поддерживает экспорт картинок внутрь этой связки HTML+JS, добавление тэгов, внутриигровой музыки (бесконтрольной, так как это HTML и CSS) и так далее. Пока нам все это не нужно – молодой разработчик, конечно, хочет сразу увидеть плод своей работы. Поэтому мы начинаем билд. (Тестирование через эмулятор Android Studio не советую - много тормозов, и все скомпилированное через Cordova там отображается совсем не так, как на живом устройстве) Сначала нам подойдет простой билд, для Play Marketa уже понадобится подписываемый.

Перед билдом можно, конечно, изменить логотип приложения, создав Image Asset и загрузив в него будущее лого (выбрав Path, где находится изображение). Если вы этого не сделаете, то у приложения будет лого Кордовы.

Еще можно поменять название, версию и автора приложения в манифесте проекта. Так, android:label="Название" – редактирование названия для игры, android:versionCode="10000" (номер версии для сравнивания пакетов в Маркете) и android:versionName="1.0.0" – версии.

Все готово

APK собран, можно отправить его себе на телефон, установить и играть.

Надеюсь, этот туториал был полезен. Я постарался избежать всевозможной шелухи, считая, что интернет предоставляет более чем обширные поля для исследования (английский язык становится не просто подспорьем в этом исследовании – он будет вам верным проводником и помощником). В эту игру можно добавлять еще целую кучу всего - меню, сделанное на Java или Kotlin в Android Studio, контролируемый саундтрек, сохранения прогресса и так далее, до бесконечности.

Советую изучить детальную документацию Ink, о которой я уже упоминал, понять, как работает HTML в связке с CSS, увидеть возможности Apache Cordova как средства для переноса HTML-связанного кода на различные платформы (а также ее документацию). Эта простая разработка станет хорошим началом чего-то нового. Может, через пару месяцев вы уже будете сидеть за C# в Unity и делать свою первую тыкалку, понимая, что геймдев не так уж и страшен.

Успехов.