Нюансы портирования игры на iOS: опыт авторов OVIVO

Технические трудности при переносе игры с ПК.

В мае 2017 года петербургская студия IzHard выпустила в Steam медитативную головоломку OVIVO, а 28 марта 2018 года состоялся её релиз для iOS.

В этой игре нужно управлять маленьким шариком, который катается по абстрактным образам, постоянно меняя свой собственный цвет: попадая в чёрное пространство, OVO становится белым, и наоборот.

Казалось бы, переносить минималистичную в визуальном плане игру на мобильную платформу — дело нехитрое, однако здесь разработчики столкнулись с некоторыми трудностями, вызванными как техническими ограничениями смартфонов, так и спецификой выпуска игр для устройств от Apple.

В колонке для DTF геймдизайнер OVIVO Александр Виласак рассказал о об опыте своей команды и о том, что ей пришлось сделать, чтобы адаптировать головоломку под телефоны.

Нюансы портирования игры на iOS: опыт авторов OVIVO

Вступление

Почти год прошёл с того момента, когда я отвечал на вопросы DTF о создании OVIVO. Сегодня мне хотелось бы поделиться с вами историей о том, как мы её портировали и недавно выпустили на iOS.

Игра сделана на Unity3D и, в целом, сложностей особых не возникло. Но мы с командой столкнулись с рядом тонкостей, которыми интересно будет поделиться. Рассказ будет о том, как мы сделали «работу над ошибками» и полностью сменили UI, добавили новых фич, оптимизировали игру для мобильных устройств и боролись с некоторыми подводными камнями в работе с iTunes Connect.

Дизайн

Релиз игры на площадке Steam очень помог нам собрать фидбек от реальных игроков. Многие жаловались на неинтуитивный UI и отсутствие привычных элементов в меню выбора уровней. В ПК версии в качестве такого меню выступал круг, где иконки уровней располагались вдоль вложенных друг в друга колец.

Карта уровней в ПК-версии
Карта уровней в ПК-версии

Очевидно, что такое меню не подходит для небольших экранов телефонов. Мы пробовали несколько вариантов, в том числе и показывать только какую-то часть меню, но тогда приходилось масштабировать узор или как-то не интуитивно слайдить. В общем, эта идея не работала как надо.

Реализовывать карту уровней простым списком или очевидной «картой» нам не хотелось — мы привыкли к новаторскому подходу к делу. Начался брейнсторминг. Поскольку мы изначально решили сосредоточиться на разработке под iOS, то когда я увидел эту картинку, то мне пришла в голову идея использовать представление «золотого сечения» в виде спирали, бесконечно закручивающейся к центру. Такая карта уровней оказалась более интуитивной, а также решала вопрос с расположением дополнительных уровней, которые могли бы появиться в DLC.

Нюансы портирования игры на iOS: опыт авторов OVIVO

В начале разработки у нас были искусственные ограничения, которые помогли нам придумать идеи для игры. Одно из ограничений — отсутствие текста. Было интересно, но образовалась проблема в объяснении «опасных» элементов UI (вроде кнопки, стирающей все достижения), поэтому мы решили всё же добавить текст и доходчиво объяснить игроку, что будет при нажатии того или иного элемента интерфейса.

Впоследствии это решение создало аврал с локализацией, о которой я расскажу в конце статьи. Была также проблема с адаптацией геймплея: игровая сессия для каждого уровня не была рассчитана на мобильного игрока. Прохождение одного уровня занимало от 10 до 20 минут, но нам объяснили, что на телефонах игрок привык к более коротким сессиям.

Тогда мы просто разделили каждый уровень на три маленьких. И при прохождении всех трёх подуровней игрок может увидеть, как они объединяются в одну картинку, которая и была нашим уровнем изначально.

Нюансы портирования игры на iOS: опыт авторов OVIVO

Техническая часть и оптимизация

Одна из новых фич, которую мы добавили в iOS версии, был эффект жидкости при переключении цвета.

Похожий эффект уже был реализован в Steam-версии и основан он был на динамической генерации меша нужной формы, который рисовался поверх платформы. К сожалению, такой подход работал только на платформах определённой формы. Мы попробовали несколько других подходов, основанных на той же идее генерации меша, но всё время упирались либо в проблемы с производительностью, либо в проблемы с нежелательными визуальными артефактами.

В результате пришлось использовать совсем другой подход — рисовать этот эффект жидкости с помощью шейдеров уже на этапе постпроцессинга. Идея заключалась в том, чтобы для каждого пикселя на каждом кадре определить расстояние до центра ОВО (главного героя) и до ближайшей точки на платформе. Далее, с помощью нехитрой формулы можно определить, будет ли этот пиксель чёрным или белым.

