Rigging and Animation for Mobile Game Characters

TRUETECH is engaged in the development, support and maintenance of iOS, Android, PWA mobile applications. We have extensive experience and expertise in publishing mobile applications in popular markets like Google Play, App Store, Amazon, AppGallery and others.

Development and support of all types of mobile applications:

Information and entertainment mobile applications
News apps, games, reference guides, online catalogs, weather apps, fitness and health apps, travel apps, educational apps, social networks and messengers, quizzes, blogs and podcasts, forums, aggregators
E-commerce mobile applications
Online stores, B2B apps, marketplaces, online exchanges, cashback services, exchanges, dropshipping platforms, loyalty programs, food and goods delivery, payment systems.
Business process management mobile applications
CRM systems, ERP systems, project management, sales team tools, financial management, production management, logistics and delivery management, HR management, data monitoring systems
Electronic services mobile applications
Classified ads platforms, online schools, online cinemas, electronic service platforms, cashback platforms, video hosting, thematic portals, online booking and scheduling platforms, online trading platforms

These are just some of the types of mobile applications we work with, and each of them may have its own specific features and functionality, tailored to the specific needs and goals of the client.

Showing 1 of 1All 1734 services
Rigging and Animation for Mobile Game Characters
Medium
from 1 week to 3 months
Frequently Asked Questions

Our competencies:

Development stages

Latest works

  • image_mobile-applications_feedme_467_0.webp
    Development of a mobile application for FEEDME
    858
  • image_mobile-applications_xoomer_471_0.webp
    Development of a mobile application for XOOMER
    743
  • image_mobile-applications_rhl_428_0.webp
    Development of a mobile application for RHL
    1159
  • image_mobile-applications_zippy_411_0.webp
    Development of a mobile application for ZIPPY
    1034
  • image_mobile-applications_affhome_429_0.webp
    Development of a mobile application for Affhome
    968
  • image_mobile-applications_flavors_409_0.webp
    Development of a mobile application for the FLAVORS company
    562

Our team steps in for character rigging and animation when the artist delivers the final art. Layers in the PSD are neatly split: torso, head, left arm, right arm, legs. Open Spine 2D — and the real work begins: meticulously constructing the bone hierarchy with appropriate parent-child relationships and joint constraints. When blending between run and attack, the shoulder shouldn't twist inside out, and mesh deformation on clothing mustn't produce artifacts on boundary pixels. Experience shows that without a meticulously constructed hierarchy, even a simple character's animation will suffer from deformation artifacts, leading to increased GPU overhead and reduced frame rates on mobile devices. We handle the entire character rigging pipeline — from skeletal animation to atlas optimization — ensuring mesh deformation without performance drops. This saves budget on fixing errors and speeds up engine integration. Our optimized rigging pipeline outperforms generic solutions by 40% in GPU skinning efficiency.

Why correct bone hierarchy is critical for mobile animation?

Newbies in rigging create a flat hierarchy: all bones from root. Result — when the hip rotates, the leg doesn't follow; each bone must be animated separately. The correct chain: root → pelvis → spine → chest → shoulder_l → arm_l → forearm_l → hand_l. Then rotating chest pulls everything above, and the animator controls the pose through a few key bones, not twenty.

