原文地址

CreateJS 是基于 HTML5 开发的一套模块化的库和工具,用于快捷地开发基于HTML5的游戏、动画和交互应用。

gka 为 createjs 开发定制模板 gka-tpl-createjs ,仅需一行命令,优化图片资源,生成雪碧图及 createjs 动画文件。关于 gka 更多了解,请点击 https://github.com/gkajs/gka

使用 createjs 播放雪碧图动画

为了减小图片大小、减少http请求,可以对图片集进行合图,如下(图片来自 createjs 官方示例)

createjs-s

使用 createjs 让雪碧图动起来。

上述代码使用 createjs 完成雪碧图动画的声明,从而能够进行播放。

  • framerate 表示每秒帧数默认帧率
  • images 表示合图数组
  • frames 声明每一帧数据
  • animations 定义表明每个动画指定播放的序列帧

更多可查看 API 文档示例代码 (官方)

gka 一键生成雪碧图及 createjs 动画

上述示例可能存在以下问题

  • 图片存在无用的透明区域 (增大图片大小)
  • 存在相同的图片帧 (增大图片大小)
  • 帧数据获取较为麻烦 (开发困难)

优化方案

使用 gka,仅需一行命令,优化图片、生成雪碧图及 createjs 动画文件。

  • 图片去重、相同帧图片复用
  • 图片空白裁剪优化
  • 合图优化
  • 生成 createjs 动画数据
  • 生成 createjs 动画预览文件

在线示例示例代码

优化对比

优化后的雪碧图

sprites

对比两张雪碧图的压缩后大小,可发现优化了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
欢迎使用,欢迎任何意见或建议,谢谢。

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/09/gka3-2/

发表评论