今天主要做了spine的研究
-
spine动画和live2d的区别
-
网页动画的原理和分类，为什么spine动画能够在web中运行
网页中的动画分为属性动画和帧动画。
属性动画就是通过改变dom元素的属性如宽高，字体大小或者transform的scale，rotate，就是对dom元素的属性改变，在一段时间内：属性值按照时间函数变化来实现。
帧动画：在一段时间内按照一定速率替换图片的方式来实现。
spine是针对游戏和软件2d动画的制作的，spine runtime使用一个小图片合成的大图片。
spine在网页中引用可以用canvas的spine runtime来实现
- 如何接入ts项目，实现spine动画的原理
- 如何在项目中封装方便创建的动画类和操作动画方法
- 分析网页性能包括：内存和cpu占用情况
待研究的问题
- webpack4最大的变化在于：commonplugins的废除改为了splitplugin，并且在实现零配置，可以设置mode为development和production，默认为production，会进行自动分包：自动分包策略是什么，为什么我的项目没有自动分包。
- webpack对资源的处理，还是没有彻底搞清楚对比如图片和各类资源的打包策略
webgl和canvas的区别：
canvas是载体，canvas 2d相当于获取了内置的二维图形接口，canvas 3d是获取基于webgl的图形接口，相当于三维画笔，你可以选择不同的画笔在上面作画
[动画特效选择][https://juejin.im/post/5cc08848e51d456e7618a6ee#heading-2]
游戏引擎：渲染引擎，物理引擎，碰撞检测系统，音效，脚本引擎，网络引擎，场景管理
白鹭： 本身不支持spine动画，需要插件，本身支持的是dragronbone
cocos
layaAir
phaser: 也不正常
这类3d的游戏库都是封装的spine-webgl.js，也就是spine-runtime的canvas的webgl版本
渲染引擎：
pix.js：2d动画渲染引起 ：我用pix.js接入不正常，目前还不知道什么原因，可能是需要3d的支持
babylonjs
three.js 3d渲染引擎： three.js接入正常
结论：可以直接使用spine-webgl runtime来嵌入spine动画,获取选择一个渲染引擎来做动画的渲染。
spine动画调研背景
live2d具有性能问题，并且制作成本较高。
spine动画在网页端运行条件
spine在网页端能够基于canvas2d或者webgl来运行，官方提供了一些运行库, 第三方的游戏引擎和渲染引擎也有很多集成了spine-runtime，选择其中几个进行测试（ps: 白鹭本身不支持spine动画，第三方的的包在通天塔项目中尝试过动画会出现问题），结果如下:
| 官方运行库 | 结果 |
|---|---|
| spine-canvas.js | 渲染异常，会有重影 |
| spine-webgl.js | 动画效果正常 |
| 第三方游戏引擎或渲染引擎 | 结果 |
|---|---|
| pix.js | 渲染异常，贴图错位 |
| phaser | 渲染异常 |
| three.js | 动画效果正常 |
总结：测试动画需要的运行条件须为webgl，使用three.js和spine-three.js可以方便的接入到项目中。
spine动画对比live2d内存占用
利用chrome memory进行内存占用快照
-
spine动画内存占用
spine动画内存占用
-
live2d运行内存
live2d.png
结论：初步分析spine动画运行时项目所耗内存平均值大约为87mb，live2d内存平均值大约为105mb，从内存占用来看spine动画具有优势。
网友评论