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()

      停止播放

      ,