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 | varspriteSheet=newcreatejs.SpriteSheet({ framerate:30, images:["./sprites.png"], frames:{"regX":82,"height":292,"count":64,"regY":0,"width":165}, animations:{ "run":[0,25,"run"] } }); vargrant=newcreatejs.Sprite(spriteSheet,"run"); stage.addChild(grant); |
上述代码使用 createjs 完成雪碧图动画的声明，从而能够进行播放。
framerate 表示每秒帧数默认帧率
images 表示合图数组
frames 声明每一帧数据
animations 定义表明每个动画指定播放的序列帧
更多可查看 API 文档、示例代码 (官方)
gka 一键生成雪碧图及 createjs 动画
上述示例可能存在以下问题
图片存在无用的透明区域 (增大图片大小)
存在相同的图片帧 (增大图片大小)
帧数据获取较为麻烦 (开发困难)
优化方案
使用 gka，仅需一行命令，优化图片、生成雪碧图及 createjs 动画文件。
1 2 | gka<dir>-tcreatejs#dir为帧图片目录 |
图片去重、相同帧图片复用
图片空白裁剪优化
合图优化
生成 createjs 动画数据
生成 createjs 动画预览文件
在线示例 、 示例代码
优化对比
优化后的雪碧图
对比两张雪碧图的压缩后大小，可发现优化了40+KB，约 40% ！
createjs 示例图片压缩后 为 105.3 KB
gka 生成图片压缩后为 64.6 KB
关于 gka
gka 是一款简单的、高效的帧动画生成工具，图片处理工具。
只需一行命令，快速图片优化、生成动画文件，支持效果预览。
一键式: 图片文件批量序列化重命名，生成帧动画文件，支持预览
性能佳: 支持
相同帧图片复用?，图片空白裁剪?，合图模式?，图片压缩?多模板: 内置多种文件输出模板，支持自定义模板