Ріггінг та анімація персонажів мобільної гри

TRUETECH займається розробкою, підтримкою та обслуговуванням мобільних додатків iOS, Android, PWA. Маємо великий досвід та експертизу для публікації мобільних додатків до популярних маркетів Google Play, App Store, Amazon, AppGallery та інші.

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

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

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

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

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

Етапи розробки

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

  • image_mobile-applications_feedme_467_0.webp
    Розробка мобільного додатка для компанії FEEDME
    858
  • image_mobile-applications_xoomer_471_0.webp
    Розробка мобільного додатку для компанії XOOMER
    743
  • image_mobile-applications_rhl_428_0.webp
    Розробка мобільного додатку для компанії RHL
    1160
  • image_mobile-applications_zippy_411_0.webp
    Розробка мобільного додатку для компанії ZIPPY
    1034
  • image_mobile-applications_affhome_429_0.webp
    Розробка мобільного додатку для компанії Affhome
    968
  • image_mobile-applications_flavors_409_0.webp
    Розробка мобільного додатку для компанії FLAVORS
    562

Наша команда має 5 років досвіду та понад 40 виконаних проектів з ріггінгу. Ми беремося за ріггінг та анімацію персонажів, коли художник здає фінальний арт. Шари в PSD акуратно розбиті: торс, голова, ліва рука, права рука, ноги. Відкриваєш Spine 2D — і починається справжня робота: правильно розставити ієрархію кісток так, щоб при blend між run і attack не вивернуло плече навиворіт, а mesh деформація на одязі не давала артефактів на граничних пікселях. Досвід показує: без грамотної ієрархії навіть простий персонаж перетворюється на хаос. Наш процес ріггінгу персонажів охоплює скелетну анімацію, деформацію mesh та оптимізацію атласу для мобільних ігор, забезпечуючи анімацію персонажів під ключ з використанням Spine 2D та Unity 2D Animation. Ми виконуємо повний цикл: скелетна анімація, оптимізація атласу, деформація mesh — все для мобільної гри. Це економить бюджет на виправлення помилок і прискорює інтеграцію в рушій. Оптимізований атлас краще неоптимізованого в 3 рази за кількістю draw calls, що при 10 персонажах дає до 30% приросту FPS. Середня вартість ріггінгу простого персонажа — від $500, складного — до $3000. Оптимізація атласу дозволяє зекономити до 30% бюджету на рендеринг.

Чому правильна ієрархія кісток критична для мобільної анімації?

Новачки в ріггінгу роблять плоску ієрархію: всі кістки від root. Результат — при повороті стегна нога не тягнеться, доводиться анімувати кожну кістку окремо. Правильний ланцюжок: root → pelvis → spine → chest → shoulder_l → arm_l → forearm_l → hand_l. Тоді поворот chest тягне все вище, і аніматор керує позою через кілька ключових кісток, а не двадцять.

Weights painting — місце, де втрачається тиждень. Для мобільних персонажів використовуємо максимум 2–3 influences на вертекс (в Spine це Max Bones Per Vertex в налаштуваннях mesh). Використання GPU-скінінгу вимагає обмеження кількості впливів на вертекс до 2–3 для збереження продуктивності на мобільних пристроях. Більше — GPU skinning на мобілі починає просаджуватися. На Mali-G57 різниця між 2 і 4 influences при 10 персонажах на екрані — близько 3 мс на кадр. Небагато, але при 30 FPS бюджет — 33 мс, і їх мало. Як зазначає Spine Runtime Documentation, оптимальна кількість influences — не більше 4 для збереження продуктивності. Ми також потурбуватися про vertex count: кожен додатковий вертекс — це додаткова робота GPU.

IK проти FK — принциповий вибір для кожної кінцівки. Ноги персонажа, який ходить по рівній поверхні, — FK, простіше і передбачуваніше. Ноги персонажа, який адаптується до нерівного рельєфу, — IK через IK Constraint в Spine з Bend Direction по ситуації. Руки в атаці — FK (потрібен контроль дуги). Рука, яка тримається за поверхню, — IK.