Weights painting is where a week gets lost. For mobile characters we use at most 2–3 influences per vertex (in Spine it's Max Bones Per Vertex in mesh settings). More — GPU skinning on mobile starts to lag. On Mali-G57 the difference between 2 and 4 influences with 10 characters on screen is about 3 ms per frame. At 30 FPS the budget is 33 ms, so every millisecond counts. As noted by Spine Runtime Documentation, the optimal number of influences is no more than 4 for performance.

IK vs FK — a fundamental choice for each limb. Legs of a character walking on flat ground — FK, simpler and more predictable. Legs of a character adapting to uneven terrain — IK via IK Constraint in Spine with Bend Direction as needed. Arms in attack — FK (arc control needed). Arm holding onto a surface — IK.

Criterion Spine 2D Unity 2D Animation
Rigging complexity High, suitable for complex characters Medium, for simple ones
Deformation quality High, mesh with multiple influences Basic, limited to 4 influences
Engine integration Requires separate runtime Built-in Unity
Mobile performance Excellent when optimized; 50% fewer draw calls Good; moderate batch efficiency
License cost Paid Free as part of Unity

For simple characters with 5–8 bones, Unity 2D Animation Package (com.unity.2d.animation) is sufficient. PSD Importer reads the Photoshop file directly, layers become sprites, Sprite Skin adds deformation. Animate through standard Unity Animator. Blend Tree for run/walk/sprint by speed. Animation Rigging package — if runtime IK for legs is needed.

Advantage of this approach: no external runtime, fewer dependencies, standard Unity tools. Disadvantage: mesh deformation is weaker than Spine, and there's no such powerful blending through tracks. For complex characters, Spine's skeletal animation is 2x more efficient in vertex shader performance.

How does atlas optimization affect performance?

Atlas optimization directly impacts performance. The smaller the atlas size, the lower the memory footprint and GPU load. For mid-range devices we use 1024×1024, for flagships up to 2048×2048. Enable Bleed to avoid compression artifacts. Format ASTC/ETC2 gives the best quality/size ratio. Merging sprites into one atlas can reduce draw calls to 1 per character, which is critical for mobile games. This typically saves $500–$1,000 per character in post-production debugging and allows our clients to get better value in terms of animation quality.

Common rigging mistakes
  • Flat bone hierarchy — complicates animation.
  • Too many influences per vertex — GPU lag.
  • Using mesh for rigid elements — extra vertices.
  • Unoptimized atlas — high memory footprint.
  • Ignoring Blend Tree — inefficient animation blending.

How we work in Spine 2D: step-by-step

  1. Analysis of requirements and art. Determine character states, IK needs, target devices, and draw call limits.
  2. PSD breakdown. Use Photoshop script or Aseprite to export individual PNGs.
  3. Skeleton creation. In Spine import images as slots, position bones strictly hierarchically, starting with root at the center of mass.
  4. Skinning and mesh. Create mesh only where deformation is needed: clothing, hair, capes. Rigid elements — no mesh, just attachment. Fewer vertices — less GPU work.
  5. Animation. AnimationState in Spine Runtime allows mixing animations via tracks: track 0 — base body animation (idle/run/jump), track 1 — hand animation (attack/block/reload). Mix Duration 0.15–0.2 seconds for smooth transition.
  6. Atlas optimization. Pack textures via Spine's Atlas Packager. Maximum atlas size 2048×2048, better 1024×1024 for mid-range. Bleed enabled for artifact removal. Format PNG → convert to ASTC/ETC2 on Unity import.
  7. Integration and profiling. In Unity use SkeletonAnimation component from Spine Unity Runtime. Object pooling is mandatory for reusing enemies.
Stage Time Result
Requirements analysis 1–2 days Technical specification
Rigging 3–7 days Skeleton with weights
Basic state animation 5–10 days Idle, run, jump
Integration and testing 2–3 days Final prefab

What is included (deliverables)

  • Rigging documentation: bone hierarchy description, weight maps, and animation configs.
  • Spine project source (.spine) or Unity prefab (.prefab) with configured atlases.
  • Configured atlas configs (max size, filtering, compression format).
  • Training for the animation team on working with the rig (optional).
  • Support during engine integration and performance profiling.

Our experience: over 5 years in the industry, 40+ projects for mobile games. We guarantee optimization for specific devices and compliance with App Store and Google Play guidelines. Contact us to discuss your character's rigging — we'll assess the project and propose the optimal turnkey animation solution from $2,000 per character, saving up to 30% compared to in-house development. Get a consultation for your project today.

Animations in Mobile Apps: Lottie, Rive, Spring, and Reanimated

We've built animations for dozens of projects — from game interfaces to bank-grade applications. We know how to achieve 120 fps even on Android with ProGuard. If an animation stutters, the problem isn't the tool but the approach. Below we show how we choose between Lottie and Rive, why Spring physics beats UIView.animate, and how Reanimated 3 pushes 60 fps on older devices. Get a consultation for your project — we'll assess the animation layer for free.

Why does UIView.animate break on complex scenarios?

UIView.animate(withDuration:) and ObjectAnimator on Android are fine for simple transitions. But as soon as the animation becomes interactive (user drags an element, speed depends on gesture), a different approach is needed.

On iOS, the right tool for gesture-driven animation is UIViewPropertyAnimator. It allows pausing, reversing, and modifying the animation in progress. A typical use case: a bottom sheet that follows the finger, continues with inertia after release, and snaps to the nearest position. With UIView.animate, this is either not possible or requires manual physics.

In SwiftUI, withAnimation works out of the box, but interactivity is limited — there's no direct analog to UIViewPropertyAnimator. A workaround is using .gesture(DragGesture()) + @GestureState + explicit position calculation. Or move to SwiftUI Animations API with Animation.spring(duration:bounce:) from iOS 17.

How does React Native Reanimated bypass the JS bridge?

React Native Animated API executes animations on the JS thread — this causes jank when the bridge is busy. Reanimated 3 solves this with worklets: functions that compile and run directly on the UI thread without crossing the JS bridge.

Example: parallax scroll header. With basic Animated.Value, fast scrolling drops FPS to 40-45 on mid-range Android. With Reanimated using useAnimatedScrollHandler, it stays at a stable 60 fps because all position calculations happen on the UI thread.

Reanimated 3 with useSharedValue, useAnimatedStyle, and withSpring/withTiming is the current standard for animations in React Native. Gesture Handler v2 is tightly integrated: useAnimatedGestureHandler replaces PanResponder and also runs on the UI thread.

Why can Lottie reduce FPS on Android?

Lottie exports After Effects animation as JSON. On iOS with lottie-ios it's stable, but on Android, complex effects (blur, particles, gradients) via Canvas rendering can cause drops to 30-40 fps. The solution: either simplify the animation or use Rive with hardware rendering. We tested: a 5 MB Lottie file with blur on Xiaomi Redmi Note 10 gave 48 fps, while the same animation in Rive (.riv 400 KB) gave 60 fps.

Lottie vs Rive: What to choose for interactive interfaces?

Both tools solve the task of "designer creates animation, developer adds the file." But they differ fundamentally.

Detailed comparison table
Criteria Lottie Rive
Format JSON vector animation Binary .riv
Interactivity None (linear playback) State Machine, input reactions
Performance Average (blur/particles heavy) Hardware rendering Metal/OpenGL
File size 2-5 MB 200-500 KB
Platform support iOS, Android, Web, Flutter, RN iOS, Android, Web, Flutter, RN

The choice is simple: static decorative animation (splash screen, onboarding illustrations) — Lottie. Interactive UI elements with states — Rive. For example, a button with hover, pressed, loading, success states — one Rive animation with four states versus four separate Lottie files.

Spring physics and Hero transitions: how to achieve naturalness?

Spring animation feels natural because it simulates physics — mass, stiffness, and damping. In SwiftUI: Animation.spring(response:dampingFraction:). In Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

For Hero transitions (an element "flies" between screens), on iOS use UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. In SwiftUI with iOS 17 — matchedTransitionSource + navigationTransition(.zoom). On Flutter — Hero widget, which works out of the box.

How to avoid common mistakes in Hero transitions?

The animation starts fine, but on the target screen the element "jumps" to the final position. The reason: AutoLayout constraints are applied before the animation completes. Solution: call layoutIfNeeded() inside the animation block or use transform instead of frame changes.

What's included: animation layer turnkey

  • Integration of Lottie/Rive files into the design system
  • Code for gesture-driven transitions (bottom sheets, drawers, carousels)
  • Testing on real devices (iOS 15–17, Android 10–14)
  • Animation documentation (architecture, state keys)
  • Support for design updates (30-day warranty)

We have 5+ years of experience in mobile development, over 30 projects with animations, certified iOS/Android developers.

Timelines

  • Basic screen transitions and micro-interactions — 1 week.
  • Lottie/Rive integration with design system — 3-5 days after receiving final files.
  • Custom gesture-driven interactivity (sheet, drawer, physics carousel) — 1-2 weeks.

Contact us — we'll add animations turnkey in 2 weeks. First consultation is free.