Створення 2D-анімацій для мобільної гри

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

Розробка та підтримка будь-яких видів мобільних додатків:

Інформаційні та розважальні мобільні програми
Новинки, ігри, довідники, онлайн-каталоги, погодні, фітнес та здоров'я, туристичні, освітні, соціальні мережі та месенджери, квіз, блоги та подкасти, форуми, агрегатори
Мобільні програми електронної комерції
Інтернет-магазини, B2B-додатки, маркетплейси, онлайн-обмінники, кешбек-сервіси, біржі, дропшиппінг-платформи, програми лояльності, доставка їжі та товарів, платіжні системи
Мобільні програми для управління бізнес-процесами
CRM-системи, ERP-системи, управління проектами, інструменти для команди продажів, облік фінансів, управління виробництвом, логістика та доставка, управління персоналом, системи моніторингу даних
Мобільні програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, платформи надання електронних послуг, платформи кешбеку, відеохостинги, тематичні портали, платформи онлайн-бронювання та запису, платформи онлайн-торгівлі

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

Послуги, які ми пропонуємо
Показано 1 з 1Усі 1734 послуг
Створення 2D-анімацій для мобільної гри
Середній
від 2 тижнів до 3 місяців
Часті запитання

Чому 2D-анімація в мобільній грі рветься на слабких пристроях

2D-анімація в мобільній грі ламається не на флагманах, а на пристроях середнього сегмента — саме там її бачить основна аудиторія.

Ривки анімації на слабкому пристрої проявляються в бою: коли на екрані одночасно живуть два-три десятки спрайтів із прозорістю та ефектами, відмальовування перестає встигати за логікою.

Кадри йдуть нерівно, введення відчувається «ватним», і гравець списує це на керування, а не на графіку.

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

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

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

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

Четверте — втрата вихідників: правки вносять прямо в готові кадри, і повернутися до чистої версії анімації вже неможливо. Усе це лікується на рівні підготовки та збірки ресурсів, а не «оптимізації в кінці», коли контент уже зафіксовано. Розбираємо, як це закривається.

Що дає вибудувана анімація персонажів і бойових ефектів

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

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

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

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

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

Обсяг ресурсів скорочується в рази: у збірку йде один скелет замість тисяч кадрів, і додавання нового ворога перестає впливати на час завантаження рівня.

Порівняння підходів: коли який підходить і чим обмежений

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

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

Процедурна анімація рахує рух за правилами — криві, інтерполяція, шум, зв'язки тіл: пам'яті майже не витрачає, але характер руху дається важко.

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

Підхід Коли підходить Чим обмежений
Покадрова анімація Ефекти, перетікання форм, рідкісні персонажі Вага зростає з кожним кадром; правка руху — перемальовування циклу
Скелетна анімація Цикли ходьби, бігу, атак; підміна частин і подоб Погано тримає тканину та м'які деформації, стики частин помітні
Процедурна анімація Елементи інтерфейсу, тремтіння камери, наведення, відгук на введення Одноманітність; характер руху набирається кодом і налагодженням
Гібридна схема анімації Бойові персонажі та боси, де потрібні і пам'ять, і виразність Складніше в налаштуванні: конвеєр підготовки та тести стиків шарів

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

Як ми ведемо роботу: етапи від розбору задачі до здачі

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

  1. Розбір задачі та обмежень: число персонажів, цільові пристрої, частота кадрів, ліміти за пам'яттю та розміром сцени. Підсумок — перелік рухів із бюджетом на кожен.
  2. Референси та розкадрування ігрової сцени: стиль, пластика, ключові пози й таймінг. Розкадрування узгоджується до старту — правка на цьому кроці в рази простіша за переробку готового кліпу.
  3. Налаштування скелета персонажа: ієрархія кісток, обмеження суглобів, прив'язка шарів. Скелет збирається один раз, далі всі рухи ставляться на нього, тому цикл правок скорочується з днів до годин.
  4. Збірка рухів: ключові пози, криві, цикли, переходи між станами. Аніматор перевіряє результат в ігровому контексті, а не окремим файлом поза сценою.
  5. Перевірка на слабких пристроях: прогін на бюджетних моделях, замір часу кадру та споживання пам'яті. Де не проходить — спрощуємо скелет і скорочуємо кількість кісток.
  6. Приймання анімації за чек-лістом: циклічність без ривків, читабельність силуету, акуратне склеювання переходів, поведінка при зміні станів.
  7. Передача й навчання команди: вихідники, готові збірки, документація та правила додавання нових кліпів — далі ваші розробники розширюють набір самі.