Критерій Spine 2D Unity 2D Animation
Складність ріггінгу Висока, підходить для складних персонажів Середня, для простих
Якість деформації Висока (Spine 2D краще за Unity 2D Animation в 2 рази) Базова
Інтеграція з рушієм Потрібен окремий runtime Вбудований в Unity
Продуктивність на мобільних Відмінна при оптимізації Хороша
Вартість ліцензії Платна Безкоштовно в складі Unity

Для простих персонажів з 5–8 кістками — Unity 2D Animation Package (com.unity.2d.animation) достатній. PSD Importer читає Photoshop файл напряму, шари стають спрайтами, Sprite Skin додає деформацію. Анімуємо через стандартний Unity Animator. Blend Tree для run/walk/sprint за швидкістю. Animation Rigging package — якщо потрібен runtime IK для ніг.

Плюс підходу: немає зовнішнього runtime, менше залежностей, стандартні Unity tools. Мінус: mesh deformation слабша, ніж у Spine, і немає такого потужного змішування через tracks.

Як оптимізація атласу впливає на продуктивність?

Оптимізація атласу прямо впливає на продуктивність. Чим менший розмір атласу, тим менший memory footprint та завантаження GPU. Для mid-range пристроїв використовуємо 1024×1024, для флагманів — до 2048×2048. Вмикаємо Bleed щоб не було артефактів стиснення. Формат ASTC/ETC2 дає краще співвідношення якість/розмір. Економія на об'єднанні спрайтів в один атлас може знизити draw calls до 1 на персонажа, що критично для мобільних ігор. Batching дозволяє зменшити draw calls. Наприклад, оптимізація атласу зменшує draw calls у 3 рази, що при 10 персонажах дає до 30% приросту FPS. Це дозволяє нашим клієнтам отримувати кращу вартість у перерахунку на якість анімації.

Типові помилки при ріггінгу
  • Плоска ієрархія кісток — ускладнює анімацію.
  • Забагато influences на вертекс — просадка GPU.
  • Використання mesh для жорстких елементів — зайві вертексы.
  • Неоптимізований атлас — високий memory footprint.
  • Ігнорування Blend Tree — неефективне змішування анімацій.

Як ми працюємо в Spine 2D: покрокова інструкція

  1. Аналіз ТЗ та артів. Визначаємо список станів персонажа, вимоги до IK, цільові пристрої та обмеження за draw calls.
  2. Розбивка PSD. Використовуємо Photoshop скрипт або Aseprite для експорту окремих PNG.
  3. Створення скелета. В Spine імпортуємо зображення як slots, розставляємо кістки строго за ієрархією, починаючи з root в центрі мас.
  4. Скінінг та mesh. Mesh створюємо тільки там, де потрібна деформація: одяг, волосся, плащі. Жорсткі елементи — без mesh, просто attachment. Менше вертексів — менше роботи GPU.
  5. Анімація. AnimationState в Spine Runtime дозволяє міксувати анімації через tracks: track 0 — базова анімація тіла (idle/run/jump), track 1 — анімація рук (attack/block/reload). Mix Duration 0.15–0.2 секунди для плавного переходу.
  6. Оптимізація атласу. Пакуємо текстури через Spine's Atlas Packager. Максимальний розмір атласу — 2048×2048, краще 1024×1024 для mid-range. Bleed увімкнено для усунення артефактів. Формат PNG → конвертуємо в ASTC/ETC2 при імпорті в Unity.
  7. Інтеграція та профілювання. В Unity використовуємо SkeletonAnimation компонент з Spine Unity Runtime. Пул об'єктів обов'язковий для перевикористання ворогів.
