Sandwich Swipe: двухлетний побочный квест по разработке уютной мобильной игры. Перевод статьи Anastasia Laczko

Я дизайнер и иллюстратор Sandwich Swipe — уютной мобильной игры, которая попала в список лучших новых игр в магазине Apple в нескольких странах и была загружена более чем 10 тысячами пользователей.

С оригиналом можно ознакомиться на Medium [Dec 31, 2024].

В этой статье рассказывается о процессе разработки и основных выводах, которые я сделала, создавая свою первую игру:

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

Sandwich Swipe была создана командой из двух человек, в которую входили я как дизайнер и моя коллега, которая занималась непосредственно разработкой. Игра полностью бесплатна и не имеет внутриигровых покупок, так что мы не зарабатываем на ней денег. В общей сложности на создание игры ушло немногим более двух лет:

На самом деле Sandwich Swipe не была нашей первой попыткой разработать игру. Изначально мы начали с совершенно другого проекта: амбициозной многопользовательской игры, но довольно быстро зашли в тупик и решили отложить разработку. У меня возникли трудности с анимацией сложных пиксель-арт атак, а коллега столкнулась с проблемами в работе с сетью и в целом разработкой на Unity.

Если подумать, то самая большая проблема заключалась в том, что мы сразу пытались сделать слишком много новых и сложных вещей. Вместо этого мы решили начать с технически более простой игры, которой в итоге и стала Sandwich Swipe.

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

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

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

В процессе разработки Sandwich Swipe нам запомнилось, как мы попросили двух друзей сыграть в первые несколько уровней. Прототип состоял из общего экрана выбора уровня и простого игрового экрана: только меню, игровое поле (доска) и количество оставшихся ходов.

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

Разработка Sandwich Swipe прошла относительно гладко, но, как и ожидалось, пришлось пройти чрез множество итераций. Прототипы игровых экранов создавались в Figma (приложение для создания прототипов пользовательского интерфейса), а иллюстрации обычно начинались как наброски на бумаге и переходили в цифровые иллюстрации с помощью Clip Studio Paint (программа для создания иллюстраций).

В проекте Figma для каждой страницы или основного состояния игры был создан соответствующий макет. Например, экран игрового уровня имел множество различных макетов, соответствующих всем возможным состояниям:

Иногда я быстро придумывала макеты, используя функцию редактирования фотографий в Facebook Messenger, чтобы получить быстрый отклик от коллеги, однако обычно получала в ответ: «Это круто, но мне нужен реальный дизайн», поскольку в её задачи входило дальнейшее воплощение макета в жизнь.

Легко привязаться к иллюстрациям, на которые вы потратили много времени, но иногда ради игры нужно уметь отпустить и полностью переосмыслить проделанное. Наша главная страница — хороший пример дизайна, который прошел через множество итераций.

Первоначальная концепция дизайна главной страницы началась как быстрый набросок на бумаге, а затем была перерисована в цифровом формате. Это первый арт, созданный для игры.

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

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

Переосмыслив дизайн, я остановилась на более простом изображении нашей главной героини, поедающей сэндвич. Цветовая гамма больше соответствовала остальной части игры, а дизайн персонажа стал уникальным и характерным. Однако и этот процесс был итеративным: после того, как первоначальный рисунок провисел несколько месяцев, я решила, что, судя по отзывам, персонаж выглядит немного безэмоциональным и незаинтересованным. Я снова решила внести коррективы и в итоге изменила дизайн глаз персонажа.

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

Для начала я попробовала несколько вариантов дизайна в низком качестве: стекающий сверху мёд, мёд по всем сторонам и узор в виде сот. Я постаралась не тратить слишком много времени на их прорисовку, поскольку они были всего лишь условными обозначениями, помогающими определиться с общим направлением.

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

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

Некоторые примеры сочности, которые мы добавили в Sandwich Swipe:

Термин «сочность» также часто использовался в процессе работы над иллюстрацией. Ниже представлен пример иллюстрации, сопровождающей истечение у игрока доступных ходов [Out of moves], до и после:

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

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

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

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

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

Что в итоге помогло нам пересечь финишную прямую, так это выбор даты выхода Sandwich Swipe и реклама её на наших каналах в социальных сетях. Это был невероятно напряженный подход, но он заставил нас взять на себя ответственность за завершение первого релиза игры к определённой дате. Это заставило нас расставить приоритеты: какие оставшиеся задачи были абсолютно необходимы для первоначального релиза (например, доработка уровней), а что можно включить в более позднюю версию (например, добавление игровых достижений).

Маркетинг — неотъемлемая часть разработки игр, потому что люди не смогут играть и наслаждаться игрой, если никогда о ней не узнают. Как я и ожидала, маркетинг стал самой страшной частью создания Sandwich Swipe для меня, потому что это медленный и иногда удручающий процесс, который требует частого и последовательного размещения информации. Но чего я не ожидала, так это того, что сразу же стану одержима им.

Выложив несколько первых видеороликов в Tik Tok, я постоянно проверяла, появились ли у нас новые участники или подписчики. Я радовалась, когда видео набирало много просмотров в первый час, и расстраивалась, когда этого не происходило, потому что мне казалось, что это означает, будто бы игра будет провальной. Такая модель поведения очень быстро стала стрессовой и нездоровой.

В конце концов, мне пришлось сделать паузу и вспомнить, зачем я вообще работала над игрой. Sandwich Swipe не приносила нам никакого дохода, поэтому привлечение подписчиков имело значение чисто для самоудовлетворения и никак не могло улучшить или сломать нашу карьеру. Что меня действительно волновало, так это создание игры, которая бы нравилась людям.

Ключевым моментом счастья для меня стало наблюдение за реакцией наших родных и друзей, когда мы впервые выпустили Sandwich Swipe в магазинах приложений. Отчим еженедельно присылал мне видео с реакцией мамы, которая сидела дома на диване и играла в Sandwich Swipe. На видео можно было услышать, как она взволнованно рассказывает весь ход своих мыслей во время прохождения уровней. Было много «ох» и «ах», а иногда и «ох, чёрт побери!», потому что заканчивались ходы, когда она уже была готова выиграть.

Кроме того, коллеги по работе обращались ко мне за помощью в прохождении уровней, на которых они застряли, а друзья соревновались в том, удастся ли им первыми набрать идеальное количество баллов на всех уровнях. Было очень приятно видеть, как много людей получают удовольствие от игры в Sandwich Swipe!

Разработка Sandwich Swipe научила меня многому из того, что требуется для превращения идеи в полноценную игру. Теперь, когда наша первая игра выпущена, я с нетерпением жду будущего, чтобы работать над ещё более амбициозными проектами. Следите за обновлениями от Lava Drop studios!

Если вы хотите проверить Sandwich Swipe, она доступна в магазинах приложений Apple и Google. Надеюсь, вы получите столько же удовольствия от игры, сколько получили мы от её создания!