Hi everybody.
I’m trying to build a desktop browser game that loads a lot of minigames as bundle inside of it. The question is can I zip a bundle and then load it remotely?
Please explain if possible or not.
Best regards.
p/s: Normally, I can also load a bundle from a directory on the local and remote servers, but I try to load it from the .zip file on the remote server.
There is no unzip feature in JS, what you can try to do is to setup GZIP transmission for bundles between server and the browser
There is a example here
Dear @pandamicro.
Thanks for your help, but let me explain what I’m trying to do in this situation.
First, I build a mini-game as a bundle and zipped it and then upload it to a remote server (remote.zip).
Second, I’m using assetsManager.loadAny to load it and get the raw data of the .zip file.
Third, I convert the raw data to a File, then use zip.js to read it, and I get the raw data of all the files in the package (remote.zip), then I convert all the data. whether it becomes File.
The problem is that I don’t know how to convert all the Files back into a bundle so that it can be loaded through assetsManager.loadBundle. Below is my code:
registerDownloadZip(){
assetManager.downloader.register('.zip', function (url, options, callback) {
// Download the resource
let xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.onreadystatechange = function(evt) {
if (xhr.readyState == 4 && xhr.status == 200) {
callback && callback(null, xhr.response);
}
}.bind(this);
xhr.responseType = "arraybuffer";
xhr.send();
});
assetManager.parser.register('.zip', function (data, options, callback) {
// Parse the downloaded file
let file = new File([data], "remote.zip", {type: "application/x-zip-compressed"});
callback(null, file);
});
assetManager.loadAny({'url': 'https://remote_server/remote.zip'}, {isCrossOrigin: true}, this.onComplete.bind(this));
}
onComplete(err, file:File){
if(err) return console.error("onComplete: ", err);
else{
this.loadZip(file);
}
}
async loadZip(file:File){
let entries = await this.getEntries(file, {filenameEncoding:"cp437"});
console.log(entries);
for (let i = 0; i < entries.length; i++) {
const ele = entries[i];
this.entryToFile(ele);
}
}
getEntries(file, options) {
return (new zip.ZipReader(new zip.BlobReader(file))).getEntries(options);
}
entryToFile(entry){
let arrName = entry.filename.split('/');
let fileName = arrName[arrName.length-1];
if(fileName){
let fType = this.getFileType(fileName);
let file = new File([entry.rawExtraField.buffer], fileName, {type: fType});
file['destination'] = entry.filename;
this._fileList.push(file);
}
}
It doesn’t work like this, on web platform, bundles are just file folders on the server, we access to bundle and its files through single file HTTP requests, then it can be automatically recognized as its original file type, like json, images etc.
The way you are doing is to read all zip content into an AB(array buffer), but then, to convert data in AB to an image or json would require extra work, I’m not sure it’s doable considering there is no file system in web browser. This requires you can read file system information like folder structure, file header etc and then split the AB into multiple file data buffer, then convert all data buffer to json, images or other types accordingly. I truly doubt it’s gonna work for all file types or even just read all file system structure in the unzipped data.
Besides, even there is a way, it really doesn’t worth the effort. Keep it in raw files have two advantages
- You can still compress them by using gzip automatically
- The browser can request multiple files simultaneously to reduce loading time instead of loading the whole zip file with only one download thread
Dear @pandamicro.
Did you mean assetsManager.loadBundle acts like a browser and it send http request to remote server to download a bundle piece by piece?
When you publish your game to web platform and visit it in a web browser, yes, it is requesting files in bundle one by one
Dear @pandamicro.
Looks like I made a mistake trying to do something unnecessary.
But I have another question. Do assetManager.loadBundle work the same way on browser and I don’t need to do anything to improve performance of load?
Best regard.
What mean that pandamicro said: gzip compression is a built-in feature of the web server and the browser will automatically decode it when the returned content is gzip. Example like image
what you need is to enable this feature on the web server
The only thing you need to do is to enable GZIP for all your file types in your server as @anonus suggested