CreateJS 是基于 HTML5 开发的一套模块化的库和工具，用于快捷地开发基于 HTML5 的游戏、动画和交互应用。
gka 为 createjs 开发定制模板 gka-tpl-createjs ，仅需一行命令，优化图片资源，生成雪碧图及 createjs 动画文件。关于 gka 更多了解，请点击 https://github.com/gkajs/gka
使用 createjs 播放雪碧图动画
为了减小图片大小、减少 http 请求，可以对图片集进行合图，如下 (图片来自 createjs 官方示例)
使用 createjs 让雪碧图动起来。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var spriteSheet = new createjs.SpriteSheet({ framerate: 30, images: ["./sprites.png"], frames: {"regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165}, animations: { "run": [0, 25, "run"] } }); var grant = new createjs.Sprite(spriteSheet, "run"); stage.addChild(grant); |
上述代码使用 createjs 完成雪碧图动画的声明，从而能够进行播放。
- framerate 表示每秒帧数默认帧率
- images 表示合图数组
- frames 声明每一帧数据
- animations 定义表明每个动画指定播放的序列帧
gka 一键生成雪碧图及 createjs 动画
上述示例可能存在以下问题
- 图片存在无用的透明区域 (增大图片大小)
- 存在相同的图片帧 (增大图片大小)
- 帧数据获取较为麻烦 (开发困难)
优化方案
使用 gka，仅需一行命令，优化图片、生成雪碧图及 createjs 动画文件。
|
1 2 |
gka <dir> -t createjs # dir 为帧图片目录 |
- 图片去重、相同帧图片复用
- 图片空白裁剪优化
- 合图优化
- 生成 createjs 动画数据
- 生成 createjs 动画预览文件
优化对比
优化后的雪碧图
对比两张雪碧图的压缩后大小，可发现优化了 40+KB，约 40% ！
关于 gka
gka 是一款简单的、高效的帧动画生成工具，图片处理工具。
只需一行命令，快速图片优化、生成动画文件，支持效果预览。
- 一键式: 图片文件批量序列化重命名，生成帧动画文件，支持预览
- 性能佳: 支持
相同帧图片复用✓，图片空白裁剪✓，合图模式✓，图片压缩✓ - 多模板: 内置多种文件输出模板，支持自定义模板
官方文档：https://gka.js.org
Github 地址： https://github.com/gkajs/gka
gka createjs 模板：https://github.com/gkajs/gka-tpl-createjs
如果你觉得不错，请点个 star : D
欢迎使用，欢迎任何意见或建议，谢谢。
jun 2017 年 10 月 29 日
/ users$ gka
/usr/local/lib/node_modules/gka/lib/imagex/info.js:86
var xm = Math.max(…x),
^^^
SyntaxError: Unexpected token …
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/usr/local/lib/node_modules/gka/lib/imagex/index.js:15:18)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
装机后报错。
TAT.joeyguo 2017 年 12 月 13 日
需要 node 6.0 以上