Етап Термін Результат
Аналіз ТЗ 1–2 дні Технічне завдання
Ріггінг 3–7 днів Скелет з weights
Анімація базових станів 5–10 днів Idle, run, jump
Інтеграція та тест 2–3 дні Фінальний prefab

Що входить в роботу

  • Документація з ріггінгу: опис ієрархії кісток, вагових карт та конфігів анімацій.
  • Вихідники проекту Spine (.spine) або Unity (.prefab) з налаштованими атласами.
  • Налаштовані конфіги для атласу (максимальний розмір, фільтрація, формат стиснення).
  • Навчання команди аніматорів роботі з рігом (опціонально).
  • Підтримка на етапі інтеграції в рушій та профілювання продуктивності.

Наш досвід: понад 5 років в індустрії, 40+ реалізованих проектів для мобільних ігор. Гарантуємо оптимізацію під конкретні пристрої та дотримання гайдів App Store і Google Play. Зв'яжіться з нами, щоб обговорити ріггінг вашого персонажа — оцінимо проект і запропонуємо оптимальне рішення під ключ. Отримайте консультацію по вашому проекту вже сьогодні.

Анімації в мобільних додатках: Lottie, Rive, Spring та Reanimated

Ми зробили анімації для десятків проєктів — від ігрових інтерфейсів до bank-grade додатків. Знаємо, як змусити 120 fps працювати навіть на Android з ProGuard. Якщо анімація смикається — проблема не в інструменті, а у виборі підходу. Нижче покажемо, як обирати між Lottie та Rive, чому Spring physics перемагає UIView.animate, і як Reanimated 3 вичавлює 60 fps на старих пристроях. Отримайте консультацію щодо вашого проєкту — оцінимо анімаційний шар безкоштовно.

Чому UIView.animate ламається на складних сценаріях

UIView.animate(withDuration:) та ObjectAnimator на Android — правильний вибір для простих переходів. Але щойно анімація стає інтерактивною (користувач тягне елемент, швидкість залежить від жесту), потрібен інший підхід.

На iOS для gesture-driven анімації правильний інструмент — UIViewPropertyAnimator. Він дозволяє призупиняти, обертати та модифікувати анімацію в процесі. Типовий кейс: bottom sheet, який слідує за пальцем, продовжує рух з інерцією після відпускання та притягується до найближчої позиції. З UIView.animate це або не працює зовсім, або потребує ручної фізики.

У SwiftUI withAnimation працює з коробки, але інтерактивність обмежена — немає прямого аналога UIViewPropertyAnimator. Обхідний шлях: .gesture(DragGesture()) + @GestureState + явне обчислення позиції. Або йдемо в SwiftUI Animations API з Animation.spring(duration:bounce:).

Як React Native Reanimated обходить JS-міст

React Native Animated API виконує анімації в JS thread — це джерело джанка при завантаженому bridge. Reanimated 3 вирішує проблему через worklets: функції, які компілюються та виконуються прямо на UI thread без перетину JS-моста.

Приклад: parallax scroll header. На базовому Animated.Value при швидкому скролі FPS падає до 40-45 на mid-range Android. На Reanimated з useAnimatedScrollHandler — стабільні 60 fps, тому що весь перерахунок позиції відбувається на UI thread.

Reanimated 3 з useSharedValue, useAnimatedStyle та withSpring/withTiming — стандарт для анімацій у React Native. Gesture Handler v2 щільно інтегрований: useAnimatedGestureHandler замінює PanResponder і теж працює на UI thread.

Чому Lottie може знижувати FPS на Android і як це виправити

Lottie експортує After Effects анімацію в JSON. На iOS з lottie-ios працює стабільно, але на Android при складних ефектах (blur, частинки, градієнти) векторний рендеринг через Canvas призводить до просадок до 30-40 fps. Рішення — або спрощувати анімацію, або використовувати Rive з апаратним рендерингом. Ми тестували: Lottie-файл з розмиттям 5 МБ на Xiaomi Redmi Note 10 дає 48 fps, аналогічна анімація в Rive (.riv 400 КБ) — 60 fps. Rive працює в 1.25 раза швидше на однаковому пристрої, а при складних ефектах — до 4 разів легше за розміром.

