使用 Zip 加速 CocosWeb 加载

Creator 3.x
#23

spine，图集,模型，等要不要单独解析？

#24

我觉得是需要的， unzip后就获得每份文件的buffer， 如果没有write file的情况下那等于zip里所有文件包括游戏还未用到的都加载到内存里。当你要加载图集时就变成找回该png和plist的buffer， 然后反序列转回SpriteAtlas

#25

那就很麻烦了，使用不方便，并且我还不知道解析后怎么用

#26

不用啊，人家不都帮你写好了吗，除了图片按原来的image.src方式加载外，其他的json、bin文件都帮你处理好了。原来是加载bin然后返回，现在他帮你做了从zip里读取bin返回了，你只需要先加载zip包就行

#27

已经使用上了，但是我想获取资源下的所有可解析资源的bin和json，我现在做法是本地加载一遍，获取到实际上可以拦截的资源，然后jszip精准对这些文件进行压缩，有没有办法直接在打包阶段预解析这些资源

#28

打包出来和本地运行出来的资源都不一样的吧

1赞
#29

图片应该可以这样做，已经通过这个方法加载了远程骨骼动画。

cc.assetManager.loadAny({ url: zipUrl, ext: '.bin' }, async (error, assets) => {
            if (error) return;
            let jszip = new Jszip();
            let zipData = await jszip.loadAsync(assets);
            let keys = Object.keys(zipData.files);
            for (let i = 0; i < keys.length; i++) {
                let key = keys[i];
                let data = zipData.files[key];
                let extName = key.split('.').pop();//文件后缀
                switch (extName) {
                    case 'png':
                    case 'jpg':
                    case 'bmp':
                    case 'jpeg':
                    case 'gif':
                    case 'ico':
                    case 'tiff':
                    case 'webp':
                    case 'image':
                        let tempImageName = key.split('/').pop();
                        let imageExt = `.` + tempImageName.split('.').pop();
                        let asyncType = cc.sys.capabilities.imageBitmap && cc.macro.ALLOW_IMAGE_BITMAP ? 'blob' : 'base64';
                        data.async(asyncType).then((result) => {
                            //@ts-ignore
                            cc.assetManager.parser.parseImage(result, {}, (err, imageData) => {
                                if (err) {
                                    return;
                                }
                                if (imageData) {
                                    //@ts-ignore
                                    cc.assetManager.factory.create(tempImageName + Date.now(), imageData, imageExt, {}, (err, texture: cc.Texture2D) => {
                                        if (err) {
                                            return;
                                        }
                                    })
                                }
                            });
                        });
                        break;
                    case 'default':
                        break;
                }
            }
        });
4赞
#30
#31

插眼，随时传送过来。大佬写的挺清楚的

#32

这个我理解的是还得找到具体的组件比如sprite来赋值吧

#33

是的，这里只是创建的逻辑

#34

有办法根据缓存里的key值来得到是哪个图片吗

#35

看了一下2.4的factory.create方法，创建过的图片会会以传入的第一个参数作为key缓存起来

#36

就是我现在把图片都放进压缩包里，就是怎么能解析到对应的组件上而不是还得通过找对应的组件来设置

#37

记一下吧。

抖音小游戏性能优化求助
#38

想在编辑器编辑好界面，然后构建完之后再zip所有图片，加载的时候先加载zip包是吧？
如果是这样的话

let downloadImage = function (url, options, onComplite) {
            //url ： assets/native/d1/d15232231231231231231.png
            //从zip包加载对应文件
        }

        cc.assetManager.downloader.register({ ".png": downloadImage, ".jpg": downloadImage, ".webp": downloadImage })；

这样应该可以，可以试一下

#39

我就是这样试了，现在是到这里
let downloadImage = function (url, options, onComplite) {
这里还得解析zip包解压出来的文件找对应的组件，还是说直接 直接根据**url,**从zip包缓存里取对应的文件就可以了
}

#40

直接从zip包读取到创建出来后回调onComplite就可以了

#41

let downloadImage = function (url, options, onComplite) {
if(zipCache.has(url)){
这里还得创建对应的图片然后赋值给sprite吗,这样的话还是得找到具体的sprite组件
onComplete();
}

#42 
let downloadImage = function (url, options, onComplite) {
            //url ： assets/native/d1/d15232231231231231231.png
            //从zip包加载对应文件
        }

        cc.assetManager.downloader.register({ ".png": downloadImage, ".jpg": downloadImage, ".webp": downloadImage })；

你挂在sprite上的图片加载的时候走的就是这里啊，不太理解你说的要找具体的sprite组件是什么意思，我有点懵