Глава 6. Запускаем на популярных платформах
Рассматриваемое программное обеспечение в этой книге не только многофункциональное и удобное, но и имеет возможность запускаться на разных платформах. Как это сделать мы подробно рассмотрим в этой главе.
Ren’Py и персональные компьютеры
Ren’Py "из коробки" развертывается на Windows, macOS и Linux без каких-либо настроек. Для этого на лаунчере Ren’Py в разделе "Действия с проектом" выберите "Построить дистрибутивы". Далее указываете для каких платформ вы хотите собрать игру и нажимаете "Построить". В таблице 6-1 указан список вариантов сборки и для чего они предназначены.
Таблица 6-1. Варианты сборки игры для персональных операционных систем в Ren’Py
| Вариант | Описание |
|---|---|
| PC: Windows and Linux | Создаст zip-файл для 32-разрядных и 64-разрядных версий Windows и Linux. |
| Linux | Создаст TAR.BZ2 файл для 32- и 64-разрядной версии Linux |
| Macintosh | Создаст zip-файл для macOS на базе процессора Intel и Apple Silicon |
| Windows | Создает zip-файл для 32- и 64-битной версии операционный системы Windows |
| Windows, Mac, Linux for Markets | Создаст файлы для Windows, macOS и Linux, необходимые для онлайн-распространения через Itch.io и Steam. Эти файлы не предназначены для прямого запуска |
Минимальные системные требования
Игры созданные на основе Ren’Py в основном не требовательны к ресурсам компьютерной системы, но всё же имеют определённые минимальный требования (см. Таблицу 6-2). Однако, параметры могут измениться, например, если в игре использовать видео высокого разрешения, для которого потребуется значительно больше ресурсов компьютера.
На данный момент любой средний компьютер способен запустить любую игру созданную на Ren’Py, а это 4 гигабайта (ГБ) системной памяти (т. е. ОЗУ) и хороший двухъядерный процессор, но могут быть и исключения.
Так как для визуализации Ren’Py использует OpenGL и DirectX, соответственно видеокарта должна поддерживать, как минимум OpenGL 3.0 или DirectX 11. Следовательно, нужно учитывать и версию операционной системы — это Windows 7 и выше.
Таблица 6-2. Минимальные требования для игр на Ren’Py
| Платформа | Версия ОС | Процессор | ОЗУ | Графика |
|---|---|---|---|---|
| Windows | 7 и выше | 2,0 ГГц, 64-битный Intel-совместимый | 2.0 ГБ | OpenGL 3.0 или DirectX 11 |
| macOS | 10.10 и выше | 2,0 ГГц, 64-битный Intel-совместимый | 2.0 ГБ | OpenGL 3.0 |
| Linux | Ubuntu 16.04 и выше | 2,0 ГГц, 64-битный Intel-совместимый | 2.0 ГБ | OpenGL 3.0 |
Что касается требования к объёму жёсткого диска, то он зависит от размера вашей игры. Если использовать изображения, аудио и видео очень высокого качества, соответственно и игра будет расти в размерах. Однако, необходимо найти компромисс между размером и качеством медиа файлов, чтобы игра получилась качественной и занимала как можно меньший размер на жестком диске.
Иконки для персонального компьютера
Чтобы задать значок для игры, поместите файл с расширением icon.ico для Windows и icon.icns для macOS в корневую папку игры. Если ваша иконка сохранена в PNG формате, то её нужно преобразовать в формат иконки, простое переименования файла здесь не подойдет. В Интернете имеется множество бесплатных онлайн-сервисов для такой операции.
Ren’Py для мобильных устройств
Помимо поддержки персональных компьютеров, Ren’Py может собрать игру для мобильных устройств на базе iOS и Android. Однако данный процесс более сложнее и будет подробно рассмотрен в дальнейших главах.
Развертываем на Android-е
Ren’Py поддерживает сборку игр для Android. Однако могут появиться не предсказуемые баги, и как следствие игры для этой операционной системы нужно тестировать более тщательно.
Первым шагом для отладки игры на Android является загрузка и установка Ren’Py Android Packaging Tool (RAPT). Для этого на лаунчере нажмите Android в разделе «Действия с проектом», после чего вам будет предложено загрузить вышеупомянутый инструмент, если он ещё не был установлен.
Так же вам понадобится Java Development Kit. Ссылку для скачивания можно найти в официальной документации. На данный момент URL-адрес такой: https://adoptopenjdk.net/releases.html?variant=openjdk8&jvmVariant=hotspot.
Теперь нужно настроить компьютер и Android для запуска и отладки игры на устройстве:
- На Android устройстве откройте "Настройки\Параметры разработчика" и включите отладку по USB.
- Настройте соединение Android Debug Bridge (ADB) между устройством и персональным компьютером. Для этого подключите устройство к компьютеру, чтобы установить драйвер. MacOS это сделает автоматически. В Linux нужно загрузить пакет выполнив команду apt-get install adb. Что касается Windows, следуя инструкции: https://developer.android.com/studio/run/oem-usb, загрузите и установите USB-драйвер.
- Далее устанавливаем SDK зайдя в "Действие с проектом\Android\Установить SDK". После установки SDK вам предложат создать цифровой ключ, который в дальнейшем будет использоваться для подписи пакетов, продаваемых на интернет-площадках, например, Google Play.
- Укажите информацию о вашей игре выбрав "Действие с проектом\Android\Настроить".
- Когда игра создана и настроена подключите Android устройство к компьютеру и выберите "Действие с проектом\Android\Собрать и установить".
Иконки и экран-заставка
Чтобы задать иконки для приложения, и заставку загрузки разместите соответствующие изображения в корневом каталоге игры.
Иконка состоит из двух изображений переднего плана android-icon_foreground.png с прозрачным фоном и из фонового изображения android-icon_background.png. Размер этих иконок должен быть 432 x 432 пикселя. При сборке приложения Ren'Py преобразует эти файлы в подходящий размер для каждого устройства.
При первом запуске игры на Android или когда игра загружает дополнительные ресурсы с Google Play используются экраны заставки. Так как эти процессы занимают некоторое время, то хорошим тоном будет задать данные изображения, поместив их в корневую папку игры. Изображение под именем android-presplash.jpg, будет использоваться при загрузке приложения, а изображение android-downloading.jpg при загрузке ресурсов.
Сочетания клавиш в Android
При запуске игры Ren'Py на Android кнопки имеют следующие назначение:
- Домой: возвращает вас на главный экран Android, приостанавливает игру и автоматически сохраняет её состояние.
- Увеличение/уменьшение громкости: используется для регулировки громкости.
Тестирование Android-приложения
Для тестирования на портативных устройствах Ren'Py поддерживает три режима эмуляции Android: телефон, планшет и телевизор. Для её запуска выберите "Действие с проектом\Android\Эмуляция", а далее запускаете требуемый тип эмуляции. Для управления игровым процессом используются следующие клавиши: клик мыши, который эмулирует касание, Esc для вызова меню и Page Up для возврата назад, то есть соответствует кнопке "Назад".
Рассмотрим режимы эмуляции:
- Телефон: сенсорное управление имитируется с помощью мыши.
- Планшет: управление такое же, как и при эмуляции телефона на Android.
- Телевизор: этот режим эмулирует телевизор на базе операционной системы Android. Клавиатура привязана к пульту
- дистанционного управления, где клавиши со стрелками выполняют навигацию, кнопка Enter это выбор, а Esc вызывает
- меню. Кроме того, в этом режиме отображаются границы «Небезопасной зоны», в пределах которой контент может
- отображаться не на всех телевизорах.
Развертываем на iOS
Развертывать Ren’Py проекты для платформ на iOS можно только на персональном компьютере под управлением macOS. Так как поддержка данной платформы находится на стадии разработки, выпушенные игры на основе Ren'Py не соответствуют установленным Apple App Store стандартам. Однако, многие игры проходят эту проверку и попадают в Apple App Store. Как совет, ваш игра не должна содержать технических проблем, и содержать как можно меньше насилия и обнаженных сцен.
Для тестирования Ren'Py поддерживает два режима эмуляции это iPhone и iPad. Оба режима имитируют работу с сенсорным экраном, поэтому управление происходит при помощи мыши.
Чтобы добавить отладку в Ren’Py на iOS, сперва, нужно загрузить программное обеспечение renios. Для этого перейдите на лауйнчере Ren’Py "Действие с проектом\iOS", где вам будет предложено загрузить дополнительно программное обеспечение, если оно ещё не было установлено. После завершения установки станут доступны новый функционал характерный для устройств iOS, особенно такие как эмуляция iPhone и iPad.
Примечание:
Хотя эмулятор позволяет увидеть, как работает ваш проект на платформе iOS, но ни что не заменит полноценное тестирование на реальном устройстве.
Xcode и iOS
Следующем шагом трудоёмкого процесса отладки игр на iOS будет установка интегрированной среды разработки (IDE) Xcode от Apple. Если вы пользуетесь Mac, следовательно, у вас уже должен быть Apple ID. Тогда, просто скачиваем Xcode с App Store на свой Mac и устанавливаем его.
Выполним ещё несколько шагов, чтобы развернуть проект Ren’Py на iOS.
- Зарегистрируйтесь в программе Apple Developer Program, перейдя по ссылке: https://developer.apple.com/programs/enroll/. Будьте готовы заплатить ежегодно 99 долларов США за участия в данной программе.
- Через лаунчер Ren’Py создайте новый проект для Xcode. Для этого выберите "Действие с проектом\iOS\Выбрать Директорию Проектов Xcode". Затем "Создать Проект Xcode". Имя проекта будет автоматически взято с названия игры в Ren’Py.
- Далее для открытия проекта нажмите "Запустить Xcode".
- Добавьте свой Apple ID в Xcode. Выбираем пункт меню "Xcode\Preferences" и переходим на вкладку "Accounts". Используя кнопку плюс в нижней части окна, добавляем свой Apple ID к проекту.
- Назначьте свой проект команде. В Xcode выбираем проект, переходим на вкладку "General", находим раздел "Signing". Убеждаемся, что флажок "Automatically manage signing" установлен, и по надобности выбираем команду в поле "Team".
- Запускаем игры на iOS устройстве. Подключите устройство к Mac. После запуска проекта на реальном устройстве, Xcode настроит все необходимые подписи для развертывания приложения.
- Экспортируйте сертификаты и профили. Для этого выбираем пункт меню "Xcode\Preferences" и переходим на вкладку "Accounts". Далее внизу окна нажимаем шестерёнку, после чего в выпавшем списке выбираем "Export Accounts".
- В открывшемся окне введите имя файла в поле "Save As" и пароль в поля "Password" и "Verify", после чего нажмите кнопку "Save". Теперь сохранённый файл с вашей учетной записью разработчика надежно зашифрован и защищен.
Если вам понадобиться восстановить учетную запись разработчика в Xcode, то просто на вкладке "Accounts" выберите "Import Accounts" укажите ранее сохранённый файл и нажмите "Open".
Обновляем ваши iOS-проекты
Если были внесены изменения в проект Ren’Py, то чтобы они появились в проекте Xcode, нужно его обновить, выбрав на лаунчере Ren’Py "Действие с проектом\iOS\Обновить Проект Xcode". Однако, если вы выполните обновление Ren’Py, то придется повторно пересоздать проект Xcode, для этого используйте инструкцию из предыдущего раздела.
Иконки и экран-заставка для iOS
Добавления иконок и создание экранов-загрузки для iOS происходит исключительно в Xcode, а их размеры стандартизированы (см. Таблицу 6-3).
Таблица 6-3. Спецификация иконок для приложений Apple
| Платформа | Разрешение (в пикселях) |
|---|---|
| iPhone | 180 x 180 и 120 x 120 |
| iPad Pro | 167 x 167 |
| iPad и iPad Mini | 152 x 152 |
| Apple App Store | 1024 x 1024 |
Примечание:
В сети есть множество бесплатных сервисов для создания иконок из изображений. Например, сервис App Icon Generator (https://appicon.co).
Экран загрузки в Apple, это обязательный элемент при разработке программного обеспечения, имеющий стандартные размеры (см. Таблице 6-4).
Примечание:
Разрешение для горизонтального расположения экрана пропорционально вертикальному (например, с 1125 x 2436 на 2436 x 1125).
Таблица 6-4. Спецификация размеров экрана-загрузки для приложений Apple
| iOS-устройство | Разрешение (в пикселях) |
|---|---|
| iPhone 15 | 1179 × 2556 |
| iPhone 12, iPhone 13, iPhone 14 | 1170 × 2532 |
| iPhone 11 | 828 × 1792 |
| iPhone X | 1125 x 2436 |
| iPhone 8, iPhone 7, iPhone 6s | 750 x 1334 |
| iPhone SE | 640 x 1136 |
| iPad Pro (12.9") | 2048 x 2732 |
| iPad Pro (11") | 1668 x 2388 |
| iPad (9.7") | 1536 x 2048 |
Чтобы изменить экран-загрузки, нужно в Xcode добавить изображение в папку Assets.xcassets, после чего выбираем LaunchScreen.storyboard. Далее, используя конструктор, добавляем элемент UIImageView, где в свойстве Image указываем загруженное изображение.
Запускаем на Chrome OS и в браузере
Chrome OS — это операционная система на базе Linux от компании Google, где Chrome использует в качестве основного браузера. Ноутбуки, работающие под управлением данной операционной системы, называются Хромбук (Chromebook). Одной из особенностей Chrome OS это поддержка Android приложений. Поэтому собрав игру Ren’Py для Android, можно запустить и протестировать на Chrome OS.
Если игра доступна в Google Play, то выполните следующие шаги:
- Нажмите на время в правом нижнем углу экрана.
- Выберите значок настроек имеющий вид шестерёнки.
- В разделе Google Play нажмите "Включить" рядом с надписью "Устанавливайте приложения и игры из Google Play на устройство Chromebook".
- В открывшемся окне выберите "Ещё".
- Чтобы принять Условия использования, следуйте инструкциям на экране.
Примечание:
Чтобы устанавливать приложения Android на устройство Chromebook, обновите ChromeOS до последней версии. Если такой параметр не появится, значит ваше устройство не поддерживает приложения Android.
- Запустите Google Play, найдите нужное приложение и установите его.
Когда игра находится на стадии разработки, и вы хотите её протестировать на Chrome OS, то выполните сборку проекта для Android. Далее, полученный .APK файл нужно установить на Chrome OS, но для этого понадобиться включить режим разработчика, выполнив следующую инструкцию:
- Нажмите на время в правом нижнем углу экрана Chromebook.
- Выберите "Настройки\Дополнительные\Для разработчиков".
- Рядом с надписью "Среда разработки Linux" выберите "Включить".
- Следуйте инструкциям на экране.
- Снова нажмите на время на устройстве Chromebook.
- Выберите "Настройки\Дополнительные\Для разработчиков".
- На панели слева выберите "Linux\Разработка приложений для Android".
- Нажмите "Включить отладку с ADB".
- Выберите "Перезапустить".
- Нажмите "Подтвердить" и войдите в аккаунт.
Теперь можно установить .APK файл:
- Откройте терминал.
- Если не установлен, то установите ADB, выполнив следующую команду: sudo apt install adb.
- Подключитесь к устройству с помощью следующей команды: adb connect arc.
- Появится диалоговое окно авторизации для отладки по USB. Подтвердите, нажав кнопку "ОК".
- Установите приложение из терминала, применив команду: adb install [путь к вашему APK].
- Запускаете приложение через "Панель запуска".
Ещё одной возможностью Ren'Py является запуск игр в веб-браузере. Для этого существует отдельная версии Ren'Py, скомпилированная при помощи WebAssembly.
Чтобы собрать игру для браузера, нужно:
- На лаунчере Ren'Py выбрать "Действие с проектом\Web". Если дополнительное программное обеспечение ещё не установлено установите его.
- Нажать "Построить приложение для сети".
- После сборки запустите приложение выбрав "Открыть в браузере".
Лицензия на Android и iOS в Ren’Py
Ren’Py включает в себя множество сторонних библиотек и технологий, большинство из которых распространяются по лицензии GNU Lesser/Library General Public License. Сам Ren'Py распространяется под лицензией MIT. Про это на всякий случай нужно будет упомянуть в описании вашей игры. Например, если вы используете в своём проекте Android Packaging Tool (RAPT) и iOS, то добавьте в документацию вашей игры следующие строки:
Эта программа содержит лицензионное бесплатное программное обеспечение, включая и лицензию GNU Lesser General Public License. Ознакомиться с полным списком можно по адресу https://www.renpy.org/doc/html/license.html.
Ren’Py и Raspberry Pi
С 2012 года рынок начинают заполнять так называемые мини ПК. Одним из таких портативных устройств является Raspberry Pi, цена которого в основном не превышает 40 долларов. На данный момент он всё больше и больше становится популярнее, и вы в свою очередь можете извлечь из этого выгоду, выпустив игру Ren’Py для данной платформы.
Но при портировании проекта на Raspberry Pi, вы должны учитывать ограничения данного устройства. Необходимо до предела минимизировать аудио, видео и изображения. Если нужно уберите некоторые сцены из игры, то есть урежьте игру, так как простой порт с персонального компьютера не является хорошей идеей.
Настройка Pi для Ren’Py
Так как Raspberry Pi работает под управлением Raspberry Pi OS, основанной на Debian GNU/Linux, то и подход в работе будет как с операционной системой Linux на базе процессора с архитектурой ARM. Было продемонстрировано, что Ren'Py может работать на Raspberry Pi 3B, что касается других моделей работа не гарантируется. Перед тем как начать использовать Ren'Py необходимо установить следующие настройки, выполнив команду в терминале sudo raspi-config:
- Разделение памяти (Memory Split): 256 МБ
- Разрешение (Resolution): 1280x720 или меньше
- Драйвер GL (GL Driver): GL (Fake KMS)
Далее вам необходимо установить версию SDK для Linux с поддержкой Raspberry Pi. Для этого перейдите на страницу загрузки https://www.renpy.org/latest.html и выберите "Download ARM Linux (Raspberry Pi and Chromebook) SDK tar.bz2".
TyranoBuilder и персональные компьютеры
У TyranoBuilder имеется очень удобный инструмент для экспорта игр на разные платформы, особенно для Windows, macOS и Web.
Для этого в верхнем меню TyranoBuilder выбираем "Project\Export Game (Проект\Экспортировать игру)". В открывшемся окне в поле "Export Type (Тип экспорта)" указываем для какой платформы собрать игру: "Browser Game (Игра для браузера)", "Windows" или "Mac", после чего подтверждаем экспорт нажав на кнопку "Output game (Выпустить игру)". Через несколько секунд работы приложения, вам будет предложено открыть папку с созданной игрой. Вот в принципе и все, ваша игра готова к распространению.
Примечание:
Какой бы не была игра сложной или простой, всегда рекомендуется добавить в неё файлы с руководством и лицензией, а формат файлов предпочтительно использовать PDF.
TyranoBuilding и iOS
Развернуть игру для мобильного устройства на много сложнее, чем для персонального компьютера. Первый шаг одинаков как для iOS, так и для Android. В главном меню TyranoBuilder выбираем "Project\Export Game (Проект\Экспортировать игру)". В открывшемся окне в поле тип экспорта указываем iOS Application и публикуем игру. Теперь переходим к сложному.
Развертывание игры для iOS на TyranoBuilder очень похоже на развертывание на Ren’Py, для этого понадобится:
- Ноутбук или персональный компьютер Mac.
- Учетная запись разработчика Apple.
- Xcode.
Не забудьте в Xcode настроить профиль и сертификат, как это делалось в предыдущих разделах.
Учтите следующие ограничения при отладке игры на iOS: все видеофайлы должны быть в формате mp4, все аудиофайлы иметь формат m4a или mp3, не используйте японские символы в именах файлов. Иначе, ваш проект не сможет запуститься.
Далее загружаем и устанавливаем автономную версию TyranoPlayer для iOS по ссылке: http://tyrano.jp/download/player/TyranoPlayerFramework_ios_v112.zip
После этого переходим в папку TyranoPlayer и копируем файлы игры, полученные после экспорта игры из TyranoBuilder, в папку game. Находим файл TyranoPlayerFramework.xcodeproj и открываем его в Xcode.
Следующим шагом выполняем тестирование игры. Для этого выбираем в верхней части интерфейса Xcode эмулятор для тестирования на iPhone или iPad. Если хотите использовать реальное устройство, то подключите его к компьютеру и выберите из списка эмуляторов. Далее нажимаем кнопку запуск.
TyranoBuilding и Android
Чтобы развернуть игру TyranoBuilder на Android, необходимо установить Android Studio, которую можно скачать по адресу: https://developer.android.com/studio.
Затем скачиваем TyranoPlayer для Android по ссылке: https://tyrano.jp/download/player/TyranoPlayerFramework_android_v121.zip.
Теперь выполним экспорт игры в TyranoBuilder, выбрав "Project\Export Game (Проект\Экспортировать игру)".
Не забудьте, при экспорте игры для Android, учесть те же ограничения что и для iOS, а именно: все видеофайлы должны быть в формате mp4, все аудиофайлы иметь формат m4a или mp3, не использовать японские символы в именах файлов.
Далее запускаем Android Studio. В главном меню выбираем "File\New\New Project (Файл\Новый\Новый Проект)". В появившемся окне на вкладке "Phone and Tablet (Телефон и планшет)" выбираем "Empty Views Activity (Пустая Активность)", после чего нажимаем кнопку "Next (Далее)".
В следующем окне указываем параметры для активности:
- Имя (Name): "My Application"
- Имя пакета (Package name): "jp.tyrano.tyranoplayerframework"
- Место хранения проекта (Save location): "Путь к папке, куда нужно сохранить проект"
- Язык (Language): "Java"
- Минимальный SDK (Minimum SDK): "API 19 («KitKat»; Android 4.4)"
В конце нажимаем кнопку "Finish (Готово)". Android Studio в течение нескольких минут сгенерирует новый проект. Теперь, нужно открыть проект в проводнике, для этого выберите на панеле "Project (Проект)" проект "app", вызовите контекстное меню и перейдите в пункт меню "Open In\Explorer (Открыть в\Проводник)".
Когда откроется окно проводника, перейдите в каталог /app/src и удалите папку main. Далее откройте папку с распакованным TyranoPlayer, выберите папку main и скопируйте её вместо удаленной папки, а именно в /app/src проекта Android Studio.
Осталось добавить саму игру в проект. Копируем файлы игры полученные после экспорта игры из TyranoBuilder в папку /main/assets/, которые находятся в корневой папке программы под названием android_xxxxxxx_xxxxxx.
После проделанных операций, вернитесь в Android Studio, и нажмите кнопку воспроизведения (Run ‘app’) на панеле инструментов. Если игра запустилась, поздравляем вас, но если при сборке проекта возникли сообщения об ошибках, то их можно устранить, щёлкнув по ссылке в сообщении. В результате, если не будет хватать какого-то компонента, он будет установлен или вас перебросит на страницу с документацией, где будет описана данная проблема и способы её решения.
Примечание:
Способ сборки проекта, указанный в этом разделе, может отличиться в разных версиях Android Studio, как и возникающие ошибки.
Дополнительные советы по Android
При портировании проекта, может возникнуть проблемы с некорректным отображением игры при разной ориентации экрана как на эмуляторе, так и на реальном устройстве. В данной ситуации необходимо выполнить более качественное тестирование игры в разных режимах работы устройства.
По умолчанию в Android Studio имя вашего проекта может быть неприемлемым для использования, например TyranoPlayerFramework. Чтобы его изменить, на панеле проекта выберите "App\Res\Values" и откройте файл strings.xml. Найдите строку , где TyranoPlayerFramework замените на новое название игры.
Twine и персональные компьютеры
Благодаря HTML5 и JavaScript, игры созданные на Twine, совместимы с большинством операционных систем и устройств. Выполнив экспорт игры, её сразу можно запустить в браузере на любом устройстве.
Для этого в Twine перейдите на вкладку "Build (Собрать)" и нажмите "Publish to File (Опубликовать в файл)", когда откроется окно сохранения файла укажите каталог для сохранения.
Twine на iOS и Android
Самым простым способом собрать игру Twine для устройств iOS и Android — это использовать Apache Cordova, которая позволяет создавать мобильное приложение с помощью HTML5, CSS3 и JavaScript.
Примечание:
Не забудьте, что для создания игры на iOS потребуется: компьютер Mac, учетная запись разработчика Apple, Xcode, настроить профиль и сертификат, а для Android потребуется Android Studio и сопутствующие инструменты, которые нужно установить через SDK Manager.
Что касается Apache Cordova, то познакомиться с данной технологией можно на сайте: https://cordova.apache.org/.
Чудеса сборки проекта на Apache Cordova
Чтобы начать работать с замечательным инструментом Apache Cordova, сперва его нужно установить и настроить. Для этого выполним следующие шаги:
- Загрузим и установим Node.js со страницы: https://nodejs.org/ru/download.
- Установим Cordova с помощью утилиты npm Node.js, выполнив команду: npm install -g cordova.
- Для платформы Android установим Android Studio и настроим среду разработки следуя инструкции с официального сайта: https://cordova.apache.org/docs/en/12.x/guide/platforms/android/index.html. Для платформы iOS установим Xcode и настроим среду выполнив инструкцию по адресу: https://cordova.apache.org/docs/en/12.x/guide/platforms/ios/index.html.
Примечание:
Здесь не описана более подробная установка среды разработки, так как Cordova очень чувствительна к версии инструментов разработки, и при выходе нового обновлении инструкция может измениться.
Теперь преобразуем игру Twine в приложение для iOS и Android выполнив следующие шаги:
- Создадим проект Apache Cordova. Для этого открываем терминал командной строки и переходим в папку, где будет создан проект. Выполняем команду: cordova create <path>, где вместо path указываем имя проекта.
- Настраиваем проект. Открываем в текстовом редакторе файл config.xml, который находится в корневой папке проекта.
<?xml version="1.0" encoding="utf-8" ?>
<widget
id="io.cordova.hellocordova"
version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
>
<name>HelloCordova</name>
<description>Sample Apache Cordova App</description>
<author
email="dev@cordova.apache.org"
href="https://cordova.apache.org"
>
Apache Cordova Team
</author>
<content src="index.html" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
</widget>
Вы можете задать в теге name имя приложения, в теге description его описание. Так же можете указать контактную информацию используя тег author, а в теге content определить стартовую страницу приложения.
- Копируем игру Twine в папку www проекта Cordova. При этом незабываем правильно указать стартовую страницу для приложения.
- Добавляем платформу. В папке проекта выполняем команду: cordova platform add <platform name>, где platform name – имя платформы, это android или ios. В результате в папке platforms будет сгенерирован проект для Android или iOS.
- Построим приложение выполнив команду: cordova build.
- Запустим приложение. Для этого вводим команду: cordova run <platform name>, где в параметре platform name указываем платформу. После чего запуститься эмулятор устройства вместе с игрой.
Хоть установка, а особенно настройка Apache Cordova может показаться сложной с массой проблем, но в конечном счёте сборка веб игры на Twine для мобильных устройств происходит в три команды.
Для упрощения процесса, приложение можно создать и добавить платформу в Cordova, а сгенерированный код открыть и собрать в IDE Android Studio или Xcode.
Экран заставки для Android
В последних версиях Android используется специфическая структура экранной заставки (смотри ссылку: https://developer.android.com/develop/ui/views/launch/splash-screen#splash_screen_dimensions). Из-за чего вы имеете возможность изменить только иконку на заставке указав параметр AndroidWindowSplashScreenAnimatedIcon, цвет фона через параметр AndroidWindowSplashScreenBackground, цвет фона иконки AndroidWindowSplashScreenIconBackgroundColor. Для иконки заставки используется файл векторной графики XML или файл растровой графики PNG (Portable Network Graphics). В результате добавляем в файл config.xml перед тегом </widget> следующий код:
<platform name="android">
<!-- Иконка для экрана загрузки -->
<preference
name="AndroidWindowSplashScreenAnimatedIcon"
value="res/screen/android/splash-port-xxhdpi.png"
/>
<!-- Цвет фона -->
<preference name="AndroidWindowSplashScreenBackground" value="#0ff000" />
</platform>
<!-- Время отображения в миллисекундах -->
<preference name="SplashScreenDelay" value="10000" />
<!-- Разрешение на управление появления и исчезновения заставки -->
<preference name="FadeSplashScreen" value="false" />
Иконки для Android
Процесс добавления иконок для приложения на Android происходит следующим образом:
- Добавляем код в файл config.xml перед тегом </widget>.
<platform name="android">
<icon src="res/icon/android/ldpi.png" density="ldpi" />
<icon src="res/icon/android/mdpi.png" density="mdpi" />
<icon src="res/icon/android/hdpi.png" density="hdpi" />
<icon src="res/icon/android/xhdpi.png" density="xhdpi" />
<icon src="res/icon/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/icon/android/xxxhdpi.png" density="xxxhdpi" />
</platform>
- Переходим в папку с проектом Apache Cordova. Далее, если папка res ещё не создана, создаем её. Потом, создаем внутри этой папки еще одну подпапку с именем icon, а в ней создаем папку под названием android. В конце вы получите следующую структуру папок YourApp/res/icon/android, где YourApp — это имя папки с проектом.
- Используя графический редактор, создаем изображение иконки с разрешением 1024 x 1024 пикселя, и сохраняем его в формате PNG.
- Используя полученный файл, создаем набор иконок, на основе правил установленные спецификацией Google. Для этого рекомендуется использовать бесплатный онлайн-сервис ResizeAppIcon, который доступный по ссылке: https://resizeappicon.com/.
- На странице онлайн-сервиса находим кнопку "Upload File (Загрузить файл)" и перетягиваем на неё файл с изображением или нажимаем на ней для загрузки изображения.
- Находим раздел Android и выбираете "All (Все)".
- Прокручиваем страницу вниз до кнопки "Download Selected (Загрузить выбранное)" и нажимаете её. В результате вы получите zip-файл, содержащий иконки для вашего Android проекта.
- Распаковываем zip-файл в созданную нами папку для иконок Android.
Экран заставки для iOS
Используя графический редактор создайте изображение для экрана заставки с разрешением 2208 x 2208 пикселя. Только учитывайте, что устройства имеют разные расширение экранов, и при масштабировании во весь экран, края будут обрезаны. Поэтому не следует размещать важную информацию в данных областях.
Когда изображение готово, нужно выполнить раскадровку для разных устройств iOS. Как правило, вам потребуется изображения с увеличением 1x, 2x и 3x (см. Таблицу 6-5), так же вам понадобятся изображения для горизонтального и вертикального режима экрана (см. Таблицу 6-6), и ещё нужны изображения для устройств (см. Таблицу 6-7).
Таблица 6-5. Масштабы изображений
| Масштаб | Устройство |
|---|---|
| 1x | Все устройства без Retina |
| 2x | Устройства с Retina |
| 3x | iPhone 6+/6s+,7s+ |
Таблица 6-6. Режимы экранов
| Ширина | Высота | Ориентация |
|---|---|---|
| any | any | Любая |
| com | any | Вертикальная |
| any | com | Горизонтальная (широкая) |
| com | com | Горизонтальная (узкая) |
Таблица 6-7. Изображения для устройств
| Идиома | Устройство |
|---|---|
| ipad | Все iPad |
| iphone | Все iPhone и iPod Touch |
| universal | Все устройства |
Во время сохранения, имя файла формируется на основе описанных выше правил. В результате мы получим:
Таблица 6-8. Названия для файлов
| Масштаб | Идиома | Ширина | Высота | Расширение | Имя файла |
|---|---|---|---|---|---|
| 2x | universal | any | any | 2732x2732 | Default@2x~universal~anyany.png |
| 2x | universal | com | any | 1278x2732 | Default@2x~universal~comany.png |
| 2x | universal | com | com | 1334x750 | Default@2x~universal~comcom.png |
| 3x | universal | any | any | 2208x2208 | Default@3x~universal~anyany.png |
| 3x | universal | any | com | 2208x1242 | Default@3x~universal~anycom.png |
| 3x | universal | com | any | 1242x2208 | Default@3x~universal~comany.png |
| 2x | iphone | any | any | 1334x1334 | Default@2x~iphone~anyany.png |
| 2x | iphone | com | any | 750x1334 | Default@2x~iphone~comany.png |
| 2x | iphone | com | com | 1334x750 | Default@2x~iphone~comcom.png |
| 3x | iphone | any | any | 2208x2208 | Default@3x~iphone~anyany.png |
| 3x | iphone | any | com | 2208x1242 | Default@3x~iphone~anycom.png |
| 3x | iphone | com | any | 1242x2208 | Default@3x~iphone~comany.png |
| 2x | ipad | any | any | 2732x2732 | Default@2x~ipad~anyany.png |
| 2x | ipad | com | any | 1278x2732 | Default@3x~ipad~comany.png |
Далее переходим в папку с проектом Apache Cordova и создаём следующую структуру папок /res/screen/ios. После чего копируем в неё созданные файлы.
В завершении, в файл config.xml перед тегом </widget> добавляем следующие строки:
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<splash src="res/screen/ios/Default@2x~universal~comany.png" />
<splash src="res/screen/ios/Default@2x~universal~comcom.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />
Иконки для iOS
Процесс добавления иконок в проекте Apache Cordova для iOS состоит из тех же шагов, как и для Android. Откройте онлайн-сервис ResizeAppIcon, загрузите изображение, выберите iOS, и нажмите "Download Selected (Загрузить выбранное)".
Далее переходим в папку с проектом Apache Cordova и создаём следующую структуру папок /res/icon/ios. После чего распаковываем в ней скачанный zip-файл.
Далее, в файле config.xml перед тегом </widget> добавляем следующий код:
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icon/ios/Icon-60@3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/Icon-Notification.png" width="60" height="60" />
<icon src="res/icon/ios/Icon-60@2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icon/ios/Icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/Icon-76@2x.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/icon/ios/Icon-Small-40.png" width="40" height="40" />
<icon src="res/icon/ios/Icon-Small-40@2x.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/Icon.png" width="57" height="57" />
<icon src="res/icon/ios/Icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icon/ios/Icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/Icon-72@2x.png" width="144" height="144" />
<!-- iPad Pro -->
<icon src="res/icon/ios/Icon-83.5@2x.png" width="167" height="167" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icon/ios/Icon-Small.png" width="29" height="29" />
<icon src="res/icon/ios/Icon-Small@2x.png" width="58" height="58" />
<icon src="res/icon/ios/Icon-Small@3x.png" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icon/ios/Icon-Small-50.png" width="50" height="50" />
<icon src="res/icon/ios/Icon-Small-50@2x.png" width="100" height="100" />
<!-- iTunes Marketing Image -->
<icon src="res/icon/ios/iTunesArtwork@2x.png" width="1024" height="1024" />
</platform>
Примечание:
Данные тега <platform name="ios"> для иконок и для экрана заставки можно объединить в один тег.
Заключение
В этой главе было рассказано, как в Ren’Py, TyranoBuilder и Twine развернуть игры для самых популярных платформ.
Следовательно, у вас должны быть знания, как это сделать на Ren’Py, а именно:
- Как развернуть игру на персональном компьютере под управлением Windows, macOS и Linux
- Как установить и использоваться Ren’Py Android Packaging Tool (RAPT)
- Как запустить игру собранную для Android на Chrome OS и как запустить игру в браузере
- Что нужно сделать, чтобы развернуть приложение на iOS
О TyranoBuilder вы узнали:
- Как создать проект для Windows, macOS и браузера
- Как экспортировать игру TyranoBuilder для iOS с помощью TyranoPlayer и Apple Xcode
- Как использовать Android Studio для запуска игры на Android
Относительно Twine, узнали:
- Как собрать игру для Windows, macOS и браузера
- Как при помощи Apache Cordova создать приложение для iOS и Android
Так же вы узнали:
- Как использовать онлайн-сервис для создания иконок.
- Юридические особенности, и что должны включить в документацию игры на Ren’Py при создании приложения для Android и iOS.