CreateJS 是基於 HTML5 開發的一套模塊化的庫和工具，用於快捷地開發基於HTML5的遊戲、動畫和交互應用。

gka 為 createjs 開發定製模板 gka-tpl-createjs ，僅需一行命令，優化圖片資源，生成雪碧圖及 createjs 動畫文件。關於 gka 更多了解，請點擊 https://github.com/gkajs/gka

使用 createjs 播放雪碧圖動畫

為了減小圖片大小、減少http請求，可以對圖片集進行合圖，如下(圖片來自 createjs 官方示例)

使用 createjs 讓雪碧圖動起來。

上述代碼使用 createjs 完成雪碧圖動畫的聲明，從而能夠進行播放。

• framerate 表示每秒幀數默認幀率

• images 表示合圖數組

• frames 聲明每一幀數據

• animations 定義表明每個動畫指定播放的序列幀

更多可查看 API 文檔、示例代碼 (官方)

gka 一鍵生成雪碧圖及 createjs 動畫

上述示例可能存在以下問題

• 圖片存在無用的透明區域 (增大圖片大小)

• 存在相同的圖片幀 (增大圖片大小)

• 幀數據獲取較為麻煩 (開發困難)

優化方案

使用 gka，僅需一行命令，優化圖片、生成雪碧圖及 createjs 動畫文件。

• 圖片去重、相同幀圖片復用

• 圖片空白裁剪優化

• 合圖優化

• 生成 createjs 動畫數據

• 生成 createjs 動畫預覽文件

在線示例 、 示例代碼

優化對比

優化後的雪碧圖

對比兩張雪碧圖的壓縮後大小，可發現優化了40+KB，約 40% ！

• createjs 示例圖片壓縮後 為 105.3 KB

• gka 生成圖片壓縮後為 64.6 KB

關於 gka

gka 是一款簡單的、高效的幀動畫生成工具，圖片處理工具。

只需一行命令，快速圖片優化、生成動畫文件，支持效果預覽。

• 一鍵式: 圖片文件批量序列化重命名，生成幀動畫文件，支持預覽

• 性能佳: 支持相同幀圖片復用?，圖片空白裁剪?，合圖模式?，圖片壓縮?

• 多模板: 內置多種文件輸出模板，支持自定義模板

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！