Отличное средство скелетной анимации для Pixi.js

Вообще, скелетная анимация с инверсной кинематикой в разработке 3-мерных игр является чем-то само-собой разумеющимся. Для меня было абсолютной неожиданностью, что есть подобные удобные средства и для 2-мерного мира. Хотя, это и должно быть ожидаемо.

Есть много решений. Мы выбрали Spine, потому что для рендерера Pixi.js нашей игры про Плюха у него есть среда выполнения и наш художник-аниматор имел опыт работы с ним.

Приятным моментом стало и то, что интеграция оказалось довольно простым делом. Ставим рантайм:

npm i -D @esotericsoftware/spine-pixi-v8

Вместе с другими ассетами грузим нашу анимацию

PIXI.Assets.addBundle 'desman', [
    {
        alias: 'desman-atlas'
        src: 'assets/desman.atlas'
    }
    {
        alias: 'desman-skel'
        src: 'assets/desman.json'
    }
]
await PIXI.Assets.loadBundle ['desman']

Надо сказать, что готовая анимация из редактора Spine состоит из трех файлов: текстур png, файла атласа текстур atlas и файла данных анимации, который может быть как в бинарном виде skel, так и в читаемом json. Грузим только атлас и данные, текстуры подтянутся из атласа.

Далее используем рантайм:

import { Spine } from '@esotericsoftware/spine-pixi-v8'

spine = Spine.from {
   skeleton: 'desman-skel'
   atlas: 'desman-atlas'
   # могут быть другие опции
}
# устанавливаем анимацию по имени из файла данных
spine.state.setAnimation 0, 'hereAnimationName', true
# далее работаем как с объектом в сцене рендера
spine.x = width * .5
spine.y = height * .5
app.stage.addChild spine

У рантайма довольно много примеров.