Sandwich Swipe: Дворічна подорож, щоб створити затишну мобільну гру

Я є дизайнером інтерфейсу користувача (UI) та продукту для Sandwich Swipe — затишної мобільної гри, яка потрапила до списку кращих нових ігор Apple Store в кількох країнах та була завантажена понад 10 тис. користувачів.

Ця стаття описує мій процес дизайну та основні висновки з розробки моєї першої гри:

  • Вибір концепції гри для Sandwich Swipe
  • Глибоке занурення у процес дизайну інтерфейсу та ілюстрації
  • Найскладніші моменти у створенні Sandwich Swipe

pic

Сплеш-арт для Sandwich Swipe

Sandwich Swipe — це мобільна головоломка, де потрібно свайпати різні інгредієнти по сітці і поєднувати їх для створення сендвічів. Кожен рівень має меню сендвічів, які потрібно створити за певну кількість ходів для завершення рівня. Крокуючи вперед по грі, ви відкриваєте нові інгредієнти з унікальними механіками, які роблять головоломки ще більш цікавими та складними.

pic

pic

pic
Скріншоти та відео з гри Sandwich Swipe

Sandwich Swipe була створена командою з двох осіб, до складу якої входили я як дизайнер і мій партнер-розробник гри. Гра повністю безкоштовна і не має покупок в грі, що означає, що ми не заробляємо на ній. Загалом, на розробку пішло більше двох років:

  • Травень 2022 — Почали роботу над Sandwich Swipe.
  • Квітень 2023 — Альфа-реліз для родини та друзів.
  • Листопад 2023 — Бета-реліз для родини та друзів.
  • Червень 2024 — Почали маркетинг у соціальних мережах через відео на Tik Tok, ролики в Instagram та короткі відео на YouTube (насправді, ми повинні були розпочати це набагато раніше).
  • Липень 2024 — Випустили Sandwich Swipe в магазинах Apple та Google.

Вибір концепції гри для Sandwich Swipe

Наша перша спроба

Sandwich Swipe насправді не була нашою першою спробою створити гру. Спочатку ми почали з амбітної багатокористувацької гри, але застрягли досить рано і вирішили поставити її на паузу. Я зіштовхнувся з проблемами анімації складних піксельних атак, а мій партнер зіткнувся з труднощами в мережевому програмуванні та розробці в Unity.

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

Визначення масштабу та вдосконалення Sandwich Swipe

Оригінальна концепція Sandwich Swipe була настільною грою, в якій гравець проходить через підземелля, розв’язуючи головоломки на тему їжі. Замість того, щоб просто свайпати інгредієнти, це була більш буквальна фізична система з поршнями, які штовхали інгредієнти по ряду або стовпцю.

pic

Оригінальний концепт-скетч для Sandwich Swipe

Протягом першого місяця ми витратили більшість часу на звуження масштабу гри і зменшення необхідних зусиль для її реалізації, ухваливши такі рішення:

  • Зберегли простоту: Ми спростили концепцію багатокімнатного підземелля до стандартної рівневої головоломки. Це зняло складність, таку як потреба в сюжеті та ігрових елементах між головоломками.
  • Додавали нові елементи гри в обмеженій кількості: Ми обмежили концепцію гри лише сендвічами, замість багатьох різних рецептів. Ми також дуже обережно додавали нові інгредієнти, переконуючись, що вони мають унікальні та цікаві механіки.
  • Тільки мобільний формат: Гра доступна лише для Android та iOS.
    Хоча кросплатформенна розробка легко здійснюється за допомогою ігрових движків, таких як Unity (що ми й використовували), створення адаптивних UI макетів і налаштування взаємодії з сенсорами для різних платформ є дуже трудомістким процесом.
  • Одиночний гравець: Ми вибрали концепцію гри для одного гравця, оскільки багатокористувацький режим додає складність мережевого взаємодії в загальну архітектуру гри.
  • Анімації лише через код: Анімації в грі реалізовані виключно через код, а не шляхом ілюстрування кожного кадру окремо, щоб заощадити час на створення ілюстрацій.

Тестування нашої ігрової концепції

Ми хотіли якомога швидше протестувати наш перший прототип, тому що жодні додаткові функції або полірування не могли компенсувати нудний базовий механізм гри.

Одне з основних спогадів про розробку Sandwich Swipe стало те, коли ми попросили двох наших друзів пройти кілька перших рівнів, які ми розробили. Прототип складався з загального екрану вибору рівня та простого ігрового екрану (тільки меню, дошка і кількість залишкових ходів).

