使用 gka 加速 createjs 动画开发及图片优化

[joeyguo]

原文地址

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

gka 为 createjs 开发定制模板 gka-tpl-createjs ，仅需一行命令，优化图片资源，生成雪碧图及 createjs 动画文件。欢迎 star : D https://github.com/gkajs/gka

使用 createjs 播放雪碧图动画

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

使用 createjs 让雪碧图动起来。

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 定义表明每个动画指定播放的序列帧

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

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

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

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

优化方案

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

gka <dir> -t createjs         # dir 为帧图片目录

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

在线示例 、 示例代码

优化对比

优化后的雪碧图

对比两张雪碧图的压缩后大小，可发现优化了40+KB，约 40% ！

• createjs 示例图片压缩后 为 105.3 KB
• gka 生成图片压缩后为 64.6 KB

关于 gka

gka 是一款简单的、高效的帧动画生成工具，图片处理工具。

只需一行命令，快速图片优化、生成动画文件，支持效果预览。

• 一键式: 图片文件批量序列化重命名，生成帧动画文件，支持预览
• 性能佳: 支持相同帧图片复用✓，图片空白裁剪✓，合图模式✓，图片压缩✓
• 多模板: 内置多种文件输出模板，支持自定义模板

官方文档：https://gka.js.org Github 地址： https://github.com/gkajs/gka gka createjs 模板：https://github.com/gkajs/gka-tpl-createjs

如果你觉得不错，请点个 star : D 欢迎使用，欢迎任何意见或建议，谢谢。