Що команда замовника отримує на руки після здачі проєкту

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

  • Вихідники анімації — сцени та файли рухів у робочих форматах, зі збереженими шарами й групами, а не лише експортовані спрайт-листи.
  • Налаштовані скелети персонажів і об'єктів — ієрархія кісток, прив'язки, обмеження; правка руху не потребує перезбирання моделі заново.
  • Атласи з описом: число кадрів у кожному русі, частота зміни кадрів, точка прив'язки, межі.
  • Схема ігрової сцени — шари, порядок відмальовування, прив'язка анімацій до станів персонажа (спокій, біг, стрибок, шкода) та умови переходів між ними.
  • Правила найменування кадрів і файлів: єдиний шаблон «персонаж_рух_напрямок_номер», зафіксований регістр і розділювачі — автоматична збірка атласів не ламається.
  • Регламент додавання анімацій: куди покласти вихідник, які перевірки пройти, як перезібрати атлас і що оновити в схемі сцени.
  • Документація за ключовими рухами — які параметри впливають на швидкість і вагу персонажа, де дивитися приклади.

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

Кейс: як прибрали ривки в грі на слабких телефонах

До нас прийшла команда з готовою 2D-грою: у бойовій сцені одночасно жили понад сорок об'єктів, у кожного — своя покадрова анімація.

На пристроях нижнього цінового сегмента картинка смикалася: просідання відтворювалися на 34% перевірених моделей, і найсильніше — у момент масових ефектів, коли разом спрацьовували удари, спалахи та смерть ворогів.

Що змінили. Персонажів і ефекти перевели на скелетну 2D-анімацію замість набору кадрів — вага графіки впала, а нові рухи стало простіше додавати без перемальовування.

Дрібні елементи зібрали в спільні атласи, щоб рушій відмальовував їх одним викликом, а важкі ефекти перевели на пул об'єктів: спрайти більше не створюються й не видаляються на кожному ударі, а повторно використовуються.

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

Що стало. Частка пристроїв із просіданнями знизилася з 34% до 6%, ривки в бойовій сцені пішли навіть при масових ефектах. Вага збірки скоротилася на 42% — оновлення швидше завантажується на мобільному інтернеті.

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

Що робити, якщо анімації вже готові, а сцена підгальмовує?

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

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

Локалізувати причину найшвидше за типовими симптомами:

Симптом Імовірна причина Що перевіряємо першим
Сцена просідає при появі ворогів Занадто багато активних анімацій Список запущених програвачів
Гальмує на частині пристроїв Великі текстури, перемальовування прозорих полів Розмір атласу, порожні області навколо кадрів
Ривки при зміні стану Перестворення об'єктів замість повторного використання Пул об'єктів, момент завантаження ресурсів
У редакторі плавно, у збірці — ні Різні налаштування стиснення й якості Профіль збірки, формат текстур

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

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

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

Технічні сумніви, які знімаємо до старту робіт

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

Чи можна доопрацювати наявну анімацію, не переробляючи все?

Так. Звіряємо розстановку за часом і опорні точки, правимо лише порушені сцени — перезбирати всю бібліотеку не потрібно.

Працюєте з чужими вихідниками без документації?

Так, часта ситуація. Відновлюємо структуру за шарами, атласами й назвами станів, частину налаштувань збираємо заново — заздалегідь говоримо, які сцени вийдуть точніше.

Як анімації передаються програмістам?

Віддаємо набори з узгодженими іменами й структурою та описуємо переходи між станами. Розбіжності в назвах ловимо до передачі, а не на збірці.

Скільки займає здача однієї сцени?

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

Як перевіряєте навантаження від анімації?

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

Обговоримо задачу: що надіслати, щоб отримати оцінку та план

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

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

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

Наші компетенції:

Останні роботи

  • Розробка мобільного додатка для компанії FEEDME
    Розробка мобільного додатка для компанії FEEDME
    1010
  • Розробка мобільного додатку для компанії XOOMER
    Розробка мобільного додатку для компанії XOOMER
    903
  • Розробка мобільного додатку для компанії RHL
    Розробка мобільного додатку для компанії RHL
    1332
  • Розробка мобільного додатку для компанії ZIPPY
    Розробка мобільного додатку для компанії ZIPPY
    1180
  • Розробка мобільного додатку для компанії Affhome
    Розробка мобільного додатку для компанії Affhome
    1107
  • Розробка мобільного додатку для компанії FLAVORS
    Розробка мобільного додатку для компанії FLAVORS
    714