Skip to main content

Common Requirements

All animations should be made in Spine version either 4.2.xx or 3.8.99.

  • Do not use backward export to 3.8.99 format for animations made in Spine version 4.2.xx.
  • Do not use new features (like physics constraint) for animations made in Spine version 4.2.xx. The impact of such features on game performance has not yet been studied.
  • Skeleton, animation and skin name should contain only latin letters (in lower-case), numbers, and underscores.
  • Do not put animations for different objects into a single skeleton.
warning

Each symbol might be displayed on the screen multiple times (depending of the slot machine size). It's important to keep the complexity of each symbol as low as possible.

warning

Spine runtime, potentially, will not update and render hidden slots to reduce impact on the game performance. Even in this case, an extra memory still will be allocated to store information about hidden bones, slots and especially meshes. Consuming too much memory may lead to browser tab crash.

Animation example
warning

Skeleton consists of 350+ bones, 12800+ triangles, and contains animations for 3 different symbols. These symbols are often displayed at the same time, forcing Spine runtime to handle 1050+ bones at the same time (not including other scene elements), and such animation might became a bottle-neck in game performance.

example

Animation example
warning

Skeleton for "rocket launcher" symbol also contains effects animation. These effects will be used apart from the symbol. Each symbol, that appears on the reels, will consume an extra memory to store information about effects, which are never used in this case.

Overhead from this particular skeleton is not too big, and splitting it into two skeletons will be enough.

example

  • Use skins instead of duplicating skeletons/animations.
Animation example
warning

Instant prize symbol has 1 normal state (with dynamic payouts) and 4 jackpot states. To implement these states in original skeleton, 6 animations and several slots were duplicated 5 times. Usually the output file for such animation has a size 50-100 Kb, but in this case the output file size was 745 Kb (more than 5 times bigger!).

example

  • Do not create too many frames and keyframes for each animation, consider splitting animations into several parts to run on different tracks.
warning

Huge amount of frames with complex animations (when multiple bones/slots changes on each frame) increases amount of allocated memory and may lead to browser tab crash.

Animation example
warning

Background animation consists of 15000 frames (153000 keyframes+ across all timelines) with the same animation duplicated multiple times (even Spine editor lags with such amount of animations 😅). The output file size of this animation is 14.4 Mb, which is almost the size of the whole game on mobile devices.

100 frames repeated 150 times for almost all objects except clouds/birds. It's reasonable to split this animation into several tracks: first for clouds/birds, and second one for all other objects.

example

tip

Spine editor contains Preview panel. This panel allows to test transition between different animations and play multiple animations at the same time on different tracks.

preview

  • Animation setup pose should always represent object static or inactive state.
Animation example
warning

HP symbol animation setup pose is configured in a way, when attachments are hidden for all slots. As a result:

  • animation contains extra keyframes to setup attachment for each slot on the first frame;
  • the game client forces Spine runtime to calculate the first frame of the animation, to make symbol visible in static state, which leads to extra CPU usage.

example

example

  • Do not use too many frame-by-frame animations (image sequences), control the number of frames and images size used in such animations.
Animation example
warning

Intro animation contains several frame-by-frame animations with huge images (each frame size is 1000x1000 px). This animation plays for a short period of time and frames size can be reduced without noticeable quality loss.

example