diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js index 33ff67e7..a3d97e0c 100644 --- a/src/js/controller/settings/exportimage/PngExportController.js +++ b/src/js/controller/settings/exportimage/PngExportController.js @@ -13,6 +13,8 @@ this.pngFilePrefixInput = document.getElementById('zip-prefix-name'); this.pngFilePrefixInput.value = 'sprite_'; + this.splitByLayersCheckbox = document.getElementById('zip-split-by-layers'); + var downloadButton = document.querySelector('.png-download-button'); this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_); @@ -30,12 +32,34 @@ ns.PngExportController.prototype.onZipButtonClick_ = function () { var zip = new window.JSZip(); - for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) { - var frame = this.piskelController.getFrameAt(i); - var canvas = this.getFrameAsCanvas_(frame); - var basename = this.pngFilePrefixInput.value; - var filename = basename + (i + 1) + '.png'; - zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + function splittedExport() { + var layers = this.piskelController.getLayers(); + for (var j = 0; this.piskelController.hasLayerAt(j); j++) { + var layer = this.piskelController.getLayerAt(j); + for (var i = 0; i < this.piskelController.getFrameCount(); i++) { + var frame = layer.getFrameAt(i); + var canvas = this.getFrameAsCanvas_(frame); + var basename = this.pngFilePrefixInput.value; + var filename = 'l' + j + '_' + basename + (i + 1) + '.png'; + zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + } + } + } + + function mergedExport() { + for (var i = 0; i < this.piskelController.getFrameCount(); i++) { + var frame = this.piskelController.getFrameAt(i); + var canvas = this.getFrameAsCanvas_(frame); + var basename = this.pngFilePrefixInput.value; + var filename = basename + (i + 1) + '.png'; + zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + } + } + + if (this.splitByLayersCheckbox.checked) { + splittedExport.call(this); + } else { + mergedExport.call(this); } var fileName = this.getPiskelName_() + '.zip'; diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html index d3d61870..fe56218d 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -15,6 +15,12 @@
+
+
+