New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
joeyguo opened this Issue Sep 10, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@joeyguo
Owner

joeyguo commented Sep 10, 2017

原文地址

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

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

使用 createjs 播放雪碧图动画

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

createjs-s

使用 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 动画预览文件

在线示例示例代码

优化对比

优化后的雪碧图

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
欢迎使用,欢迎任何意见或建议,谢谢。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment