I'm coding a little game with some tiled map with p5js.
When the game is starting, zip file containing all graphics is downloaded and then all images in that zip file are unzipped with zip.js and loaded with p5js. This is how i'm doing it:
Zip.js initialisation:
zip.workerScripts = {
deflater: ['libs/z-worker.js', 'libs/pako.min.js', 'libs/pako/codecs.js'],
inflater: ['libs/z-worker.js', 'libs/pako.min.js', 'libs/pako/codecs.js']
};
Read the downloaded zip file:
this.onDlFinished = function(file) {
zip.createReader(new zip.BlobReader(file), function(zipReader) {
zipReader.getEntries(function(entries) {
context.unzipEntries(entries, context);
});
}, function() {
console.log("Error while loading zipfile");
});}
}
Loop over all entries in zip file:
this.unzipEntries = function(entries, context) {
//HERE TILECOUNT = 5000
for (i=0; i < this.tileCount; i++) {
context.unzipEntry(entries[i], context);
}
}
And finally read and load each entry:
this.unzipEntry = function(entry, context) {
var pos = eval(entry.filename.replace(".png", ""));
entry.getData(new zip.BlobWriter(), function(data) {
url = window.URL.createObjectURL(data)
console.log(url);
context.tiles[pos] = loadImage(url, function() {
context.total += 1;
window.URL.revokeObjectURL(url);
if (context.total == context.tileCount) {
$('#startLoading').modal('close');
context.loaded = true;
}
})
})
}
Zip file weight: 2.1 mB
The problem is that it take so many times ... Nothing append during more than 1,5 minutes and then, all images are loaded in less than a few seconds
So, is it possible to improve that code ?
Thanks !