Creator3D:JSZip_压缩

前言

之前在使用Cocos Creator的时候介绍了一下JSZip的用法,当时写的不是很详细。同时也遗留了一些问题。现在开始用Creator3D了,验证了一下是否还可以用,答案是必须的,下边详细的介绍一下。

正文

1.包体大小的重要性(为啥要压缩)

在游戏开发中,尤其是小游戏平台,平台提供给游戏的包体大小非常有限,大多都在4M左右,而引擎的的代码大概就已经1M左右了,留给游戏本省开发的空间那就更少了可怜了,只能想办法对资源下手,包括图片压缩,音效压缩等等。接下来我就以json的压缩为例说一下,

只说压缩,大家可能不太明白到底有啥用,看图说话:

压缩前和压缩后的区别。

当然我这个json本身就不是很大,如果json本身就很大,那么区别就更大了。

2.JSZip

一句话介绍JSZip:他是一个用于创建、读取和编辑.zip文件的JavaScript库

那么这个库在哪下载呢,在文章末尾提供的gitee链接中就有,里
边包含了js库,和ts所需的.d.ts文件,当然大家也可以在其他地
方下载,但是我更加推荐是下载我这里的,因为js库中有做一点点
改动来完善微信小游戏运行报错的问题*
  • 1.导入插件

在资源目录assets下创建lib文件夹,将下载的js库和.d.ts文件复制到里边,选中js库,设置导为插件。见图

  • 2.文件压缩

文件的压缩,我直接使用了2345好压进行压缩。压缩格式是.zip。

将压缩好的zip文件拷贝到assets下的resources文件夹下,方便后边的资源动态加载。

  • 3.解压

一切准备就绪,上代码:

let path: string = url.raw("resources/zip/config.zip");
loader.load({ url: path, type: "binary", }, (err, res) => {
    if (err) return;
    console.log(res)
    JSZip.loadAsync(res).then((zip: JSZip) => {
        let path:string="config.json"
        zip.file("path").async("text").then((data: string) => {
            console.log(JSON.parse(data));
        })
    })
});

首先加载压缩文件,注意了,加载格式因该是二进制的"binary",

加载完毕后调用JSZip的方法,进行解压操作

在调用下边代码获取json文件信息时,如果不太清除path的路
径,大家可以先输出一下console.log(zip.files),
zip.files 是一个数组,数组中列出了压缩文件中所有的子文件目录
let path:string="config.json"
zip.file(path).async("text").then((data: string) => {
    console.log(JSON.parse(data));
})

注: 微信平台需要将zip的后缀改为bin,才能以二进制模式读取文件。

3.gitee

https://gitee.com/carlosyzy/creator3d_jszip

4.微信公众号:

搬砖小菜鸟:微信扫码关注公众号,更多实用技巧任你用

4赞

:+1:
不知道性能如何

mark…

麒麟子顶着黑眼圈,披星戴月来看你了。

2赞

终于被麒麟大佬翻牌了:joy:

性能没具体测试过,但是预测比分包下载或者服务器获取速度快的多

大佬,预制体有方案吗

不行的,我研究过一段时间没有研究出来

什么预支体?引擎自动生成的json文件么?

好吧,我发现预制体的文本读出来了,但是缺少转换成creator。我觉得要是可以解要到当前文件夹,在通过cc.load去读就好了。但是没找到解压到当前文件夹的方法

就是prefab文件

可以写一个脚本合并所有json成一个大json文件然后再压缩一下

运行到解析zip时报错:

  let path: string = url.raw('resources/anims.zip');
    loader.load({ url: path, type: "binary", }, (err, res) => {
        if (err) return;
        console.log(res)
        console.log('读取到文件?');
        JSZip.loadAsync(res).then((zip: JSZip) => {   //这里报错,下面的输出都没显示
            console.log('-----------------');
            console.log(zip.files);
            let path:string="boom3.png";
            console.log('读取到文件');
            zip.file("path").async("base64").then((data: string) => {
                // console.log(JSON.parse(data));
                console.log(data);
            })
        })
      });

报错信息:

Uncaught (in promise) Error: Can’t find end of central directory : is this a zip file ? If it is, see
https://stuk.github.io/jszip/documentation/howto/read_zip.html
at ZipEntries.readEndOfCentral (jszip.js:4102)
at ZipEntries.load (jszip.js:4194)
at jszip.js:1216

zip.file(“path”) 这代码有问题, zip.file这函数的参数是想要加载文件,在zip内的相对路径

它上面一行都没执行到。这个path去掉了引号也还是一样的。

打个断点 看看res。加载出来的资源有问题

截图

看起来像字节流。

找到问题了。压缩文件必须在创建时就是zip后缀的。假如时别的格式,然后更改为zip后缀的则无法读取。
但是在把读取的资源转换为图片上碰到点问题。贴主去年9月份发的这个帖子不太好使。
Creator3D:入门一定要会的几种资源加载

82, 97, 这是Rar文件

哦?怎么看的?