Gamedev Андрей Верещагин
2 930

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

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

В закладки

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

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

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

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

Вступление

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ "items": [{"title":"SVG","image":{"type":"image","data":{"uuid":"0fb5ce4c-d7d3-0c49-f3a5-d05b23fd6689","width":1334,"height":750,"size":40074,"type":"png","color":"","external_service":[]}}},{"title":"PNG","image":{"type":"image","data":{"uuid":"1224fc53-c842-6198-4403-2701950e5651","width":1334,"height":750,"size":15286,"type":"png","color":"","external_service":[]}}}] }

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

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

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

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

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

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

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

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

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

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

#опыт #мобайл #игры

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
Статьи по теме
Чёрное и белое: как создавалась OVIVO
{ "author_name": "Андрей Верещагин", "author_type": "editor", "tags": ["\u043e\u043f\u044b\u0442","\u0438\u0433\u0440\u044b","\u043c\u043e\u0431\u0430\u0439\u043b"], "comments": 16, "likes": 32, "favorites": 20, "is_advertisement": false, "subsite_label": "gamedev", "id": 18013, "is_wide": true }
{ "id": 18013, "author_id": 22254, "diff_limit": 1000, "urls": {"diff":"\/comments\/18013\/get","add":"\/comments\/18013\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/18013"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

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

Популярные

По порядку

Написать комментарий...
2

Самое неприятное, что для загрузки билда, видео, стикеров вам понадобится macOS

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

Ответить
1

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

Ответить
0

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

Ответить
0

Хм, ну вероятно. Просто с такими вещами всё же имеет смысл проверять и как на устройствах работает.

Ответить
1

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Из-за названия.

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

Ответить
0

Ну... можно же было как то проще это решить, например, переименовать существующую игру в "OVIVO_xyz", после чего уже создать новую

Ответить
0

Вроде это тоже нельзя было сделать. Просто я уже точно не помню, но если приложение в состоянии Ready for sale, то можно поменять название в новой версии и она перезальет старую. Но уверен, что это работает до того, как приложение поступило в продажу. А у вас опыт с ItunesСonnect есть?

Ответить
0

Да, десятилетний. Теперь, понятно, спасибо. Если Ready for sale, то так бы не получилось, эпл сличает, что если вы уже прошли ревью, то значит передумывать уже поздно. И трудно их за это винить ))

Ответить
0

* Не уверен(опечатка).

Ответить
–2

"Очевидно, что такое меню не подходит для небольших экранов телефонов" - очевидно как раз то, что такое меню не подходит ни для каких экранов

Ответить
0

Возможно. Мы любим экспериментировать и придумывать что-то новое.)

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Гейб Ньюэлл наконец-то анонсировал то,
чего все так долго ждали
Подписаться на push-уведомления