Риггинг и анимация персонажей мобильной игры

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

Наша команда берётся за риггинг и анимацию персонажей, когда художник сдаёт финальный арт. Слои в PSD аккуратно разбиты: торс, голова, левая рука, правая рука, ноги. Открываешь Spine 2D — и начинается настоящая работа: правильно расставить иерархию костей так, чтобы при blend между run и attack не вывернуло плечо наизнанку, а mesh деформация на одежде не давала артефактов на граничных пикселях. Опыт показывает: без грамотной иерархии даже простой персонаж превращается в хаос. Мы выполняем весь процесс риггинга — от скелетной анимации до оптимизации атласа, обеспечивая деформацию mesh без просадок производительности. Это экономит бюджет на исправление ошибок и ускоряет интеграцию в движок.

Почему правильная иерархия костей критична для мобильной анимации?

Новички в риггинге делают плоскую иерархию: все кости от 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 skinning на мобиле начинает просаживаться. На Mali-G57 разница между 2 и 4 influences при 10 персонажах на экране — около 3 мс на кадр. Немного, но при 30 FPS бюджет — 33 мс, и их мало. Как отмечает Spine Runtime Documentation, оптимальное количество influences — не более 4 для сохранения производительности.

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

Критерий Spine 2D Unity 2D Animation
Сложность риггинга Высокая, подходит для сложных персонажей Средняя, для простых
Качество деформации Высокое, mesh с несколькими influences Базовое
Интеграция с движком Требуется отдельный 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 на персонажа, что критично для мобильных игр. Это позволяет нашим клиентам получать лучшую стоимость в пересчёте на качество анимации.

Типичные ошибки при риггинге
  • Плоская иерархия костей — усложняет анимацию.
  • Слишком много 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:) из iOS 17.

Как 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.

Lottie vs 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 — стандарт для размеченной векторной анимации, Rive — более гибкий инструмент с физикой и state machine.

Spring-физика и Hero transitions: как добиться естественности

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

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

Как избежать типичных ошибок в Hero transitions?

Анимация начинается нормально, но на целевом экране элемент «прыгает» в финальную позицию. Причина — AutoLayout constraints применяются до завершения анимации. Решение: layoutIfNeeded() в блоке анимации или использование transform вместо frame-изменений.

Что входит в работу: анимационный слой под ключ

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

У нас 5+ лет опыта в мобильной разработке, более 30 проектов с анимациями, сертифицированные iOS/Android разработчики.

Сроки выполнения

  • Базовые экранные переходы и микроинтеракции — 1 неделя.
  • Lottie/Rive интеграция с дизайн-системой — 3-5 дней после получения финальных файлов.
  • Кастомная gesture-driven интерактивность (sheet, drawer, карусель с физикой) — 1-2 недели.

Напишите нам — добавим анимации под ключ за 2 недели. Первая консультация бесплатно.