На нашу здивованість, одразу після того, як ми дозволили друзям пограти в прототип, вони не могли відірватися від телефону. Навіть коли вони повернулися додому, вони наполягали на тому, щоб завершити найскладніший рівень за допомогою ручки та паперу і надіслати нам скріншоти своїх рішень, щоб перевірити, чи були вони правильними. Саме в цей момент ми зрозуміли, що у нас є дуже цікава концепція гри, і було захоплююче бачити, як людям так весело грати в нашу гру!

pic

Спроби розв’язання, надіслані через Messenger

Глибоке занурення в процес дизайну інтерфейсу та ілюстрацій

Дизайн Sandwich Swipe проходив відносно гладко, але, як і очікувалося, нам довелося багато разів змінювати та доопрацьовувати деталі. Дизайни ігрових екранів були прототиповані в Figma (додаток для прототипування UI), а ілюстрації зазвичай починалися як ескізи на папері та переходили до цифрових ілюстрацій за допомогою Clip Studio Paint (програмне забезпечення для ілюстрацій).

У проекті Figma кожна сторінка або основний стан мали відповідний екран. Наприклад, екран рівня гри мав багато різних макетів, які відповідали всім можливим станам: стандартний ігровий стан, наведення на меню, витратити всі ходи, стан поразки рівня, стан успіху рівня та стани меню налаштувань.

pic

Загальний вигляд різних екранів, прототипованих в Figma

Іноді я швидко створював макети за допомогою функції редагування фото в Facebook Messenger, щоб отримати швидкий відгук від мого студійного партнера. Однак це зазвичай призводило до відповіді "це круто, але я хочу справжній дизайн", адже йому доводилося це впроваджувати. 😅

pic

Екран Facebook Messenger проти екрана Figma. Я: "Вони однакові, малюнок же" 😂

Ілюстрація є ітеративним процесом

Легко прив’язатися до ілюстрацій, над якими ти працював довгий час, але іноді, задля гри, потрібно вміти відпустити і повністю переглянути щось. Головна домашня сторінка була гарним прикладом дизайну, який пройшов через багато суттєвих змін.

Оригінальна концепція дизайну головної сторінки почалася з швидкого ескізу на папері, а потім була перенесена в цифрову форму. Це була перша робота, створена для гри.

pic

pic

pic

Еволюція основного зображення від ескізу до цифрової ілюстрації

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

pic

Приклади макетів для головної сторінки

Однак після нескінченних варіантів я змушений був визнати, що поточна ілюстрація не підходить. По-перше, у неї був неправильний аспект співвідношення — екрани телефонів вертикальні, тому зображення довелося сильно обрізати, щоб воно вмістилося на екрані. Ще важливіше, ілюстрація виглядала плоскою. Не було єдиної кольорової схеми, а предмети виглядали окремими і розташованими занадто далеко один від одного. Я хотів щось більш єдине і привабливе, щоб зацікавити користувачів у нашій грі, тому я вирішив повністю переробити її.

Переосмисливши дизайн, я зупинився на набагато простішому зображенні нашого головного героя, який їсть сендвіч. Кольорова схема краще відповідала решті гри, а дизайн персонажа був більш унікальним і відмінним. Однак навіть цей процес був ітеративним, і після кількох місяців я, спираючись на відгуки, вирішив, що персонаж виглядав дещо беземоційним і незацікавленим. Знову ж таки, я вирішив внести корективи і змінив дизайн очей персонажа.

pic

pic

До і після зміни очей персонажа та скріншот ілюстрації, що використовується на головному екрані

Навчившись на великій кількості витраченого часу на головну сторінку, я став більш свідомим у процесі створення ітерацій в дизайні. Прикладом цього є дизайн інгредієнта меду.

Спочатку я випробував кілька варіантів низької точності: мед, що капає зверху, мед, що облягає всі боки, і візерунок з медових сот. Я намагався не витрачати забагато часу на їх малювання, оскільки це були лише тимчасові елементи, які допомогли визначити загальний напрямок.

Я зупинився на дизайні меду, що капає, оскільки він був легко впізнаваним як мед, але при цьому не закривав занадто багато від основного інгредієнта. Після цього я кілька разів переробляв його, змінюючи форму та кольори, поки він не став привабливим і легким для сприйняття навіть у малих розмірах.

pic

pic

pic

Процес малювання інгредієнта меду

“Зробіть це соковитішим”

Це була фраза, яку я чув від мого студійного партнера знову і знову. Соковитість (Juiciness) — це дрібні налаштування, які роблять гру ще цікавішою і веселішою для гри.

Ось кілька прикладів соковитості, які ми додали до Sandwich Swipe:

  • Кіт на екрані назви гри анімований.
  • Коли ви проводите плитками інгредієнтів по ігровій дошці, взаємодії налаштовані так, щоб бути чутливими і задовільними.
  • Коли стан гри стає неможливим через відсутність всіх необхідних інгредієнтів, кнопка спробувати знову автоматично з’являється, щоб підказати користувачеві перезапустити рівень.