Расстояние до ОВО и до платформы вычислялось специальными шейдерами и передавалось дальше через альфа-канал изображения. Модифицировав способ блендинга для этих шейдеров, у нас получилось вычислить результирующее значение, по которому далее третий шейдер решал, каким цветом красить каждый пиксель. В результате получилась плавная анимация, без каких либо визуальных артефактов и с минимальным эффектом на производительность.

Нам казалось, что проблем с оптимизацией не будет. Два цвета, никаких теней, вся графика в SVG — красота. Но на деле, мы облажались, вспомнив про разницу в железе ПК и мобильных устройств, только когда получили первые результаты тестов. На ПК мы даже не задумывались, что нам будет не хватать оперативной памяти.

Сейчас, редко встретишь ноутбук с памятью меньше, чем 2Гб. А с телефонами, как раз наоборот. Профайлер показывал, что основной объём памяти занимает покадровая анимация. Художники делали плавную анимацию с большим количеством кадров, что было излишним. Уменьшение количества кадров вдвое не сильно повлияло на качество, но зато существенно уменьшило объём занимаемой памяти.

Другая проблема оказалась в том, что мощности GPU многих девайсов не хватало для поддержки MSAA4x при 60 кадров в секунду. Для OVIVO разница между 30 и 60 FPS очень заметна. А без сглаживания некоторые UI элементы выглядели явно пиксельными. Дело в том, что мы использовали Unity plugin SVG Importer, который преобразует SVG в 3D mesh, а при отрисовке без антиалиасинга он создавал эффект «лесенки». C PNG такой проблемы не было — SVG в PNG можно экспортировать под нужное разрешение с идеальным сглаживанием, поэтому часть ассетов мы перенесли в PNG.

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

iTunes Connect и локализация

Ещё немного расскажу про iTunes Сonnect — это может быть интересно для тех, у кого не было с ним опыта.

Чтобы выпустить игру на iOS, вам потребуется использовать эту площадку. После Steam, где есть куча туториалов и документации iTunes Connect мне показалась очень неудобной. Самое неприятное, что для загрузки билда, видео, стикеров вам понадобится macOS. Решаемо, конечно, но даже просмотр видео-уроков на официальном cайте требует браузера Safari.

Другая неприятность возникла неожиданно и в дальнейшем сделала релиз игры очень сумбурным. Для работы с iTunes Connect вам нужен аккаунт разработчика, который стоит примерно 100 долларов. Мы пожадничали и решили для первых тестов использовать старый аккаунт нашего программиста.

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

Нюансы портирования игры на iOS: опыт авторов OVIVO

Решение подсказал Аким Касабулатов (глава студии MetalBear — DTF) — мы выпустили игру в одной стране и сразу же убрали её из магазина. После этой махинации уже можно спокойно переносить приложение. Однако после этого не получится раздавать промо-коды до релиза и не будет доступна опция предзаказа, ведь вы же уже выпустили игру.

Последнее о чём хотелось бы рассказать — это про локализацию в Китае. Там, в зависимости от регионов, используют в письме либо упрощённый китайский, либо традиционный. Мы думали, что это не так уж важно и можно выбрать один наиболее распространённый вариант, а именно упрощённый. Но оказалось, что это совсем разная письменность.

За 24 часа до релиза, команда Apple известила нас о том, что нам следует убрать упрощённый китайский для региона, где используется традиционный. Мы обратились за переводом к ребятам из Inlingogames.com, которые очень оперативно перевели весь текст. За это им большое спасибо.

Нюансы портирования игры на iOS: опыт авторов OVIVO

Пожалуй, на этом хочется закончить. Хочу пожелать удачи всем, кто делает игры своими силами и надеюсь, что статья оказалась полезной.

11 показ
4K4K открытий
16 комментариев

Самое неприятное, что для загрузки билда, видео, стикеров вам понадобится macOSА для тестирования приложения на iOS вы что использовали тогда, если не секрет?

Ответить

Привет. Сначала друзья, знакомые. Собирали по каждой модели, чтобы проверить хотя бы запуск. Эмулятор не даст понять какой fps будет на телефоне. Поэтому мы воспользовались этим сервисом https://aws.amazon.com/device-farm/. Не самый удобный, но нам главное было узнать выдаваемые fps и наличие крашей.

Ответить

Может эмулятор?

Ответить

"После Steam, где есть куча туториалов и документации iTunes Connect мне показалась очень неудобной. "

То же самое можно сказать и наоборот - после iTunes Connect и Google Play консолей, Стим админка мне по началу казалась крайне хардкорной.

Ответить

Конечно, в первую очередь - это дело привычки. Itunes более лаконичен и прост, но многие моменты в управлении все же не очевидные.

Ответить

Почему вам надо было именно переносить игру, а не создать новое приложение?

Ответить

В Steam версии не получилось реализовать все фичи, которые хотели изначально. Релиз OVIVO на iOS стала для нас, как работа над своими ошибками и приобретение дополнительного опыта.

Ответить