Merge pull request #581 from PSeitz/savejson

add pixi export

src/js/controller/settings/exportimage/PngExportController.js

@@ -31,6 +31,7 @@
     this.columnsInput = document.querySelector('#png-export-columns');
 
     var downloadButton = document.querySelector('.png-download-button');
+    var downloadPixiButton = document.querySelector('.png-pixi-download-button');
     var dataUriButton = document.querySelector('.datauri-open-button');
 
     this.initLayoutSection_();
@@ -38,6 +39,7 @@
 
     this.addEventListener(this.columnsInput, 'input', this.onColumnsInput_);
     this.addEventListener(downloadButton, 'click', this.onDownloadClick_);
+    this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_);
     this.addEventListener(dataUriButton, 'click', this.onDataUriClick_);
     $.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_);
   };
@@ -156,6 +158,52 @@
     });
   };
 
+  ns.PngExportController.prototype.onPixiDownloadClick_ = function () {
+    var zip = new window.JSZip();
+
+    // Create PNG export.
+    var canvas = this.createPngSpritesheet_();
+    var name = this.piskelController.getPiskel().getDescriptor().name;
+
+    zip.file(name + '.png', pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
+
+    var width = canvas.width / this.getColumns_();
+    var height = canvas.height / this.getRows_();
+
+    var numFrames = this.piskelController.getFrameCount();
+    var frames = {};
+    for (var i = 0; i < numFrames; i++) {
+      var column = i % this.getColumns_();
+      var row = (i - column) / this.getColumns_();
+      var frame = {
+        'frame': {'x': width * column,'y': height * row,'w': width,'h': height},
+        'rotated': false,
+        'trimmed': false,
+        'spriteSourceSize': {'x': 0,'y': 0,'w': width,'h': height},
+        'sourceSize': {'w': width,'h': height}
+      };
+      frames[name + i + '.png'] = frame;
+    }
+
+    var json = {
+      'frames': frames,
+      'meta': {
+        'app': 'http://www.pisker.com',
+        'version': '1.0',
+        'image': name + '.png',
+        'format': 'RGBA8888',
+        'size': {'w': canvas.width,'h': canvas.height}
+      }
+    };
+    zip.file(name + '.json', JSON.stringify(json));
+
+    var blob = zip.generate({
+      type : 'blob'
+    });
+
+    pskl.utils.FileUtils.downloadAsFile(blob, name + '.zip');
+  };
+
   ns.PngExportController.prototype.onDataUriClick_ = function (evt) {
     window.open(this.createPngSpritesheet_().toDataURL('image/png'));
   };

src/templates/settings/export/png.html

@@ -22,5 +22,17 @@
       <button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button>
       <span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span>
     </div>
+
+    <div class="export-panel-section">
+      <div style="padding-bottom: 5px">
+        <span style="color: gold;"  class="export-panel-row">Export for PixiJS Movie: </span>
+      </div>
+      <div class="export-panel-row">
+        <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
+        <span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span>
+      </div>
+
+    </div>
+
   </div>
-</script>
+</script>