Соковитість також була терміном, який часто згадувався під час процесу ілюстрування. Нижче наведено приклад до і після ілюстрації "Немає ходів".

pic

До і після того, як ми “зробили це соковитішим”!

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

Інший спосіб додати візуальної соковитості до гри — це використовувати декоративні елементи. Одним із таких прикладів були банери, які ми додали до верхньої частини вікон рівнів після альфа релізу.
Метою було зробити спливаючі вікна менш загальними та використовувати головного персонажа частіше, щоб гра виглядала більш унікальною. Ці банери також почалися як ескізи в блокноті та перейшли до цифрових ілюстрацій.

pic

Оригінальні ескізи банерів

pic

Фінальні ілюстрації банерів

Використання вже існуючих ресурсів

Протягом півтора року ми використовували набір UI-ресурсів, поки не були готові малювати UI-компоненти вручну. Це включало такі елементи, як кнопки та повзунки, і допомогло нам значно скоротити час, необхідний для створення працюючого прототипу гри. Наприкінці розробки гри ми замінили майже всі елементи з пакету ресурсів на індивідуальні, щоб наша гра відповідала затишному стилю, який ми прагнули досягти, і не виглядала занадто загальною.

Найскладніші частини розробки Sandwich Swipe

Утримання мотивації

Ви помітите, що назва цієї статті називає Sandwich Swipe побічною метою, а не основною. Це тому, що обидва ми були корпоративними інженерами-програмістами вдень і дизайнерами/розробниками ігор вночі. Найскладнішою частиною розробки Sandwich Swipe для мене було постійно працювати над грою.

Спочатку був великий імпульс, особливо коли ми додавали нові інгредієнти або функції. Однак іноді могли проходити місяці, коли я не робив ніякого прогресу і знову переживав труднощі зі стартом. Я намагався боротися з цим, взявши на себе одну маленьку задачу за раз, наприклад, намалювати одну іконку, спроектувати частину екрану гри або навіть просто оновити наш список завдань на Trello. Я часто знаходив, що цей невеликий прогрес давав достатньо імпульсу для роботи над більшими завданнями.

Тим не менш, те, що в кінцевому рахунку допомогло нам фінішувати, було встановлення дати випуску Sandwich Swipe і рекламування цього на наших соціальних мережах. Це був неймовірно стресовий підхід, але він змусив нас нести відповідальність за завершення першого випуску гри до певної дати. Це змусило нас визначити, які залишкові завдання були абсолютно необхідні для початкового випуску, такі як завершення рівнів, і що можна додати в пізнішій версії, наприклад, досягнення гри.

Визнання нездорових патернів

Маркетинг — це важлива частина розробки гри, оскільки люди не зможуть грати та насолоджуватися грою, якщо вони про неї не дізнаються. Як я і очікував, це була найменш улюблена частина створення Sandwich Swipe для мене, оскільки це повільний і іноді невтішний процес, що вимагає багато частих і постійних публікацій. Але те, чого я не очікував, це те, що я одразу став obsesивно слідкувати за ним.

Після публікації моїх перших кількох відео на Tik Tok я постійно перевіряв, чи є нові взаємодії чи підписники. Я був у захваті, коли відео отримували багато переглядів за першу годину, і розчарований, коли цього не було, бо мені здавалося, що це означає, що гра буде провалом. Цей патерн дуже швидко став стресовим і нездоровим.

В кінці кінців я змушений був зупинитися і згадати, чому я взагалі працював над цією грою. Sandwich Swipe не приносив нам грошей, тому набір підписників був лише для власного задоволення і не мав жодного впливу на наші кар'єри в розробці ігор. Те, що я справді хотів, це створити гру, яка подобалася б людям.

Ключовим моментом щастя для мене стало побачити реакції наших родин та друзів, коли ми вперше випустили Sandwich Swipe в магазини додатків. Мій вітчим надсилав мені щотижневі відео-реакції моєї мами, яка сиділа на дивані вдома, граючи в Sandwich Swipe. На відео чутно, як вона з ентузіазмом коментує весь свій процес мислення, проходячи рівні.
Було багато "ооох" та "ааах", з часом з'являлись і "чорт забирай" через те, що вона закінчувала ходи саме тоді, коли вже була майже на шляху до перемоги.

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

Останні думки

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

Якщо ви хочете спробувати Sandwich Swipe, вона доступна в Apple та Google магазинах додатків. Сподіваюся, ви отримаєте таке ж задоволення від гри, як ми від її створення! ❤️

Перекладено з: Sandwich Swipe: A two-year side quest to design a cozy mobile game

Leave a Reply

Your email address will not be published. Required fields are marked *