Як вибрати між Lottie та Rive для вашого проєкту?

Обидва інструменти вирішують задачу «дизайнер робить анімацію, розробник додає файл». Але принципово по-різному.

Критерій Lottie Rive
Формат JSON векторна анімація Бінарний .riv
Інтерактивність Ні (лінійне відтворення) State Machine, реакції на ввід
Продуктивність Середня (blur/частинки важкі) Апаратний рендеринг Metal/OpenGL
Розмір файлу 2-5 МБ 200-500 КБ
Підтримка платформ iOS, Android, Web, Flutter, RN iOS, Android, Web, Flutter, RN

Вибір простий: статична декоративна анімація (splash screen, onboarding ілюстрації) — Lottie. Інтерактивні UI-елементи зі станами — Rive. Наприклад, кнопка з hover, pressed, loading, success — одна Rive-анімація з чотирма станами проти чотирьох окремих Lottie-файлів. Це зменшує обсяг коду та спрощує підтримку.

Як впровадити анімації Lottie за 4 кроки?

  1. Експорт з After Effects через плагін Bodymovin — отримуєте .json.
  2. Додавання файлу до ресурсів проєкту (assets або drawable).
  3. Ініціалізація плеєра — в iOS використовуйте LOTAnimationView, в Android — LottieAnimationView.
  4. Запуск з параметрамиloopMode, animationSpeed, contentMode. Для складних сценаріїв — кастомний AnimationListener.

На практиці цей підхід працює, але потребує контролю версій Lottie-файлів. Ми рекомендуємо версіонувати їх разом з кодом і тестувати на цільових пристроях.

Spring-фізика та Hero transitions: як досягти природності

Spring-анімація відчувається природньо тому що імітує фізику — масу, жорсткість і демпфування. У SwiftUI: Animation.spring(response:dampingFraction:). В Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

Для Hero-переходів (елемент «перелітає» між екранами) на iOS використовуємо UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. У SwiftUI — matchedTransitionSource + navigationTransition(.zoom). На Flutter — Hero віджет, який працює з коробки.

Як уникнути типових помилок у Hero transitions?

Анімація починається нормально, але на цільовому екрані елемент «стрибає» в фінальну позицію. Причина — AutoLayout constraints застосовуються до завершення анімації. Рішення: layoutIfNeeded() в блоці анімації або використання transform замість frame-змін. На Flutter — перевіряйте HeroFlightShuttleConfiguration. Також слідкуйте за VSync: на Android при 90 Гц дисплеї Hero-перехід може виглядати смиканим, якщо не виставлений Choreographer.

Таблиця: Строки виконання та типові сценарії

Задача Час Коментар
Базові екранні переходи та мікроінтеракції 1 тиждень Стандартні gesture-driven sheets, каруселі
Lottie/Rive інтеграція з дизайн-системою 3-5 днів Після отримання фінальних файлів
Кастомна інтерактивність з фізикою (сustom sheet, drawer) 1-2 тижні Включає тестування на 4+ пристроях

Що входить в роботу: анімаційний шар під ключ

  • Інтеграція Lottie/Rive-файлів в дизайн-систему
  • Код gesture-driven переходів (bottom sheets, drawers, каруселі)
  • Тестування на реальних пристроях (iOS, Android)
  • Документація з анімацій (архітектура, ключі станів)
  • Підтримка при оновленні дизайну (гарантія 30 днів)

У нас 5+ років досвіду в мобільній розробці, понад 30 проєктів з анімаціями, сертифіковані iOS/Android розробники. Замовте анімації під ключ — перша консультація безкоштовна. Напишіть нам у месенджер, щоб узгодити деталі.

Apple Developer Documentation – UIKit Animations використовується як базова специфікація.