Spine skeletal animation

Spine is a 2D animation software tailored specifically for software and game developers. Animators, original artists, and engineers work together to give life to your game. Using Spine skeletal animation can achieve some richer effects, which can better reduce memory usage compared to sprite animation. Spine is a paid software, please use it after purchase, Spine official website: http://zh.esotericsoftware.com/. The currently supported Spine version is: 3.6 / 3.8 / 4.0, you can click here see how to set

-https://eva.js.org/playground/#/spine

Install

The currently supported Spine version is: 3.6 / 3.8 / 4.0, You can select npm package by version.

  • 3.6 @eva/plugin-renderer-spine
  • 3.8 @eva/plugin-renderer-spine38
  • 4.0 @eva/plugin-renderer-spine40

With NPM

  1. npm i @eva/plugin-renderer @eva/plugin-renderer-spine40

In Browser

  1. <script src="https://unpkg.com/@eva/plugin-renderer-spine@1.2.x/dist/EVA.plugin.renderer.spine.min.js"></script>

Usage

  1. import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  3. import {Spine, SpineSystem} from '@eva/plugin-renderer-spine'
  5. resource.addResource([
  6.   {
  7.     name:'anim',
  8.     type:'SPINE',
  9.     src: {
  10.       ske: {
  11.         type:'json',
  12.         url:'https://pages.tmall.com/wow/eva/b5fdf74313d5ff2609ab82f6b6fd83e6.json'
  13.       },
  14.       atlas: {
  15.         type:'atlas',
  16.         url:'https://pages.tmall.com/wow/eva/b8597f298a5d6fe47095d43ef03210d4.atlas'
  17.       },
  18.       image: {
  19.         type:'png',
  20.         url:'https://gw.alicdn.com/tfs/TB1YHC8Vxz1gK0jSZSgXXavwpXa-711-711.png'
  21.       }
  22.     }
  23.   }
  24. ])
  26. const game = new Game({
  27.   systems: [
  28.     new RendererSystem({
  29.       canvas: document.querySelector('#canvas'),
  30.       width: 750,
  31.       height: 1000
  32.     }),
  33.     new SpineSystem()
  34.   ],
  35.   autoStart: true,
  36.   frameRate: 60
  37. })
  39. game.scene.transform.size = {
  40.   width: 750,
  41.   height: 1000
  42. }
  43. const gameObject = new GameObject('spine', {
  44.   anchor: {
  45.     x: 0.5,
  46.     y: 0.5
  47.   },
  48.   scale: {
  49.     x: 0.5,
  50.     y: 0.5
  51.   }
  52. })
  54. const spine = new Spine({ resource:'anim', animationName:'idle' })
  56. gameObject.addComponent(spine)
  57. spine.on('complete', e => {
  58.   console.log('Animation playback ended', e.name)
  59. })
  61. spine.play('idle')
  62. game.scene.addChild(gameObject)

Options

resource string

Resource Name

animationName string

Animation name

Methods

play(name?: string, loop?: boolean)

Play animation

-name action name -loop Whether to play in a loop

stop()

Stop play