一、准备工具
二、工作流程
- 使用Adobe Animate CC 导出sprite sheets
-
- 新建一个元件(影片剪辑MovieClip),在这个元件里添加 序列帧动画;
- 在库中选中这个元件,右击——生成Sprite 表——然后如图,进行设置
注意:
①这里算法要 选择 MaxRects ,默认算法会使生成的sprite表里的小图大小不一,虽然会节省空间,但是使用起来会麻烦一点;
选中 MaxRects ,生成的sprite表里的小图会统一按照最大的那张小图的大小进行计算规划。
②数据格式 选择 JSON-Array
③这里的宽高,是指输出的 sprite表的大小,可以自己设置,也可以选择自动调整大小,但是不能 =>2048*2048,不然游览器读取的时候会产生BUG,卡顿等现象;这是游览器的限制;
-
- 导出后有两个文件,一个UI.json,一个UI.png;
2.进行数据转换,把json里的数据转成jsMovieclip插件需要的格式
-
- 1.打开jsMovieclip文件夹里的——tools——convert——index.html
注意:index.html里的jq链接可能失效了,改成正确的路径
-
- 2.复制UI.json里的数据,然后贴到index.html里的文本框里,点击 OK按钮,输出jsMovieclip格式的数据;
- 3.然后具体使用,参照jsMovieclip里的example,如:jsMovieclip——samples——basic——index.html,等等;