Jszip在Laya引擎上的应用

小游戏平台对于资源的大小限制很严格，在 OV 平台上，由于快游戏本身自带压缩机制，所以包体大小的问题相对不是那么严重。在微信平台上，包体是没有压缩的。一般来说有两种解决方案，一个是把资源放在云端，还有一个就是压缩本地资源。
在资源很多但又不是那么多的情况下，我们可以采用压缩包的方式存储资源。有的平台有文件读写的接口，有的没有。为了通用性，我们采取解压到内存中的方式。通过 jszip，我们可以很好的压缩和解压文件。
Laya 引擎中有多重不同的文件格式，解压压缩文件到内存中的时候其实就是读取文件并格式化，然后保存到 Laya 的缓存系统中，通过缓存读取文件的时候就能够直接读取到我们解压到内存中的内容。不过，由于机制问题，暂时还不支持天空盒的格式化，因此天空盒目前还只能放在本地。
export default class ZipManager {
  private static instance: ZipManager;

  public static getInstance(): ZipManager {
    if (!this.instance) {
      return new ZipManager();
    }
    return this.instance;
  }

  public loadZip(resurl: string, cacheUrl: string, callback: Function): void {
    var zip = Laya.loader.getRes(resurl);

    if (!zip) {
      Laya.loader.load(
        [{ type: Laya.Loader.BUFFER, url: resurl }],
        Laya.Handler.create(this, function (data) {
          Laya.loader.cacheRes(cacheUrl, Laya.loader.getRes(resurl));
          Laya.loader.clearRes(resurl);

          if (callback) {
            callback();
          }
        })
      );
    } else {
      callback();
    }
  }

