【咸鱼教程】JsZip压缩与解压教程

引擎版本3.0.6

教程目录
一 为什么要用jszip
二 如何使用jszip
    2.1 下载jszip库
    2.2 导入jszip库
    2.3 加载和解压zip代码
三 Demo源码下载

一 为什么要用jszip
在游戏中有大量配置文件时，为了减少加载次数和传输量，将文件打包成zip，在egret中加载并解压获取数据。

在中大型游戏，不可避免有大量的游戏配置文件。

 


为了减少加载次数和传输量，我们事先将这些文件压缩打包成zip， 然后在egret中加载，并使用jszip库解压获取其中的数据。



 


二 如何使用jszip

2.1 下载jszip库
官方gitbug下载地址：https://github.com/egret-labs/egret-game-library

2.2 导入jszip库
将下载的jszip文件夹放到合适位置，我这里直接丢在了项目目录下
 

打开项目目录下egretProperties.json，将jszip添加到配置文件中

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

"modules": [     {       "name": "egret"     },     {       "name": "game"     },     {       "name": "tween"     },     {       "name": "res"     },         {                 "name": "jszip",                 "path": "jszip"         }   ]

添加完成后，记得编译一次引擎。
 

2.3  加载和解压zip代码

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10

//加载zip RES.getResByUrl("resource/assets/assets.zip", function(data){               //解压数据               var zip = new JSZip(data);                               //读取技能数据               var skillJson = JSON.parse(zip.file("skill.json").asText());               console.log(skillJson);                 },this, RES.ResourceItem.TYPE_BIN);

更新一个解压图片的：
参考的教程： https://segmentfault.com/a/1190000002669262

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8

//读取图片  var buffer = zip.file("fire.png").asArrayBuffer(); var base64 = this.arrayBufferToBase64(buffer); base64 = "data:image/png;base64," + base64;                 var img:eui.Image = new eui.Image(); img.source = base64; this.addChild(img);

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8 9

private arrayBufferToBase64( buffer ) {      var binary = '';      var bytes = new Uint8Array( buffer );      var len = bytes.byteLength;      for (var i = 0; i < len; i++) {           binary += String.fromCharCode( bytes[ i ] );      }      return window.btoa( binary );  }

三 Demo源码下载（coding git）