spi动画总结

目录

资料

什么是spine(骨骼)动画

生成骨骼动画的文件(后缀为.spi)

如何使用谷歌动画

出现的问题

---

资料

fyge文档 fyge

在线测试平台：FYGE Playground

Spine: Spine | fyge

spine动画生成方法

什么是spine(骨骼)动画

(什么是spine动画？ - 知乎)spine动画就是通过spine软件制作出来的2d骨骼动画。

简单的说就是，提供一张图片，给这张图片分区设置骨骼数据，然后骨骼动起来，达到动画的效果。

生成骨骼动画的文件(后缀为.spi)

方式一：通过脚本github仓库 https://github.com/EsotericSoftware 下载ps处理脚本

如：https://github.com/EsotericSoftware/spine-scripts

脚本视频教学【Spine教程 | 中文字幕】PS文件导入Spine脚本：PhotoshopToSpine使用教程_哔哩哔哩_bilibili

将ps文件处理成谷歌动画文件

方式二：使用nodeji脚本生成.spi文件 

资料：spine动画生成方法

注意：.stlas .json .png 三个文件是必备的

如何使用谷歌动画

项目代码：http://gitlab2.dui88.com/sparkprojects/SPDBANKLUCKYDRAW 

组件

核心使用方法

loadSpine 加载spine动画文件 展开源码

加载后的.spi动画文件后的 数据为下面的格式，其中animations 即为可用的动画 、skins为可用的皮肤  

当然设置width height 一样可用改变动画的大小

出现的问题

第三个参数 需要调整为FYGE.RENDERER_TYPE.WEBGL,

const stage = this.stage = new FYGE.Stage(
this.canvas,
750, // 设计图宽
1624, // 设计图高
document.documentElement.clientWidth,
document.documentElement.clientHeight,
FYGE.RENDERER_TYPE.CANVAS,
true, // 是否居中适配
false, // 是否定高
)

spi文件第三方解析库

https://github.com/EsotericSoftware/spine-runtimes/tree/4.1/spine-ts#webgl-demos