  public loadZipFiles(
    resUrl: string,
    cacheUrl: string,
    callback: Function
  ): void {
    // console.log("0----------",Laya.Browser.window);
    var self = this;
    let skyBox;

    let jsZip = new JSZip();
    let zipBuff = Laya.loader.getRes(resUrl);

    let resources = {};
    // console.log("测试压缩包");

    var loadZipComplete = function () {
      Laya.loader.clearRes(resUrl);
      callback();
    };

    //获取ZIP包内容传入JSZip中解析
    jsZip.loadAsync(zipBuff).then((data) => {
      //保存文件路径到数组
      for (let file in data.files) {
        // console.log("------------file", data.files[file]);
        if (!data.files[file].dir) {
          if (file.indexOf(".lh") != -1) {
            //存入模型文件
            if (!resources["other"]) {
              resources["other"] = [];
            }

            resources["other"].push(file);
          } else if (file.indexOf(".png") != -1 || file.indexOf(".jpg") != -1) {
            //存入图片
            if (!resources["image"]) {
              resources["image"] = [];
            }

            resources["image"].push(file);
          } else if (file.indexOf(".json") != -1) {
            //存入json
            if (!resources["other"]) {
              resources["other"] = [];
            }

            resources["other"].push(file);
          } else if (file.indexOf(".csv") != -1) {
            //存入csv
            if (!resources["other"]) {
              resources["other"] = [];
            }

            resources["other"].push(file);
          } else if (
            file.indexOf(".lm") != -1 ||
            file.indexOf(".ltc") != -1 ||
            file.indexOf(".lmat") != -1 ||
            //存入网格 天空盒材质解析文件 材质
            file.indexOf(".lani") != -1
          ) {
            if (!resources["mat"]) {
              resources["mat"] = [];
            }

            if (file.indexOf(".ltc") != -1) {
              let fileParts = file.split("/");
              let name = fileParts[fileParts.length - 1].replace(".ltc", "");
              skyBox = name;
            }
            resources["mat"].push(file);
          } else {
            //存入其他
            if (!resources["other"]) {
              resources["other"] = [];
            }
            resources["other"].push(file);
          }
        }
      }
      loadImage();
    });

    //格式化文件并存入缓存
    let subCount = 0;
    let subTotal = 0;
    let loadImage = () => {
      if (resources["image"]) {
        for (let key in resources["image"]) {
          subTotal++;
          let file = resources["image"][key];
          jsZip
            .file(file)
            .async("base64")
            .then((content: any) => {
              let func = Laya.Loader.prototype["parsePLFData"];
              let data = { json: {}, text: {} };
              let imgBase64;
              if (file.indexOf(".png") != -1) {
                imgBase64 = "data:image/png;base64," + content;
              } else {
                imgBase64 = "data:image/jpg;base64," + content;
              }

              let image: HTMLImageElement = document.createElement("img");
              let onImageLoaded: EventListenerOrEventListenerObject = () => {
                image.removeEventListener("load", onImageLoaded);
                //接下来就可以把贴图对象赋值给材质了
                if (skyBox && file.indexOf(skyBox) != -1) {
                  // skyBox = null;
                  Laya.loader.cacheRes(cacheUrl + "/" + file, image);
                } else {
                  let texture: Laya.Texture2D = new Laya.Texture2D();
                  texture.loadImageSource(image);
                  Laya.loader.cacheRes(cacheUrl + "/" + file, texture);
                  // console.log("图片纹理", Laya.loader.getRes(cacheUrl + "/" + file));
                }
                subCount++;
                if (subCount == subTotal) {
                  subCount = 0;
                  subTotal = 0;
                  loadLm();
                }
              };
              image.addEventListener("load", onImageLoaded);
              image.src = imgBase64;
            });
        }
      } else {
        loadLm();
      }
    };

    let loadLm = () => {
      if (resources["mat"]) {
        for (let key in resources["mat"]) {
          subTotal++;
          let file = resources["mat"][key];
          if (file.indexOf(".ltc") != -1) {
            jsZip
              .file(file)
              .async("text")
              .then((content: any) => {
                let contJson = JSON.parse(content);
                let func = Laya.Loader.prototype["parsePLFData"];
                let data = { json: {}, text: {} };
                data.json[cacheUrl + "/" + file] = contJson;

                func.call(Laya.Loader, data);

                Laya.loader.create(
                  cacheUrl + "/" + file,
                  Laya.Handler.create(this, (res) => {
                    // console.log("预加载", res);
                    subCount++;
                    if (subCount == subTotal) {
                      subCount = 0;
                      subTotal = 0;
                      loadOther();
                    }
                  })
                );
              });
          } else if (file.indexOf(".lmat") != -1) {
            jsZip
              .file(file)
              .async("text")
              .then((content: any) => {
                let contJson = JSON.parse(content);
                let func = Laya.Loader.prototype["parsePLFData"];
                let data = { json: {}, text: {} };
                data.json[cacheUrl + "/" + file] = contJson;

                func.call(Laya.Loader, data);

                Laya.loader.create(
                  cacheUrl + "/" + file,
                  Laya.Handler.create(this, (res) => {
                    // console.log("预加载",file, rses);
                    subCount++;
                    if (subCount == subTotal) {
                      subCount = 0;
                      subTotal = 0;
                      loadOther();
                    }
                  })
                );
              });
          } else {
            jsZip
              .file(file)
              .async("uint8array")
              .then((content: any) => {
                let func = Laya.Loader.prototype["parsePLFData"];
                let data = { json: {}, text: {} };
                data.json[cacheUrl + "/" + file] = content;

                func.call(Laya.Loader, data);

                Laya.loader.create(
                  cacheUrl + "/" + file,
                  Laya.Handler.create(this, (res) => {
                    // console.log("预加载", res);
                    subCount++;
                    if (subCount == subTotal) {
                      subCount = 0;
                      subTotal = 0;
                      loadOther();
                    }
                  })
                );
              });
          }
        }
      } else {
        loadOther();
      }
    };

    let loadOther = () => {
      for (let key in resources["other"]) {
        subTotal++;
        let file = resources["other"][key];
        if (file.indexOf(".lh") != -1) {
          jsZip
            .file(file)
            .async("text")
            .then((content: any) => {
              let contJson = JSON.parse(content);
              let func = Laya.Loader.prototype["parsePLFData"];
              let data = { json: {}, text: {} };
              data.json[cacheUrl + "/" + file] = contJson;

              func.call(Laya.Loader, data);

              Laya.loader.create(
                cacheUrl + "/" + file,
                Laya.Handler.create(this, (res) => {
                  // console.log("预加载",file, res);
                  subCount++;
                  if (subCount == subTotal) {
                    loadZipComplete();
                  }
                })
              );
            });
        } else if (file.indexOf(".json") != -1) {
          jsZip
            .file(file)
            .async("text")
            .then((content: any) => {
              let contJson = JSON.parse(content);
              let func = Laya.Loader.prototype["parsePLFData"];
              let data = { json: {}, text: {} };
              data.json[cacheUrl + "/" + file] = contJson;

              func.call(Laya.Loader, data);

              Laya.loader.create(
                cacheUrl + "/" + file,
                Laya.Handler.create(this, (res) => {
                  // console.log("预加载", res);
                  subCount++;
                  if (subCount == subTotal) {
                    loadZipComplete();
                  }
                })
              );
            });
        } else if (file.indexOf(".csv") != -1) {
          jsZip
            .file(file)
            .async("text")
            .then((content: any) => {
              Laya.loader.cacheRes(cacheUrl + "/" + file, content);
              subCount++;
              if (subCount == subTotal) {
                loadZipComplete();
              }
            });
        } else {
          jsZip
            .file(file)
            .async("uint8array")
            .then((content: any) => {
              let func = Laya.Loader.prototype["parsePLFData"];
              let data = { json: {}, text: {} };
              data.json[cacheUrl + "/" + file] = content;

              func.call(Laya.Loader, data);

              Laya.loader.create(
                cacheUrl + "/" + file,
                Laya.Handler.create(this, (res) => {
                  // console.log("预加载", res);
                  subCount++;
                  if (subCount == subTotal) {
                    loadZipComplete();
                  }
                })
              );
            });
        }
      }
    };
  }
}