Нюансы портирования игры на 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

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

2222
16 комментариев

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

2
Ответить

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

1
Ответить

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

Ответить

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

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

1
Ответить

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

Ответить

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

Ответить

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

Ответить