Skip to main content

Spine Animation

Spine software allows to create complex 2D animations and effects. At the same time, complex unoptimized 2D animations might become a bottleneck for the performance of the game. This section contains the best practices, recommendations and limitations for the Art team to create optimized Spine animations.

Following best practices and recommendations will help to avoid potential issues and improve player experience.

tip

Spine editor contains Metrics panel. This panel allows to see the amount of bones, slots, meshes and other metrics for the current skeleton/animation. Metrics helps to understand if animation is too complex and what could be optimized.

metrics

Here are the main reasons of limitations. Each point is twice important for mobile devices:

  • MEMORY: Web browser usually limits amount of memory, that can be consumed by a single tab. Having too many high-resolution textures, or too heavy animations loaded at the same time might lead to huge memory consumption, which leads to the browser tab crash and will make the game unplayable.

  • GPU usage: Rendering pipeline is highly dependent on amount of draw calls done on each frame. The game scene contains a lot of elements, that need to be drawn on the screen. Having too complex animations might lead to a high amount of draw calls, which often leads to performance issues.

  • CPU usage: Updating and rendering all animations on the game scene might be a heavy operation. Having too many bones, slots and complex meshes for each animation often leads to performance issues. Web browser might also crash a tab, if decides that JavaScript updates scene for too long.