Tiny.js

骨骼动画 Spine

  • 插件名：Spine
  • npm：tinyjs-plugin-spine

简介

Spine 是一款针对游戏开发的 2D 骨骼动画 编辑工具。 Spine 旨在提供更高效和简洁的工作流程，以创建游戏所需的动画。

使用

资源引入：

<script src="https://gw.alipayobjects.com/os/lib/tinyjs-plugin-spine/1.0.2/index.js"></script>

你也可以通过 npm 包安装使用：tinyjs-plugin-spine

$ npm install tinyjs-plugin-spine --save

import * as spine from 'tinyjs-plugin-spine';

然后，我们以渲染一枚金币的 Spine 动画为例：

var app = new Tiny.Application({
  dpi: 2,
  showFPS: true,
});
var loader = new Tiny.loaders.Loader();
var container = new Tiny.Container();

loader
  .add('spineRes', 'https://gw.alipayobjects.com/zos/tiny/owl/1.0.7/assets/spine/coin.json')
  .load(function() {
    var spineInstance = new spine.Spine(res.spineRes.spineData);

    container.addChild(spineInstance);

    var localRect = spineInstance.getLocalBounds();

    spineInstance.setPivot(container.width / 2, container.height / 2);
    spineInstance.setPosition(Tiny.WIN_SIZE.width / 2 - localRect.x, Tiny.WIN_SIZE.height / 2 - localRect.y);
    spineInstance.state.setAnimation(0, 'animation', true);
  });

app.run(container);

实现效果：

更多 Spine Demo 见 Playground。

← 滚动 →