Skip to content

karasjs/karas-spine

Repository files navigation

karas-spine

Spine component for karas.


karas spine插件。

大部分解析逻辑是沿用官方的库的代码,但是里面有些代码在用的时候会出问题,对源码有些修改,原版里面几个api的参数和细节逻辑有改。

由于spine的官方解析逻辑没有兼容旧版本spine,所以本插件目前只支持3.8和4以上的版本。使用3.6版本的spine可能会在解析时候报错或者无法正确拿到动画数据情况。

NPM version

Install

npm install karas
npm install karas-spine

Usage

import Spine from 'karas-spine';
let root = karas.render(
  <canvas width="800" height="800">
    <Spine.Spine38Canvas ref="spine" // 或者Spine38Webgl
      onEnd={(a)=>{console.log(a, 'end')}}
      onStart={(a)=>{console.log(a, 'start')}}
      onLoop={(a, l)=>{console.log(a, l, 'loop')}}
      fitSize={'contain'} // contain或者cover
      premultipliedAlpha={false} // 是否预乘,webgl生效
      atlas="https://gw.alipayobjects.com/os/bmw-prod/d730cf03-b578-4b25-89a1-ebb055827d30.txt"
      image="https://gw.alipayobjects.com/mdn/rms_d4cd3c/afts/img/A*f3ElSKHQjI8AAAAAAAAAAAAAARQnAQ"
      json="https://gw.alipayobjects.com/os/bmw-prod/bb831c1c-d802-4c87-b9a7-cdd492ee399a.json"/>
  </canvas>,
  '#test'
);

let spine = root.ref.spine;
spine.playAnimation('run');

method

  • playAnimation('run', Infinity, 'default'); // 动画名称,重复次数(可选,默认为Infinity),皮肤名称(可选,默认default)
  • pause() 暂停
  • resume() 继续播放
  • playbackRate 设置速率,默认1

props

必填的props字段

atlas: atlas文件url

json:json文件的url

image:图片url

选填的props字段

fitSize:缩放是contain还是cover

triangle:spine的配置是否绘制triangle

premultipliedAlpha:是否预乘,仅webgl需要

onEnd:播放结束事件

onStart: 开始播放事件

onLoop:每次循环播放触发一次

onImgLoad:图片加载成功回调

onImgError:图片加载失败回调

animation:动画名称。改这个字段切换不同动画播放。默认是json文件第一个

skin:皮肤名称。可以切换皮肤。默认是default

loopCount:重复次数。默认无限重复

debug:是否开启debug模式查看每个零件的方框

repeatRender:每帧重复渲染几次

autoPlay:自动开始播放,默认true

TODO

调节播放速度

License

[MIT License]

Releases

No releases published

Packages

No packages published