Spine 骨骼动画

Spine 是一款专门为软件和游戏开发者量身打造的 2D 动画软件。动画师、原画师和工程师共同为您的游戏赋予生命。使用 Spine 骨骼动画可以实现一些更加丰富的效果，相对于帧动画能够更好的减少内存占用。Spine 是收费软件，请购买后使用，Spine 官网：http://zh.esotericsoftware.com/。目前支持 Spine 版本为：3.6 / 3.8 / 4.0，版本之间资源不兼容，可以在这里查看如何设置

安装

当前支持 spine 的 3.6 / 3.8 / 4.0 版本，可以根据版本选择不同npm包。

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

使用 NPM

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

在浏览器中

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

使用

  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('动画播放结束', e.name)
  59. })
  61. spine.play('idle')
  62. game.scene.addChild(gameObject)

参数

resource string

资源名称

animationName string

动画名

方法

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

播放动画

  • name 动作名
  • loop 是否循环播放

stop()

停止播放